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

Android Market Enigma

I have deployed "SF Bay Area Local Guide" over 24 hours ago and I got few downloads, yet the app is not showing on either Web Android Market, nor mobile version for any device I own.

Any suggestions?

Saturday, October 22, 2011

Android ADT 14 Declares War on My Code!

The error comes up only when compiling the project, it started happening when I updated tools in Eclipse to ADT 14, but others had it in prior versions.

Unable to execute dex: Multiple dex files define

Conversion to Dalvik format failed with error 1
java.lang.IllegalArgumentException: already added: Lcom/cyberwalkabout/common/DistanceUtils;

We have been using multiple project libraries for months, but now including them causes a problem as some of them are referenced more than once. 

SOLUTION is listed here:

Other problems encountered:

Updates (Android ADT 14) in Eclipse Indigo that introduced these problems:

switch() to if-then

Among many, many things that went wrong today this one was was annoying because of many places I had to change, but at least quick to fix.

Android ADT 14 decided that it does not like to use as a parameter to switch statement and it had to me changed to if-then.

So all of the switch statements had to be converted to if-then. Thankfully there is a shortcut for that (command-1).