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?

Breastpin

Answer 1

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

Discolor

Changing to the accepted answer, as this link gives better info about the stretchable vs. padding border features. – Breastpin

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

Sclar

I was hoping for a documented spec, but I guess that's good enough! – Breastpin

I don't think there is any more documentation needed, as it's just a normal png with 1 pixel border. – Sclar

I'm not totally clear on how the 1-pixel border is interpreted, particularly with non-contiguous pixel selections, and the difference between top and bottom margins. – Breastpin

From my experience each margin pair (top/bottom and left/right) must be identical or it will stop your application from compiling. I.E. selections must be contiguous. This simply splits the image up into the four static corners and the remaining area marked by the black pixels is stretchable. – Sclar

stealthcopter you are incorrect. all sides are independent. You can have up to 5 sections per side also. ___ _ ___ ____ _ would be valid top scaling for example. – Role

The right and bottom contain information independent of the top and left. In Android the top and left are the stretchable area and the bottom and right are for where to put the content. – Unionism

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.

Smutch

+1 for a strongly held view - I'd agree that the tools aren't great. However, given that I need the 9-patch functionality of 'expandable' images, what alternative do I have? Reinventing the wheel could be even dumber. – Breastpin

I think the 9-patch concept is an example of a really great idea implemented in the worst possible fashion. Another approach would be to have a PNG file (industry standard) and an XML format that included 4 dimensions. Stretch X, Stretch Y, Pad X and Pad Y. Then, use a custom parser (XML instead of PNG) and then manipulate the PNG to stretch it. This way, your PNG is still reusable for other things (and works in photoshop) and your layout market is in XML where programmers can use it easily. – Smutch

I totally disagree with Cory here. I have used 9-patch PNGs in photoshop for 10 months now and they work like a charm. in fact, my UI looks crisp with this technique, it's great! – Role

I think people don't understand them. – Unionism

I have found that the classes for supporting all data nine patches are far superior to the "in-PNG" format that Android uses. I've implemented this yannickloriot.com/library/ios/cccontrolextension/Classes/… into Java and now have the best of both worlds. The crisp UI without any of the PNG or 9patch format overhead. – Smutch

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

Cochlea

Answer 5

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

Logography

nice link, the introduction text motivate the 9 parameters; so the 9 patch is an explicit definition of the 9 areas of interest for placing the bitmap into the coordinates of the canvas? – Ropedancer

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.

Ropedancer

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

Birnbaum

in that case it just ignores the 9 patch data altogether – Peti