Watch This Now!

Analysis & Opinion

Top Forum Discussions

.9.pngs figured out. New thread!

475 posts
Thanks Meter: 6
By damnitpud, Senior Member on 26th February 2009, 04:54 PM
Post Reply Subscribe to Thread Email Thread
Well my old thread got deleted, So i decided to redo it.

I am sure by now most of you know that editing .9.pngs cause some ill effects on certain images. Well i found a way to edit these images and make them look as good as Google's!

What you need:
Android SDK - Will be using the draw9patch tool in the tools folder.
Eclipse IDE - We will need this to compile the .9s
Photoshop or other image editing sfotware - with PNG compression.

Setting up the enviroment:
When i setup the SDK and Eclipse, i put them inside of C:\Android. Make sure to follow the instructions from here, it will walk you through setting up Eclipse to work properly with Android.

::Tip:: When you get to the part "Installing the Eclipse Plugin (ADT)" the URL "" sometimes gives an error, just change https to http and it should go through without an issue.

Now basically put a .9.png is an image with guides that tells Android where the image can be stretched and where the content will be placed inside the image. An easy example is a button, some fit only one word and others stretch across the whole screen and Android will put the text in the middle of the button.

When you open a .9.png you do not see the guides, that is because they are hidden. When you want to add the guides to an image, you have to drag it into the draw9patch tool. Now the tool has a hidden secret i figured out.(not really hidden, but not well described) If you open an image with the .9.png extension it just opens it. But if you open an image without the .9.png extension, it adds 2 pixels to its width and height. These 2 pixels are for the hidden guides. For example the btn_default_normal_disable.9.png in framework is 44x48. But if you remove the .9 from the file name and drag it into the draw9patch tool it changes to 46x50. Which you will notice after you save the image from the draw9patch tool. Also it will add the .9 to the file name.

Howto: draw9patch
The idea of the draw9patch tool is very simple, you drag an image into it you create the guides and you save the image. But the guides are very specific and if you do not do them properly your image will look strange. So follow these few rules about the tool.

Remove the .9 from image name before you drag it into the tool.
The top and left side guides set where the image can be stretched. Where ever you put a guide is where the image will stretch. Do not put more then 2 next to each other.
The bottom and right side guides set the content area(where the text will go). Now you can only put the guides in the outer border, once the image is compiled this border will be hidden. The tool will not let you put any guides anywhere but the outside border. Now usually you will put a 1x1 guide on the top and left sides, on the right and bottom you want to draw a full line. I have tried putting multiple guides on the top and left but the aapt tool seems to stress out and crash before compiling.

Once you save the image the draw9patch tool should of added the .9 to the name. That is all to adding the guides to the image.

So now your saying ok, i have the image and i still see the guides. To get rid of these lines we need to compile them with Eclipse. Basically we add them to a project in Eclipse and create an apk. During the compile the aapt tool from the sdk will set the image back to its original resolution and hide the guides.
(I am hoping to figure out some command lines for the aapt tool so we can skip this step. But until then editing these .9s are a big pain in the arse!)

Howto: Compiling in Eclipse.
I am assuming you followed the link above for setting up Eclipse and can create a new Android project.

Once Eclipse is open you want to go to "File\New\Android project". Select "Create project from existing source". It should default to the path of the samples in your SDK directory, but if it doesn't just browse to them. I have been using my own project but any sample should be fine. Choose "Finish" and on the left hand side under Project Explorer, you will see the name of the project you opened. Expand the project, then Res and you will see the Drawable folder. You will want to drag your edited .9s here. Once all of the images are in the drawable folder you want to right click the top level folder(Project name) for your project and choose "Android Tools"(second from botom) then "Export Unsigned Application Package..." Save the apk where ever you'd like, just remember where you put it. Cause you will want to open it and take the images out of the drawable folder. You will notice now that the guides are gone and the resolution is back to the normal size. Drag the images into your theme and you are done.

The images below are some screen shots of the draw9patch tool. The first one shows how most of the .9s should look with guides, the second shows with the Show Content checked and the third is what happens when you put your mouse inside the outer pixel range.

Attached is a zip with the drawables from framework-res, launcher, contacts and phone apks from the source. It has the .9s and xmls before being compiled, so you can use these images instead of having to use the draw9patch tool. But it doesn't have all of the same images, there are some missing and some that are not in our firmware yet. So do not just copy and paste all of the images, i have been just copying certain ones into my theme directory and editing them there. Also becareful when editing these images, if any of the guides color changes Eclipse will throw an error. This is easily fixed by using a 1 pixel pencil tool in photoshop and going over the guides with black. Also you need to make sure that there is not anything other then the black guides in the 1 pixel border of the images. you will get errors before compiling if there are. I normally use the rectangle marquee tool to highlight the edge and use the Del key to make sure nothing is in the outside edge.
Attached Thumbnails
Click image for larger version

Name:	draw9patch0.jpg
Views:	2809
Size:	74.6 KB
ID:	161281   Click image for larger version

Name:	draw9patch1.jpg
Views:	2068
Size:	69.8 KB
ID:	161282   Click image for larger version

Name:	draw9patch2.jpg
Views:	2013
Size:	68.8 KB
ID:	161283  
Attached Files
File Type: zip - [Click for QR Code] (4.47 MB, 1423 views)
Last edited by damnitpud; 28th February 2009 at 02:10 AM. Reason: Um there is a lot here...i made some errors =)
The Following 2 Users Say Thank You to damnitpud For This Useful Post: [ View ]
26th February 2009, 05:54 PM |#2  
prash's Avatar
Senior Member
Thanks Meter: 16
Donate to Me
I wonder why the other thread was deleted?

Anywho, thanks again for all the help on the .9.png files, I know its probably one of the biggest frustrations for new theme makers like me. I'll be working more with them on my second theme, the first one will just have to do without I suppose.

Thanks for all the contribution to the theme community!
26th February 2009, 09:37 PM |#3  
brandenk's Avatar
Senior Member
Flag San Diego
Thanks Meter: 67
Nice find, thanks for the info!
27th February 2009, 12:32 AM |#4  
crys|s's Avatar
Thanks Meter: 0
Seems like a lot to do, I've had no problems at all with my .9.png's, but this is good to know.

27th February 2009, 07:08 PM |#5  
savethechicken's Avatar
Senior Member
Flag Albuquerque
Thanks Meter: 0
Thanks Man I have been trying to piece this info together with the thread and was getting nowhere. thank you for putting this out here.
27th February 2009, 07:15 PM |#6  
mannyb's Avatar
Senior Member
Thanks Meter: 3
A lot of work for sure, but if you're going for a full system theme you'll pretty much have to take the time to do things right. Very good info.
28th February 2009, 02:12 AM |#7  
damnitpud's Avatar
OP Senior Member
Flag RI
Thanks Meter: 6
There are a few .9s you can change with minimal defects but things like buttons and tabs its pretty tough to get them perfect
4th March 2009, 08:18 PM |#8  
Senior Member
Thanks Meter: 1
when I try to export it fails because it says the .apk doesn't exist. What am I missing here? Thanks for your help.
4th March 2009, 08:31 PM |#9  
Senior Member
Thanks Meter: 1
it says the bin folder doesn't exist. but if I try to create the bin folder it says it already exists. confusing. what should I do?
Last edited by parmenti; 4th March 2009 at 08:33 PM.
4th March 2009, 09:53 PM |#10  
damnitpud's Avatar
OP Senior Member
Flag RI
Thanks Meter: 6
Hmm not familiar enough with Eclipse to help out with this. But make sure there are not any errors on the images or any part of the app.
4th March 2009, 09:56 PM |#11  
Senior Member
Thanks Meter: 1
when I open up all of the sample apps they already show errors. Any thoughts on that? They show errors in the srs and the Android Manifest. I checked all of them. They all do.

Read More
Post Reply Subscribe to Thread

Guest Quick Reply (no urls or BBcode)
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes