NinePatch graphics are an indispensable tool for Android developers looking to support the variety of device screen sizes and orientations.
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
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
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:
Draw 9-patch.bat in your Android SDK
- Drag the PNG file into the left-hand pane (or use File -> Open NinePatch…)
- Click the "Show Patches" checkbox at the bottom of the left pane.
- Set your Patch Scale appropriately (higher to see more obvious results).
- To set a horizontal patch guide, click along the right edge of your graphic.
- To set a vertical patch guide, click along the top edge of your graphic.
- 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.
- If you need to delete a patch guide, press Shift and click on the guide pixel (black).
- Save your graphic with the extension
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"?>
<Button android:id="@+id/Button01" android:layout_width="wrap_content"
android:padding="30dp" android:text="CLICK HERE! "
<Button android:id="@+id/Button02" android:layout_width="wrap_content"
android:text="NO! NO! CLICK HERE! "
<Button android:id="@+id/Button03" android:layout_width="wrap_content"
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.
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.
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:
NinePatchDrawable myNinePatchDrawable = (NinePatchDrawable) getResources().getDrawable(R.drawable.blue);
You can then use the NinePatchDrawable object much as you would any BitmapDrawable.
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 email@example.com and via their blog at http://androidbook.blogspot.com.