Button and Image Borders in Android with Nine Patch Files

Posted 2020-07-12

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 word Text has a background that is a rounded rectangle (a black border with a grey background). The rectangle has then been uniformly scaled to fit in Longer 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 second Longer Text where 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. The Xindicates 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.a 9patch .

• 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 an EditText is 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 the draw9patch program supplied in the Android SDK tools folder is used. Start the program and open the background image (drag and drop onto the draw9patch dialog). 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 the Zoom slider. 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 the res/drawable folder 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 .9 before the .png file extension. For example a image file named turquoise.png would be named turquoise.9.png. To use the background image reference it using the background attribute of aView in a layout file, for exampleandroid:background="@drawable/turquoise". If using another image to indicate that a View has focus use a selector file, for example save this XML file in the drawablefolder as selector.xml (see Copying Code from the Articles for tips):

Reference it as android:background="@drawable/selector" (see the tutorial Adding State Graphics to an ImageButton with 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 some code that covers this article ready for importing into an Android project. The code can also be accessed via the Android Example Projectspage. See the article Move Android Code Between PCs Running Eclipse on how to import example code into an Eclipse project. A version of this article was produced for the Android 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