Nine-patch images

In developing the UI for your application, we are often faced with the need to stretch the image in relation to the different sizes of Android-devices. Many images can be with rounded edges or with a complex pattern that with increasing give different artifacts in the form of noise or blur. This can be avoided by using the Nine-patch images.

Theory

These images represent the class NinePatch. This class permits drawing a bitmap in nine sections. The four corners are unscaled; the four edges are scaled in one axis, and the middle is scaled in both axes. Normally, the middle is transparent so that the patch can provide a selection about a rectangle. In essence, it allows you to create custom graphics that will scale as you set.

In terms of images, Nine-path - this is a common image (*.png), in which the edge of a 1 pixel contain overhead information for the graphics subsystem Android.

It is divided into two parts:

• information for the correct scaling of the block;
• information about the area's content in the block.

In the absence of the first - the image will be scaled as a whole, the second - the content will be placed on the entire image area.

The top and left of the frame set of scalable, right and bottom - the display area of content. In this case, the transparent pixels represent an unmarked area, and black - marked.

Design

Creating such images by the example of such a picture:

To make this simple picture of nine-patch, you can use any image editor that supports *. png or special utility draw9patch, which is located in the folder at the installation tools Android SDK.

In our example, we use Android utility for working with images. You can open an image using the menu item File> Open 9-patch. Now draw a repeating region and the region's content.

The right side shows the result of the utility scale of the image.

Now you need to save the image extension c * .9.png and add to the project (in the folder /drawable).

Examples

Links

• Examples of images in one archive: zip