How to use 9-Patch images in Android

Android is remarkable good in supporting various screen sizes, it allows various drawable directories for particular screens and layout configurations using density-independent pixel (dp) instructions. Android also allows using 9 patch images as backgrounds for buttons and application content. In a 9 patch image 4 corners remain unscaled, but the four edges are scaled in one axis and the middle is scaled in both axis. Using 9 patch images for backgrounds can help address both screen size issues as well as orientation concerns.

9 patch images have stretchable areas defined in a special 1 pixel wide border around the area. These 1 pixel lines drawn around the edges of the image define the scaling and the fill. All you have to do is follow a specific image file naming pattern, that is you have to name your file name.9.png. Android would identify the 9.png format and use the black guides to scale and fill the image.

The black guide lines are cut-off from your image.  Guides must only be one pixel wide, so if you want a 48×48 button, your png will actually be 50×50. Anything thicker than one pixel will remain part of your image. Your guides must be solid black and the remaining area should be transparent.

Now let us use the 9 patch utility program in android SDK to draw a 9 patch image.

1. Go to your android SDK folder and find a folder named “tools” <your/path/to/android-sdk>/tools/ .

2. Inside the tools folder locate the “draw9patch.bat” file. Double click it to launch the utility.
   
   
   

3. Once the program is open, drag your desired image to the program.
   
   

4. When  the image is loaded, two different panels would appear, the left one is is used for editing while the right panel would show how the image would look like once the changes are applied.
   
   

5. Now Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and content area. Right-click to erase previously drawn lines.
   
   

6. When done, select File > Save 9-patch… Your image will be saved with the .9.png file name.