iPhone Developers, Meet Android – Part V : Nine Patches

The Nine Patch is a very simple concept, yet somehow so often it seems to get explained in terribly confusing ways. So, I’m going to try my hand at explaining the purpose, creation and use of a good Nine Patch. For this example I’m going to use a simple button:

There you have it, a nice, simple, clean button ready to put text on it and be pressed over and over again. But, wait! What if you don’t want your button to always be that same width or height? What if it needs to be bigger, or smaller? If you were to stretch it you would end up with this ugly mess:

That’s not what you want at all! Normally, to avoid this, you would have to make multiple different size buttons. A long one, a tall one, a short one, a thin one, and everything in between. But, that wouldn’t solve the problem of different screen sizes, not entirely anyway. So, here is the answer Google has given us:

Now, if you’re a genius, you probably got it just by looking at that one image. But, if you’re like me, you probably need a bit more explanation as to what this is you’re looking at. It’s really quite brilliantly simple. What you have is all of the important parts of your image, the parts that should never be stretched, corners, shadows, borders, and the like, retained at their appropriate size. Then, you take all of the stretchable parts, the middle pieces, shrunk down to as small as they can be, as few pixels as are necessary.

Then, you take your entire image and give it an extra transparent padding of one pixel on every edge. Using a single-pixel-wide, black line at the top and leftmost edge, you mark which parts should be allowed to stretch.

The green areas indicated here are what parts of the image will be stretched in order to fit the image within the allotted space.

Then, on the bottom and rightmost edge, you mark which parts the content is allowed to fill. If these sides are left empty the content area will be made to match the stretchable area.

You can set this image as the background on any TextView, Image, or any other UI element and the element will be forced to stay within the highlighted area and the surrounding area will stretch to fit around it just as you’ve always wanted it to. And there you have it! Perfectly stretchable buttons that can be almost any size without distorting the details!

Of course, this isn’t just restricted to buttons, you can do this with any image you like. Just remember, Nine Patches can’t shrink, at least not well, they only stretch. So, if your button or image needs to be shorter or thinner than the original Nine Patch, You will have to edit your Nine Patch to make it accommodate the smaller size.

In conclusion, remember, be careful. This is Android development; it’s not the safe, clean, shiny box that you’re so used to. Apple’s review process, as irritating as it can be to some, is great. It keeps out so much of the garbage that clutters up the Android Marketplace, and enforces some sense of continuity to the device itself. But, don’t think that just because Google doesn’t set those boundaries for you that they aren’t necessary, and don’t make the further mistake of assuming that the boundaries are the exact same boundaries as on the iPhone. Explore the environment, delve into the intricacies and fallacies of it. Learn what works and what doesn’t, because unlike Apple, Google won’t tell you. Google gives you the freedom to do whatever you want, which is nice. But sometimes, what we’re likely to do with said freedom, is give ourselves a time bomb of an application. So just remember, this isn’t Apple. You’re sailing in Google’s ocean now. Out here, there be monsters.