Android 9-Patch Images–How they Work and How to Create Them

Everyone seems to be interested in how Android deals with multiple screen sizes and pixel densities, after all, Android comes in thousands of different configurations. One of the ways Android deals with this is through dynamic images called 9-Patch images.

A 9-Patch is a special kind of PNG image, the Android operating system reads the borders of these images to understand how to stretch the image itself and the content within the image such as text (imagine setting a background image with text over top, this is a very common use). Users draw a left and top 1 pixel border where they want the system to stretch the image vertically and horizontally, users draw a right and bottom 1 pixel border to tell the system how to place the content within the image. While this may seem complicated, it’s not. Follow the steps below to get started and you’ll quickly see how easy this is!

Step 1. Search Windows for “draw9patch.bat”, or if you know where your SDK is installed, navigate to the sdk\tools\ folder and you will find draw9patch.bat there. Double-clicking will open the editor as shown below:

Step 2. Drag and drop the basis for your 9-Patch image into the editor you just opened. Looking at the example below, you can see I dropped in a white square with rounded corners and a small shadow. This square is going to form the background for each item in a list, the item text is going to go inside the square.

Below I’ve gone ahead and drawn the left and top 1 pixel borders, this tells Android to stretch my image as much as it needs to to fit it in the layout or fit the content within it. Looking to the right of the exhibit below, note how the editor shows you examples of how your image will stretch. In this case, I want all parts of the image, except for the rounded corners to stretch dynamically.

Step 3. After your image is setup to stretch the way you want it, you can draw the right and bottom border to show Android how you want content to fit inside the image.

In the example below I’ve drawn the borders for the content the same as the image stretch borders, this is because I want to utilize the image as a background, so the content should fill the image where it stretches. As you can see to the right of the exhibit, I’ve turned shading on to demonstrate where the content would fit (light purple shading), the content will always stretch nicely within the background leaving an appropriate margin.

Step 4. Check your image before saving it by clicking on the “Show patches” checkbox below your image. The green areas represent areas of the image Android can stretch to fit the screen’s configuration and layout, the pink area is the dynamically sized area where the content will be fit into. Not how the corners are the only area of my image which are not stretching or dynamic in anyway, this is because I want to maintain the radius of the corners – I don’t want them distorted by screen size or layout settings.

Step 5. Save the resulting 9-Patch image into your project’s /drawable-xhdpi/ folder. In most cases, you can use the xhdpi folder as your master folder because it’s of the highest density and Android can easily scale these images down to lower densities (hdpi, mdpi, etc).

9-Patch images resize themselves dynamically based on the layout, screen size and density. If used correctly, 9-Patch images can cut down on a ton of layout problems and speed up your development considerably. Instead of creating complicated layouts, consider using an arrangement of 9-Patch images in a creative manner you’ll thank yourself later.

Cheers, I hope you find this helpful!