October 22, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Working with NinePatch Stretchable Graphics in Android

  • June 22, 2010
  • By Lauren Darcey, Shane Conder
  • Send Email »
  • More Articles »

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

 


Visit the Android Dev Center

 

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

Tags: Android, graphics, Mobile tools

Originally published on http://www.developer.com.

Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel