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