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:

http://www.google.com/images?q=button+aqua

Step 2)
Download Android SDK
http://developer.android.com/sdk/index.html

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

/Applications/Android/adt-bundle-mac-x86_64-20130522/sdk//tools/draw9patch

SUCCESS!

Step 5)
Open 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:

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/textView1"

        android:layout_below="@+id/textView1"

        android:layout_marginLeft="20dp"

        android:layout_marginTop="44dp"

        android:background="@drawable/back_button_normal"

        android:gravity="left|top"

        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:

+GDG Chicago Android (g+ page) 

Shameless plug:

Visit my company website CyberWalkAbout.com for example of great work we have done and inquire about very competitive (low) rates of design and development we offer at info@CyberWalkAbout.com