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/draw9patchSUCCESS!

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).