.9.png

When designing a User Interface you may want to change the default View backgrounds to give an App its own look. In most cases the backgrounds must be able to scale correctly for different size screens on a variety of devices. Android uses Nine Patch files to provide support for scaling of backgrounds as View sizes change.

In this picture the wordTexthas a background that is a rounded rectangle (a black border with a grey background). The rectangle has then been uniformly scaled to fit inLonger Text. As a result of scaling the corners and vertical edges have distorted to give the rounded rectangle an unbalanced look. Compare that to the secondLonger Textwhere the background has maintained its balance.

To correctly scale the background selected parts of the image are scaled in a particular direction or not scaled at all. Which parts are scaled and in which direction are shown in this diagram. TheXindicates that corners are not scaled, the vertical edges are scaled vertically, the horizontal edges are scaled horizontally and the central area is scaled in both directions. This is probably why it is called a Nine Patch file, a.k.a9patch.

4 Corners +

2 Vertical Edges +

2 Horizontal Edges +

1 Central Area

= 9 Areas (Patches) in Total

In the example project that follows the default black border and grey gradient background of anEditTextis replaced with a solid turquoise background with black border. The required rounded rectangle is drawn in a graphics program (such as Gimp,http://www.gimp.org, or Paint.net,http://www.getpaint.net/). The rectangle is drawn as small as possible (here almost resembling a circle) to support small Views. There is a one pixel border and transparent background. An orange version of the rectangle is drawn to support focus indication used with keypad navigation. Android needs to know which proportion of the vertical and horizontal edges need to be scaled, and where the View content sits in relation to the background. These factors are determined from indicators drawn within the image. To apply these indicators thedraw9patchprogram supplied in the Android SDK tools folder is used. Start the program and open the background image (drag and drop onto thedraw9patchdialog). The program will expand the image by one pixel all around. It is on this extra one pixel edging that indicator lines are drawn. Enlarge the image using theZoomslider. In the left hand and top edges draw the indicator lines to mark which of the vertical and horizontal pixels can be duplicated for scaling. In the right hand and bottom edges draw the indicator lines to show where content can be positioned.

The following diagram shows the right and bottom markers for content placement. If content does not fit in the indicated rectangle then the background image is stretched using the area shown by the left and top markers. Save the marked file in theres/drawablefolder for a project. Android determines if an image is scaled using Nine Patch scaling instead of uniform scaling via the file name, it must have.9before the.pngfile extension. For example a image file namedturquoise.pngwould be namedturquoise.9.png. To use the background image reference it using thebackgroundattribute of aViewin a layout file, for exampleandroid:background="@drawable/turquoise". If using another image to indicate that aViewhas focus use a selector file, for example save this XML file in thedrawablefolder asselector.xml(seeCopying Code from the Articlesfor tips):

[code lang=”xml”]

android:drawable="@drawable/turqfocus" />

[/code]

Reference it asandroid:background="@drawable/selector"(see the tutorialAdding State Graphics to an ImageButtonwith Inkscape for another selector file example). In this screen EditTexts with default backgrounds and the nine patch background create above are shown. Notice that the new View background is using a little less space than the default (useful to know if a project needs a little bit more screen area).

Nine Patch files are not restricted to simple View backgrounds. This Nine Patch file is used to frame a photograph. Notice how the left and top scaling indicators are broken where detail that must not be scaled (because it would distort) is located.

Download somecodethat covers this article ready for importing into an Android project. The code can also be accessed via theAndroid Example Projectspage. See the articleMove Android Code Between PCs Running Eclipseon how to import example code into an Eclipse project. A version of this article was produced for theAndroid Cookbook.

The pink heart frame used in this article came from the Open Clip Art Library athttp://openclipart.org/detail/91075/pink-2-frame-by-inky2010.

From ：http://tekeye.biz/2012/android-9patch-files