A Look at 9-Patches

Introduction

The last blog post, we discussed improving the User Interface. Today, we will be looking at a interesting method implemented by Android to aid in the construction of the User Interface. We will be talking about 9-Patch. A 9-Patch is basically a graphic that can be stretched while leaving the corners intact. This makes it very easy to construct round rectangles or other shapes that will grow with your content.

Getting Started

On the Android site, they provide a tool for drawing these 9-Patches that Android can implement. I would suggest going there first so you know where the tool is located and how to run it.

Using the Tool

Once you have the tool open, it can be a bit confusing on what exactly you need to do with this tool in order to create a 9-Patch, that is where we come in. Lets start with the idea that we want to make a round rectangle that will stretch over our text. One way to create this is the 9-Patch method. To start we want something with four round corners, for example a circle. Here is a small png graphic of a circle. Let us open this graphic with the 9-Patch tool. 



As you can see this tool takes the image that we provided and adds a one pixel border around the image. This border is how we are going to tell Android which parts of the image are safe to stretch. In this case, we want to stretch just the very middle part so we can create a rounded rectangle.

We placed two black pixels on each side of the graphic, these black pixels are representing what is being stretched. On the right pane, we can see what the final product will look like. Try moving the black pixels around to get a feel for what is actually going on. To use this image in Android, just save it and put it in your drawable folder. Android will do all the work when it comes to handling the stretching of the image.

Hopefully, this tidbit of information helped you learn something new about Android. By MatthewT Williams