What Are 9 Patch Images

9 Patch images are stretchable, repeatable images reduced to their smallest size. The simplest example would be if you were to take a rounded div and slice it up into 9 squares like you would a tic-tac-toe board. The four corners wouldn't change sizes at all but would be static while the other 5 pieces would be stretched or repeated to allow the whole image to scale appropriately.

With that explanation and the advent of CSS3 you might think that there is no reason to use 9 patch images but the name '9 patch' is a misnomer. The images can be sliced up into even smaller pieces.

9 Patch images contain an index of which piece is what by adding a 1px border to the image. The colors in the border determine if a piece is static (doesn't scale), it stretches, or it repeats.

Google Slideshow: https://docs.google.com/present/view?id=dc7ghz8w_34f8338rcg

See also the Android developer info about 9-patch images: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch