Batch 9-patch image editing May 6th, 2011

It was recently time to start applying the real skins to the Android app I’m building.  Android stretchable art assets are all encoded as 9-patch png files.  This basically means that the regions to stretch and apply padding are specified by setting pixels in a 1 pixel border around the image.  The system will then stretch and place content based on these guides.  There is plenty of documentation out there for background.  There is even an ios library for using 9-patch assets in a similar fashion:

The problem comes when it is time to create these bad boys.  There is a gui tool that comes with the android sdk for doing it.  You open one image at a time and add the guides.  If you edit the image or recut it later, you probably have to do this again.  If you have lots of images of the same dimensions but different colors, you’ll be spending a lot of time with this little tool.

Since it is just a 1px border, you can also use your photoshop expertise to do draw the guides.  But this is tricky because Android needs the alpha channels to be just so and if they are not it will royally screw up your project when you try to build.  It’s easy to mess up.

So I wrote a command line editor for these things.  It allows you to convert normal pngs to 9-patches (add the border), strip the border and get back to a normal png, set the guides and use another 9-patch as a template to set guides on other images.  It made my life easier.  Enjoy.

Read the GitHub README at the bottom of the page.  I include the info on where to get the binary and example usage.

This entry was posted on Friday, May 6th, 2011 at 11:22 pm and is filed under blog, geeky. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.

6 Responses

August 22nd, 2011 at 10:22 am
Richard Says:

Actually Stella, you can use photoshop to create the 9 patch PNGs, but you just have to be carefull when creating the markers around the image. They have to be pure black otherwise the compile will start acting strangely.

Use the 9 patch PNGS on my blog if you need:

August 22nd, 2011 at 5:26 pm
stella Says:

Yeah, it was the being careful part that I wasn’t trusting and prompted me to make this tool… Too many errors only discovered at runtime. If I just had a few random images to do, I might use Photoshop/Gimp but I had a bunch of variations on a theme.

August 25th, 2011 at 6:08 am
Richard Says:

I hear you! I went through a bunch of fixes yesterday, but once you have this down to a science with photoshop, it goes fast and looks great!

Check out the latest packs, you might find something for your projects in there:


December 7th, 2011 at 11:44 pm
Cody Says:

Unfortunately it would seem that your template option is broken. I’ve tried running the jar, and posix binary to no avail. I even renamed my files to test with your exact syntax. here’s what I get:

Synergys-MacBook:drawable-hdpi synergy$ java -jar 9pedit.jar -template template.9.png raw.png
Syntax error: No commands specified. Not doing anything!
9pedit – Batch editing for 9-patch pngs

9pedit {command options} file…

December 8th, 2011 at 12:41 am
stella Says:

This is most likely due to the template.9.png not containing valid border pixels. Around the border, the pixel is considered set if the alpha channel is 0xff (255) and cleared if it is 0. I have noticed that when the 9patch is manipulated in something like photoshop, it can sometimes try to anti-alias the transparency, resulting in alpha channels that are some other value. When it says “No commands specified” it means that no commands were generated by looking at the border pixels in your template.

December 8th, 2011 at 12:45 am
Cody Says:

Interesting. Every 9patch I’ve tried unedited from ICS seems to have issues, whereas 9patches I’ve tried from GB apks don’t. I opted for complete manual editing after having such weird issues. Thank you for a great tool however!

Leave a Reply