Creating a useful 9-patch png for Android

[Rick Walsh]

Miika, Dirk,

I worked out how to create a useful 9-patch png for Android.  So as not to
waste more of anyone's time next time we want to do it again, here's how I
did it.

The splash images were created using Gimp and draw9patch, one of the
Android SDK tools.

The purpose of a 9-patch png is to have an image where part of it will not
be scaled, and part of it will be stretched.  The image does not get
cropped, and does not get shrunk.  If the image is too large for the
display, it will become distorted.  To get the square logo as a splash
screen, with the logo taking up (nearly) the entire shorter dimension
(width in portrait, or height in landscape), and "padding" filling out the
long dimension, we need:
- image dimension is no larger (can be smaller) than the short dimension of
the display
- the top, bottom, left and right edges are specified as "padding" (i.e.
the bit that will be stretched to fit) of a few pixels thick
- an extra margin between the non-scaled image and the padding to avoid
interpolation of the image in the scaled part (min one pixel according to
http://developer.android.com/tools/help/draw9patch.html, I used 6 pixels)

With this, the part of the image that isn't padding (almost all of it) will
be displayed at original resolution in the middle of the screen, while the
padding will be scaled to fill the outside.

I used padding thickness of 4 pixels, and created images to fit mdpi, hdpi,
xhdpi, xxhdpi and xxxhdpi displays.  I took target minimum resolutions from
here
https://software.intel.com/en-us/xdk/articles/android-splash-screens-using-nine-patch-png
(specified up to xhdpi) and inferred them for xxhdpi and xxxhdpi from here
http://iconhandbook.co.uk/reference/chart/android/

Density Min. width (in portrait) Min. height Square dimension Padding
(scaled) Margin (not scaled) Main image mdpi 320 470 320 4 6 300 hdpi 480
640 480 4 6 460 xhdpi 720 960 720 4 6 700 xxhdpi 1080 1440 1080 4 6 1060
xxxhdpi 1440 1920 1440 4 6 1420
The splash image is based on the vector image subsurface-mobile-icon.svg in
the icons directory.  The steps to create the xhdpi image were:

1) Open subsurface-mobile-icon.svg in Gimp, and specify image dimension of
700x700 (our main image)
2) Resize the canvas to 720x720, centering the main image (x offset = 10, y
offset = 10)
3) Export as png, I named it subsurface-mobile-icon-720.png
4) Start draw9patch (Android SDK tools), and open
subsurface-mobile-icon-720.png.
Note, draw9patch automatically adds a 1 pixel thick perimeter, which is
used to define the regions of the image.  As such, you are now working with
a 722x722 image, with the actual image starting at (1, 1) and ending at
(721, 721).
The left side of the screen is where you define the padding regions, the
right side of the screen is how the image is displayed in portrait and
landscape (will be distorted as we haven't defined padding yet).  On my
little laptop display, you need to scroll both sections to see them
properly.
5) Click "show patches", this displays the padding we will define as green,
and the non-scalable region as pink.  Zoom to ~400% so you can see
individual pixels easily.
6) Click and drag within the top 1 pixel thick perimeter, near the left
side, but not all the way to pixel 1.  This defines the left padding zone,
displayed in pink with a black line along the top perimeter.
[image: Inline images 3]
7) Drag the left and right bounds of the padding zone to x = 1 and x =5.
If you hover over it in the perimeter, the tooltip will say "horizontal
patch: 1 - 5 px".
[image: Inline images 4]
8) Repeat steps 6 and 7 to draw the padding zones along the right hand side
and top and bottom.  The zones must be drawn in the top and left perimeter
lines, not the bottom or right zones.  Note that because we have a 1 pixel
thick perimeter, the image we are working on has dimensions 722x722.  Thus
the right and bottom padding zones needs to be 717 - 721.
9) Check on the right hand side of the that the image is displayed
undistorted in both profile and landscape modes.[image: Inline images 5]
10) Save as a .9.png file, and copy to the source tree as
android-mobile/res/drawable-xhdpi/subsurface_mobile_splash.9.png
11) Repeat for all the other resolutions.

I wasn't too sure if a nopdi image was needed, but I copied the xhdpi
9-patch png there anyway.  It may never be used as all the other
resolutions are provided.

Hope this can be helpful in the future.

The padding doesn't have to be at the bounds of the image.  For example, I
made an alternate splash screen with the text Subsurface-Mobile at the
base, and with padding between the logo and the text.  This means the text
will always be a the base of screen.  If you prefer this, I can send a
patch with updated splash screens.  Or if you want a different background
colour.
[image: Inline images 6]
[image: Inline images 7]

[image: Inline images 8]


Cheers,

Rick
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20151230/4d6b69f1/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: splash screen with title.png
Type: image/png
Size: 122775 bytes
Desc: not available
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20151230/4d6b69f1/attachment-0003.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Step7.jpg
Type: image/jpeg
Size: 16540 bytes
Desc: not available
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20151230/4d6b69f1/attachment-0003.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: step9.jpg
Type: image/jpeg
Size: 133357 bytes
Desc: not available
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20151230/4d6b69f1/attachment-0004.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: splash screen with title-landscape.png
Type: image/png
Size: 132728 bytes
Desc: not available
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20151230/4d6b69f1/attachment-0004.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: step6.jpg
Type: image/jpeg
Size: 138800 bytes
Desc: not available
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20151230/4d6b69f1/attachment-0005.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: splash screen with title.png
Type: image/png
Size: 122775 bytes
Desc: not available
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20151230/4d6b69f1/attachment-0005.png>