Creating & Using 9-patch images in Android

Question

I recently heard about 9-patch images. I know its 9 tiled and is stretchable. I\'d like to know more about it.

• How can I create a 9-patch image?

  Is th

Answer 1

Most of the examples talk about creating a 9-patch image, but implementation details are usually left at a high level.

Nick's post above - with the good 9-patch tutorial that provides a working project download file , saved the day.

Here are the main implementation details that worked for me (once you have a 9-patch image ready to go):

1. Reference the drawable with the name but don't include .9.png (auto-complete in eclipse will take care of this)

2. Make sure you only have 1 image under the main /drawable folder (not a version for each dpi folder)

3. The image must be specified using :background, not :src (this got me stuck for a while)

   android:background="@drawable/splash_logo"

4. Make sure the image and layout that contains it are using:

   android:layout_width="fill_parent"
android:layout_height="fill_parent"

Answer 2

This is good tool: Click here.

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