Canarys | IT Services


What is a 9 patch image and how is it useful?


A 9 patch image is a regular png (.PNG) image which is needful for android app developers where they require to wrap any content within a background image without pixelating the background image. Usually background images have a fixed height and width, but sometimes we may require background images which does not pixelate though stretched, this now becomes a challenge with regular PNG images.
For example: The most popular chat app which most us use on our mobile phone is “Watsapp”. If you can observe the chat conversations on your chat screens the height of those images will depend on the content or the text which you have received. The text will nicely be wrapped within a 9 patch image.

In the above image you can clearly observe that the background image height and width varies. Then how do you handle such a situation? Do you need to create thousands of images with different heights and widths? The answer is “NO”.  This situation gave way to a new kind of image which is now called a (9 PATCH) image. It is an extension of a simple png image which can be modified using a tool and append it with a different extension.
To create such images you need to follow a few simple steps below:

Create the desired image shape from any of your graphic software tools like Photoshop and save it as a PNG image.

From your android SDK or terminal open the DRAW 9 PATCH application.

Open the png image which you created

You can customize your image now indicating the areas of the image which you need to expand the areas which you do not stretch when the content increases. (I’ll explain the step by step process of creating such images in my next blog)

Now you can save or export your image.

Your image will be saved with the .9.pngfile name.

Now your PNG image is converted into a 9 patch image that can be used by the developers as usable wrappers around the content of their applications regardless of the functions nor worrying about the length’s breadth’s depth of the image and quality. The image acts just like a vector image with a content place holder within it. 
Your 9 patch image looks like this:
A recently generated 9 path image in one of project which was an android chat application-


Leave a Reply

Your email address will not be published. Required fields are marked *

Reach Us

With Canarys,
Let’s Plan. Grow. Strive. Succeed.