Android Graphics Tutorial: 9-Patch Graphics


What is 9-Patch Graphics?

The Unique Selling Point (USP) of Android is that it can run on smartphones and tablets with varying screen sizes and resolutions. While that’s a definitive advantage from a user perspective, it requires developers to undertake some key considerations while writing applications.

For a state, they need to ensure that whatever graphics they use will stretch without distortion. Images which have well-defined stretchable areas are known as 9-Patch Images or 9-Patch Graphics

Why to Use 9 Patch Graphics?

The advantage of 9 Patch graphics is that they scale as defined by the developer, when content added within the image exceeds the normal bounds of the graphic. Therefore, from a user experience perspective, it’s a good practice to use 9 patch graphics, especially for custom buttons which can get distorted when their borders get stretched.

How to Create 9 Patch Graphics?

The Android SDK offers a built it Draw 9-patch tool. Double click on the draw9patch.bat batch file to invoke the tool as shown below.

Draw 9-patch tool

Once you start the tool, drag the image that you’d like converted in the space shown below.

Drag the image here

Once the image loads, you can use the left pane to edit the patches and the right pane to preview the image in various stretching scenarios as shown below.

editing pane

Once you are done, save your image with a .9.png extension so that it’s recognized as a valid 9-patch image.