NinePatch Drawables in Android

NinePatch drawables in Android offer a way to create resizable bitmaps that only stretch the sections of the image that you specify. This is useful for creating backgrounds for TextViews, Buttons and any view whose size may vary depending on the content, as well as when creating splash screens that have a logo whose aspect ratio you don't want to be distorted.

NinePatch drawables consist of the original image surrounded by a one pixel border of empty pixels by default. The top and left side one pixel border is used to specify (with black pixels) what vertical and horizontal slices of the image can be stretched to make the image to fit its container (instead of simply stretching the image and changing its aspect ratio). This way areas of the image with content you do not want to be stretched can remain at their original aspect ratio. The bottom and right side one pixel border is filled in with black pixels to specify the area of the image that any content that sits on top of the image should reside in (essentially, the padding for the view that this image will serve as the background for).

The following is an example of a NinePatch image:


 The black sections of the top and left one pixel border are circled in red. The logo in the center will maintain its aspect ratio while the vertical slats designated by the top one pixel border will be stretched horizontally and the horizontal slats designated by the left one pixel border will be stretched vertically. When two or more stretchable slats are specified for a dimension as above they will maintain their size relative to each other when stretched (so the logo will stay centered).

It is important to note that if you don’t want to specify the content area (the padding) and would like content to fill the entire image, you should fill the right and bottom side 1 pixel border with black pixels as in the example above. If the content area is not specified (the bottom and right sides consist of only empty pixels), the content area will default to the area designated by the top and left side one pixel border.

Android Studio has a tool to generate and edit NinePatch drawables. To access it, right-click on your image file in the Android Studio file browser and find the “Create 9-patch file...” option. You’ll want to give the new 9-patch file a unique name so it doesn’t conflict with the existing image resource (or just delete the original). Now find the newly created NinePatch image (it will have “.9” prepended to the file extension, i.e. your_image.png becomes your_image.9.png) and open it. A full tutorial for the Android Studio NinePatch editor can be found here.