Android NinePatch .png file format?

Question

Android NinePatch images seem to be standard .png files with extra information. Is there a spec for the format anywhere, as I'd like to be able to implement this on other platforms?

Answer 1

This is the most straightforward link I've found on the subject.

Answer 2

Just take a look at a 9 patch image in an image viewer. It's simply just a 1px border with black pixels flanking the stretchable areas and transparent marking the static parts.

If you zoom into this image you can see the black border marking the stretchable area:

example http://web6.twitpic.com/img/91916457-a53b6866db73378bda07c039151c69aa.4bd6119a-full.png

Answer 3

I would strongly suggest that you not implement the 9patch system on other platforms, for several reasons.

I have been using Android's developer tools for a year and have made extensive use of 9patch files.

They are a nightmare. PNG is not a data format, it is an image format. Mixing the two in the .9.png file is asking for trouble.

9patch files are a poor idea because they combine image and data formats into a single file that is neither fully manageable by a designer nor a developer.

Nine patch files: you will regret your involvement at some point during maintenance, support and updates phase.

Perhaps if at some future date support for 9patch files is added to a number of quality tools (for example, PS CS4 doesn't understand 9patch files as a specific format, nor does it honor the rules of valid nine patch formats.)

The existing tools for nine patch files are awful -- essentially unusable in the opinion of most designers who I have hired.

Answer 4

This Link is very useful for nine patch image in android.

It is very useful example in android. Only use .9 patch PNG file.

http://blogingtutorials.blogspot.com/2010/12/android-nine-patch-example.html

Answer 5

Modern browsers support CSS 9-path based backgrounds: http://www.css3.info/preview/border-image/

Answer 6

I found this link to be very useful: link to blog post. It uses some examples for the different borders defined when a 9 patch is created. It shows how the extra information is used in scaling the images' dimensions (x,y).

There is even a nice comment by a Richard L. at the end which says how you can add regions to be protected from scaling the image by including breaks in the borders; eg. not scaling sections in the image.

Answer 7

Took me a while to understand that the Extension of the 9 patch file should be xxxx.9 and not xxx.9.png