What are Nine patch images?

Nine patch images, also referred as 9 patch images or nine slice, are stretchable, resizable and repeatable images. They are mainly use in Graphical User Interface (GUI), but can be used in other areas too. Let's look at the difference between a regular 32x32 image and a 32x32 nine patch image.

A stretched 32x32 nine patch image

A stretched 32x32 regular image

Resizing a nine patch image

Have you noticed that the border's width does not change even though the main area of the image resizes itself? Nine patch image allows certain areas remain static while the rest of the image stretches.

How to create a nine patch image?

The common way of doing this is by setting up boundaries in the image by adding 2 pixels of width and height to the canvas. Nine patch images also tend to have the .9.png extension.

Adding 2 pixels to the image and setting boundaries

By changing the canvas from 32x32 to 34x34, I can now add extra black pixels that will serve as boundaries. In my implementation, the left and the top black pixel areas represent the stretchable parts of the image and the bottom and right determine where the content (like text) will be placed (I don't want the text to be too close to the border).

Creating a Nine patch online

This website allows you to create nine patch images online from existing images. I find it easier to set my own boundaries instead of generating them, but the website also lets you view the stretched nine patch which is quite practical.