Nine-Patch Stretchable Image
Android supports a stretchable bitmap image. This is a PNG image in which you define stretchable sections that Android will resize to fit the object at display time to accommodate variable sized sections, such as text strings. You typically assign this resource to the View's background. An example use of a stretchable image is the button backgrounds that Android uses; buttons must stretch to accommodate strings of various lengths.
A NinePatch drawing is a standard PNG image that includes a 1 pixel wide border. This border is used to define the stretchable and static areas of the screen. You indicate a stretchable section by drawing one or more 1 pixel wide black lines in the left or top part of this border. You can have as many stretchable sections as you want. The relative size of the stretchable sections stays the same, so the largest sections always remain the largest.
You can also define an optional drawable section of the image (effectively, the padding lines) by drawing a line on the right and bottom lines. If you do not draw these lines, the first top and left lines will be used.
If a View object sets this graphic as a background and then specifies the View object's text, it will stretch itself so that all the text fits inside the area designated by the right and bottom lines (if included, the first top and left lines otherwise). If the padding lines are not included, Android uses the left and top lines to define the writeable area.
Here is a sample NinePatch file used to define a button.
This ninepatch uses one single stretchable area, and it also defines a drawable area.
Here are two buttons based on this graphic. Notice how the width and height of the button varies with the text, and the background image stretches to accommodate it.
Source file format:
PNG — one resource per file
Resource source file location
.9.png (must end in .9.png)
Compiled resource datatype:
Resource pointer to a NinePatchDrawable
Resource reference name:
Example Code Use
Example XML code
Note that the width and height are set to "wrap_content" to make the button fit neatly around the text.