Thursday, May 26, 2011

Android 9 Patch Image Tutorial

This tutorial describes what Android 9 patch images are, how to make them, and how to use 9 Patch images in Android applications.

What is a 9 Patch Image?

A 9 patch image is an image that has stretchable areas defined.

These areas are defined in a special 1 pixel wide border around the area. Add black pixels to the top and left of this border to describe where the image can be stretched horizontally and vertically.

Why Use 9 Patch Images?

Nine patch images are especially useful when designing buttons. Custom drawn buttons can look distorted and pixelated when their borders are stretched in addition to the rest of the image.

Take a look at the Custom Drawn Button tutorial to see how using 9 Patch images can be used to create a button, and what happens if they aren't used.

Creating 9 Patch Images

Making a 9 Patch image is a fairly easy process. Included as part of the Android SDK is a Draw 9 Patch utility. Navigate to the folder where you installed the SDK. From there navigate to the tools folder. Inside this folder will be the draw 9 patch program. On Windows, double click on draw9patch.bat

The draw9patch.bat file


Once the Draw 9 Patch program has started, simply drag an image that you would like to edit onto the program.

What the Draw 9 Patch program looks like when it starts

After an image has been loaded into the Draw 9-Patch program two panes of information will appear. The left pane is used to edit the patches. The right pane shows what the image will look like when it is stretched in a couple of different ways.

The Android 9 Patch image editor before defining the patches

Drawing the Patches

You can think of the Draw 9 Patch program as a simple image editor, but you can only change the 1 pixel border and you can only use the color black.

Draw along the top of the image to define the area that can be stretched horizontally. Draw along the left side of the image to define the area that can be stretched vertically. Draw along the bottom and the right of the image to define the padding. Holding down shift and clicking will erase pixels.

After patches have been added.

If you have the "Show Patches" option selected, then the stretchable area will be highlighted in pink.

.9.png File Extension

Your nine patch images must be saved with the .9.png file extension in order for Android to recognize and handle them properly. Failure to do so may result in unpredictable results.

When you save from the Draw 9-Patch program it will have the proper extension.

Even More Information

For more information regarding 9 Patch images, you can check out the following links to the official Android documentation.

Draw 9-patch tool
NinePatchDrawable information
------------------------------------------------------------

We create these tutorials in our free time. If you like what you see please consider buying us a cup of coffee so we can keep creating useful material. Click on the image below to make a donation via Paypal.

6 comments:

  1. Great Tut!

    Get your free 9 Patch PNGs here:

    http://android9patch.blogspot.com/

    ReplyDelete
  2. Tool draw 9 Patch png online: http://draw9patch.com

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete