Sunday, October 23, 2011

Android: creating 9-patch image

This tutorial shows how to create a stretchable 9patch image on Mac OS. 

Step 1) 
Prepare some cool image to practice on.
Find on Internet (bad designer), or draw a button background image you really like:

Step 2)
Download Android SDK

Step 3)
Install the Android SDK in your preferred location,  for me it is in:

example: $ /Applications/Android/adt-bundle-mac-x86_64-20130522/sdk/

Step 4) 
Add Android SDK tools to your system PATH

4.1 Open Terminal by: 
Open Launchpad and type in search "ter" and select Terminal

4.1 Edit your .profile
In Terminal type $ edit ~/.profile 
This should open default editor in my case TextWrangler with .profile 

4.2 Add following lines on the bottom adjusted for your installation directory

export ANDROID_HOME=/Applications/Android/adt-bundle-mac-x86_64-20130522/sdk/
export PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools

4.3 Save file 
4.4. To refresh system, open NEW Terminal window by pressing on Terminal and click "command n"
see if you can see correct tool
$ which draw9patch



Step 5)
draw9patch tool by typing
$ draw9patch

Step 3) drag the image to the draw9patch tool and try to draw pixels on the edges of the image
  • left and top edges are for stretching areas
  • right and bottom are for (text) content area

actual 9patch file when saved, notice the file has name.9.png name and keep the 9 part:

final result

example with VERTICALLY non-stretchable image:

        android:text="Good, this is what we wanted! :)"
        android:textColor="#CCCCCC" />

When you are working with images that have non-stretchable elements in them, you might define 2 stretching points. Also, it is a good practice to define a STYLE GUIDE if you need to create a set of 9patch images as in the case below:

  • left 16 (upper stretch)
  • left 26 (lower stretch)
  • right 9 (upper edge of text)
  • right 33 (lower edge of text)
  • bottom 8 (left margin)
  • bottom 16 (right margin, before arrow)
  • top 15 (any pixel inside text area)

Example with 2 stretchable areas

Enlarge and study the image.

You can see in the image above that I count 16 pixels on the left so the stretch is always in the same point of the bevel. I try to avoid stretching such images with bevel and create them "to size" vertically.

I leave 8 pixels as the margin on the left, and 4 pixels from the drop-down arrow which cannot stretch.
I leave 9 pixels from the top and bottom because in other images of this set I have rounded corners.

You can visualize the final image after stretching on the right-hand side (image in the middle).

Make sure to +1 our Google Developers Group page:

Shameless plug:
Visit my company website for example of great work we have done and inquire about very competitive (low) rates of design and development we offer at