A Simple Guide to 9-patch for Android UI

extends:http://radleymarx.com/blog/simple-guide-to-9-patch/

While I is working on my first Android app, I found 9-patch (aka 9.png) to be confusing and poorly documented. After a little while, I-finally picked up in how it works and decided to the throw together something to help others figure it Out.

Basically, 9-patch uses PNG transparency to do a advanced form of 9-sliceor scale9. The guides is straight, 1-pixel black lines drawn on the edge of your image that define the scaling and fill of your imag E. By naming your image file name.9.png, Android would recognize the 9.png format and use the Black Guide s to scale and fill your bitmaps.

Here's a basic guide map:

As can see that you have guides on each side of your image. The TOP and left guides is for scaling your image (i.e. 9-slice) with the right and BOTTOM guides define the fill area.

The Black Guide lines is cut-off/removed from your Image–they won ' t show in the app. Guides must only is one pixel wide, so if you want a 48x48 button, your PNG would actually be 50x50. Anything thicker than one pixel would remain part of your image. (My examples has 4-pixel wide guides for better visibility. They should really is only 1-pixel).

Your guides must be solid black (#000000). Even a slight difference in color (#000001) or Alpha would cause it to fail and stretch normally. This failure won ' t is obvious either*, it fails silently! Yes. Really. Now you know.

Also should keep in mind, remaining area of the One-pixel outline must is completely transparent. This includes, the four corners of the image–those should always be clear. This can is a bigger problem than you realize. For example, if your scale a image in Photoshop it'll add anti-aliased pixels which may include almost-invisible Pixels which would also cause it to fail*. If you must scale in Photoshop, use the Nearest Neighbor setting in the resample Image pulldown menu (at The bottom of the Image Size pop-up menu) to keep sharp edges on your guides.

* (Updated 1/2012) This was actually a "fix" in the latest dev kit. Previously it would manifest itself as all of your other images and resources suddenly breaking, not the actually Broken 9-patch image.

The top and left guides is used to define the scalable portion of your image–left for scaling height, top for scaling W Idth. Using a button image as an example, this means the button can stretch horizontally and vertically within the black portion And everything else, such as the corners, would remain the same size. The allows to has buttons that can scale to any size and maintain a uniform look.

It's important to note that 9-patch images don ' t scale Down–they is only a scale up. So it's best to start as small as possible.

Also, you can leave out portions in the middle of the scale line. So for example, if you had a button with a sharp glossy edge across the middle, you can leave out a few pixels in the mid Dle of the left guide. The Center horizontal axis of your image won ' t scale, just the parts above and below it, so your sharp gloss won ' t get ant I-aliased or Fuzzy.

Fill Area Guides is optional and provide a to define the area for stuff like your text label. Fill determines how much the there is within your the image to place text, or an icon, or other things. 9-patch isn ' t just for buttons, it works for background images as well.

The above button & label example is exaggerated simply to explain the idea of fill–the label isn ' t completely accura Te. To being honest, I haven ' t experienced how Android does multi-line labels since a button label was usually a single row of Tex T.

Finally, here's a good demonstration of how scale and fill guides can vary, such as a linearlayout with a background image & Fully rounded sides:

With this example, the "left" guide is not used but we're still required to having a guide. The background image don ' t scale vertically; It just scales horizontally (based on the TOP guide). Looking at the fill guides, the right and BOTTOM guides extend beyond where they meet the image ' s curved edges. This allows me to place my round buttons close to the edges of the background for a tight, fitted look.

So that's it. 9-patch is super easy and once you get it. It ' s not a perfect-to-do scaling, but the fill-area and multi-line scale-guides does offer more flexibility than Tradi tional 9-slice and Scale9. Give it a try and you'll figure it out quickly.

For more useful tips, follow me on Twitter.

A Simple Guide to 9-patch for Android UI