A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. An example use of a NinePatch is the backgrounds used by standard Android buttons — buttons must stretch to accommodate strings of various lengths. A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide border. It must be saved with the extension
.9.png, and saved into the res/drawable/ directory of your project.The NinePatch 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.
How to create a nine patch image?
From the tools folder open draw9patch.bat application. Then you will get a window like this.
Open a .png image from file->Open9patch.
When you open the image in draw9patch.bat, you could find two panes - one on the right and the other on left. The left pane is the area, where you will create your 9 patch image and the right pane will show you how the image looks like when it is stretched horizontally or vertically or both.
Interestingly, when you place your mouse pointer over the image (in left pane), you could find the entire image will be filled with stripes, indicating you are not allowed to edit the image. But when you closely examine you could find a 1px border around your image which allows you to draw something. This is the only area that you will deal with when you play with a nine path image.
Before creating the 9 patch image, click on the show patch check box and you could see a pink patch over your image. This pink area will be stretchable in both x-y direction i.e. this area will stretch like a normal image.
Now you could see your entire image will stretch in both x-y direction, creating distortion at many places. In order to avoid this you need to define certain areas non stretchable or stretchable only in one direction. For this purpose only we are left with 1px border. :)
Left and right button of your mouse will help you to draw and erase the line on the 1px border respectively. Left mouse click and dragging will draw a black line over the border, whereas right mouse click and dragging will erase the same.
This border is used to define the stretchable and static areas of the image. You indicate a stretchable section by drawing one (or more) 1-pixel-wide black line(s) in the left and top section of the border (the other border pixels should be fully transparent or white) as shown in the figure. You can have as many stretchable sections as you want: their relative size stays the same, so the largest sections always remain the largest.
Now for this image, The four corners are unscaled (part-1, 3, 7 and 9); the four edges are scaled in one axis(part-2, 4, 6 and 8), and the middle is scaled in both axes(part-5). So that the rounded corners will not be blurred even if we use this image for bigger buttons. J
The NinePatch defines one stretchable area with the left and top lines and the drawable area with the bottom and right lines. To explain the drawable area part first you need to check the show content check box in the draw9patch tool.
When you check the show content check box, from the right pane of the above image, you could see that the content area is exceeding the image boundary (blue area on the right pane), which is not supposed to be. Bottom and right sections of the 1px boundary help us to restrict the content area inside the button image. You can draw line in these sections to restrict the drawable \ content area as shown below.
Now when you look on to the right pane, you can see that the content area is within the button image, which is supposed to be. Thats it! you are done with your nine patch image. Now this image is saved with the extension
.9.png, into the res/drawable/ directory of your project.
Cheers,
Have a nice day. View Complete List of Tips
Useful :)
Thanks this helps. :)