You Do What Android Want = Android Do What You Want ~ Part 1: The Mystical 9-Patch

The Mystical 9 patch

You Do What Android Want = Android Do What You Want
Part 1: The Mystical 9-Patch

I recently encountered some blank stares from some colleagues regarding certain aspects of the 9-patch.

Granted, there doesn’t seem to be all that much documentation out there explaining the ins and outs of nine patch, possibly adding to the mystique, but then again, maybe there isn’t all that much to explain.

Here I’ll outline the basics of the 9-patch, and you can comment as to whether it indeed makes simple sense… or instead, communicate your own blank stare with some scathing criticism below in the comments section.

For Starters
For starters, in the most general terms, 9-patch is a type of bitmap image, specifically a transparent .png file used by the android mobile os that is scalable and can stretch and adjust to different sizes. Using 9-patch allows  you to stretch an image in a manner where the 4 corners can remain unscaled, while the edges of remain intact – a method especially useful for scaling images with rounded corners.

9-patch images are ideal in support of the many variations in screen sizes among Android devices.  Instead of providing many different images to accommodate each of the different screen sizes you can use a 9-patch image instead.

These images are typically associated with button images, however 9-patch can be used for any image, e.g., backgrounds, headers, etc.

 9-patch files are not your ordinary transparent .png files.
A valid nine patch includes two essential components that differentiate it from other transparent .png files used by android. The first is that “.9” is included in the file name before .png – this identifies the file as a 9 patch to android.  It basically says to Android OS,

“I’m special, I am a 9-patch.  When you look at my contents I will have some very special information just for you… and it will be exactly where you expect to find it.”

This special information comes in the form of the second essential component which are black pixels in the 1 pixel perimeter edge of the image.  Okay, here’s where it gets juicy.

Top, left, right and bottom make up the perimeter of our .png. We are going to take these four units of the perimeter and separate them into 2 separate guide groups:  1) Top & Left and 2) Bottom & Right

Top & Left defines what we call the Scalable Area, while Bottom & Right defines what we can call the Content, or Fill, area.

Scalable Area –  The top and left guides determine which parts of the image are to be stretched, the top designating the horizontal area of the image that is to be stretched and the left designating the vertical area. Parts of the image that are not within the designated range established by these lines will not be stretched.  Usually, and especially in the case of images with rounded corners, it is the corner areas that are not stretched.

Content Area – The bottom and right guides determine the area of the image within which any text, label, icon, (other) image or element placed within your 9-patch will be constrained to.  By default, the entire image area is regarded as Content Area and the Content Area guides are considered optional. We recently encountered some unusual issues where 9-patches without Content Area guides were not drawing properly – so lately I am of the mindset encouraging their inclusion. Keep in mind you can easily override the content guides manually in your code if what you set up in the 9-patch needs some adjustment – just as easily as you would set them manually if you excluded Content area guides from your 9-patch.

What About Those Black Lines?
Ok, so what about those black lines in your image?  Well, if you do everything just the way Android likes it,  Android will return the favor. The black lines won’t be visible in your app, but the information provided by the black lines will allow Android to display your image just the way you want it.

Do What Android Want = Android Do What You Want

Remember, there are some very explicit rules about these black lines.

1. The black lines must be black. Black, black. Yes this is redundant – on purpose. It is essential that the black lines be solid black as in #000000 black, or RGB 0/0/0.  If they are not, the nine patch will not work properly and perhaps not at all.
2. The black lines can only be 1 pixel wide. Anything wider than 1 pixel will be displayed as part of your image in your app.
3. In the 1 pixel perimeter of the image where you do not have black (remember it’s black, black) lines there must be total transparency. This means that your black lines remain 1 pixel wide – NO anti-aliasing. No alphas or opacity either.  If just one fuzzy or non-100% black pixel finds its way into the perimeter Android will not be happy with what your 9-patch has to say.

9 patch images scale up… but they do not scale down. If you have a minimum size in mind for your image, start wth that.  9 patch is all about stretching and expanding – NOT shrinking and compressing.  

As it turns out there isn’t much mystery to the 9patch at all, and the real  mystery is merely how can it be so simple.