Working with NinePatch Stretchable Graphics in Android

Android devices come in many shapes and sizes, often making it very difficult for developers to design applications that look great on all the various screen sizes and orientations. For addressing this challenge, NinePatch graphics can be indispensable. In this article, we discuss what the NinePatch graphics format is, how it works, and when to use it.

What Is NinePatch?

Android supports NinePatch Stretchable Graphics for the controlled scaling of images. NinePatch graphics are simply PNG graphics that have patches, or regions of the image, defined to scale and stretch in the appropriate areas instead of scaling the entire image as one unit, which often obscures the details of the graphic. Generally, the center patch is transparent or solid, with parts of the edges set to remain fixed, other edge parts set to stretch, and the corners set to remain fixed.

Figure 1 illustrates how an image (in this case, a square) is divided into nine patches.

Click here for larger image
Figure 1. A Square Divided into Nine Patches

When to Use NinePatch Graphics

Stretchable graphics can be used anywhere in your application where the size of the graphic may vary. They are especially useful for:

• Button backgrounds (where the text strings are various sizes)
• Frames (where the inner picture comes in various sizes and aspect ratios)
• Any time you're using a Drawable with at least one dimension set to wrap_content

Using the draw9patch Application

NinePatch stretchable graphics can be created from PNG files using the draw9patch application included with the /tools directory of the Android SDK. The interface for the Draw 9-patch tool allows you to load a PNG file, define the stretchable regions, and save the resulting graphic as a .9.png file.

The Draw 9-patch user interface is pretty easy when you get used to it. In the left pane, you use the NinePatch guides (the lines) to define where the graphic will scale when stretched. In the right pane, you can preview how your graphic will behave when scaled with the patches you defined.

Figure 2 shows the user interface of the draw9patch application.

Click here for larger image
Figure 2. The draw9patch application UI

Creating NinePatch Graphics

Let's give it a try. I've created a really basic PNG file called bluenotstretchy.png. To create a NinePatch graphic from this PNG file using the Draw 9-patch tool, perform the following steps:

1. Launch Draw 9-patch.bat in your Android SDK /tools directory.
2. Drag the PNG file into the left-hand pane (or use File -> Open NinePatch…)
3. Click the "Show Patches" checkbox at the bottom of the left pane.
4. Set your Patch Scale appropriately (higher to see more obvious results).
5. To set a horizontal patch guide, click along the right edge of your graphic.
6. To set a vertical patch guide, click along the top edge of your graphic.
7. View the results in the right pane, and move patch guides until the graphic stretches the way you intend it. For this example, see the guides in Figure 2 for a good idea of how to place your guides.
8. If you need to delete a patch guide, press Shift and click on the guide pixel (black).
9. Save your graphic with the extension .9.png (e.g., blue.9.png).

Using NinePatch Graphics

When you've created a NinePatch graphic, you can use it like any other Drawable resource. For example, the following layout uses the same NinePatch graphic resource (@drawable/blue) four times: three times as a Button background drawable, and once as the background on the parent LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="@+id/ScrollView01"
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:isScrollContainer="true" android:layout_height="fill_parent"
   android:layout_width="fill_parent" android:scrollbars="horizontal">
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical" android:layout_width="fill_parent"
      android:layout_height="fill_parent" android:background="@drawable/blue"
      android:padding="50dp">
      <Button android:id="@+id/Button01" android:layout_width="wrap_content"
         android:layout_height="wrap_content" 
         android:background="@drawable/blue"
         android:textColor="#ffcc00" 
         android:padding="30dp" android:text="CLICK HERE! "
         android:layout_gravity="center"></Button>
      <Button android:id="@+id/Button02" android:layout_width="wrap_content"
         android:layout_height="wrap_content" 
         android:background="@drawable/blue"
         android:textColor="#ffcc00" android:padding="30dp"
         android:text="NO! NO! CLICK HERE! "
         android:layout_gravity="center"></Button>
      <Button android:id="@+id/Button03" android:layout_width="wrap_content"
         android:layout_height="wrap_content" 
         android:background="@drawable/blue"
         android:textColor="#ffcc00" android:padding="30dp"
         android:layout_gravity="center"
         android:text="@string/button3text"></Button>
      </LinearLayout>
</ScrollView>

You can then create different AVDs (Android Virtual Devices) to emulate different screen sizes and run your application.

Figure 3 shows what this layout would look like with several different screens and orientations.

Click here for larger image	Click here for larger image	Click here for larger image

Figure 3. Application Layout with Different Screens and Orientations

Figure 4 shows the same application, except using the original non-stretchy version of the blue graphic.

Click here for larger image	Click here for larger image	Click here for larger image

Figure 4. Application Layout with Non-stretchy Blue Graphic

Note: On the landscape mode screens, you can scroll down to see that the stretchable graphic is complete.

Loading NinePatch Graphic Resources Programmatically

NinePatch resources are simply another kind of Drawable subclass called NinePatchDrawable. Most of the time, you'll need only the resource ID of the image, to set as an attribute of View or layout. Occasionally you might need to act on the resource programmatically.

To create a NinePatchDrawable object from a NinePatch drawable resource, use the resource's getDrawable() method. If the drawable is a NinePatch, the getDrawable() method will return a NinePatchDrawable instead of a generic BitmapDrawable object.

For example, to load a NinePatch drawable resource called blue.9.png, you could use the following code:

import android.graphics.drawable.NinePatchDrawable;
…
NinePatchDrawable myNinePatchDrawable = (NinePatchDrawable) getResources().getDrawable(R.drawable.blue);

You can then use the NinePatchDrawable object much as you would any BitmapDrawable.

Conclusion

NinePatch graphics are one of the most important tricks of the trade for the Android graphic designer. Using stretchable graphics can reduce Android package size by reducing the number of drawable resources required by an application. NinePatch graphics are an easy way to enable smart stretchable graphics in your applications.

About the Authors

Lauren Darcey and Shane Conder have coauthored two books on Android development: an in-depth programming book entitled "Android Wireless Application Development" (ISBN-13: 978-0-321-62709-4) and "Sams Teach Yourself Android Application Development in 24 Hours" (ISBN-13: 978-0-321-67335-0). When not writing, they spend their time developing mobile software at their company and providing consulting services. They can be reached at androidwirelessdev+dc@gmail.com and via their blog at http://androidbook.blogspot.com.