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
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:


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