Post Reply

How to edit .9.pngs

OP cloverdale

23rd December 2009, 08:51 PM   |  #1  
cloverdale's Avatar
OP Senior Member
Flag Washington DC
Thanks Meter: 147
 
1,597 posts
Join Date:Joined: Feb 2009
If you have tried to edit .9.pngs in the res/drawable folders, then you know the reason for this thread. If you have not, the idea is that .9.pngs do not have a static boundary. Instead the boundary is given by a continuous mapping

b:[0,1) --> R^2

wherein the mapping is defined by guides which cannot be seen in regular graphical editing programs. This will give the basic idea, along with an example of how this works.

What you will need:

1.) draw9patch (found in /tools of the Android SDK: http://developer.android.com/sdk/index.html)

2.) gimp (or equivalent graphics software)

3.) Java 1.6 (not 1.5)

4.) Eclipse 3.5 with ADT 0.95 (Setup to compile android 1.6. Instructions: http://developer.android.com/guide/d...lipse-adt.html) [color=red] It is assumed you are comfortable with eclipse. There are many threads on setting up eclipse, along with the linked instructions, so try and keep eclipse questions in this thread to a minimum.


Step-By-Step

1.) Find your desired file to edit, which from here on will be referred to graphic.9.png, and rename to graphic.png.

Reason: We will open the file in gimp (or an alternative .png editing app) which will not recognize the .9.png, and will open as .png. This will cause the invisible guides to open as filled in, and thus the guides will need to be redefined before we save. If we open a .9.png extension in draw9patch, it will assume the guides exist, which of course will not if we edit in another application, and thus not be added. By changing the extension to only .png, when opening in draw9patch, the guides will be re-added.

2.) Open graphic.png in gimp and do your desired editing.

3.) In your computer terminal enter draw9patch (assuming you added /tools to your path, otherwise in the terminal navigate to /tools in the AndroidSDK and enter draw9patch). Possible Issue: If draw9patch comes up blank with no menu, you do not have Java 1.6 set as default. Fix this via sudo update-java-alternatives -s java-6-sun in the terminal (or something similar for your system).

4.) Drag and drop graphic.png into the resulting draw9patch window. What you will now see is your image, along with transparent lines which will be where your guides are defined. One should read this http://developer.android.com/guide/d...raw9patch.html, though it is not that clear. Draw9patch allows you to add/remove black squares which define the actual guides. I will admit that this is one part of the process that I am still not completely comfortable with, and sometimes requires a little trial and error. Here is what I have figured out:

(i) You will want to draw a solid black line along the bottom and right edges of your image. This designates the boundary which results from the region which is stretched.

(ii) You will now add black squares to the top and left sides. These designate the solid part of the region that will be stretched (as opposed to staying transparent).

As I stated before, this part is a little confusing, but with some trial and error, anyone can figure it out. See my following example to witness the guides being used.

5.) After the guides are defined, save the file in draw9patch. This will automatically append .9 to the filename, and give an actual .9.png file that has been edited (now called graphic.9.png). We are not quite done though, because as is, the guides will not be recognized by the android OS. The images need to be compiled in eclipse as part of an apk.

6.) Open Eclipse and create a new project. You can name it anything you like, and you can just uncheck defining an activity. This project will automatically generate a res/drawable (or res/drawable-hdpi) folder, in which you will drag and drop graphic.9.png. From here, right click on your project, choose "Android Tools", and "export unsigned android application".

7.) In step 6 an .apk was created (I choose to save to desktop), extract the files, and open the folder in which graphic.9.png was placed. This is your newly edited, ready to use .9.png. Enjoy and have fun theming.


Example: How to change the outline of the inner squares on the power widget from orange to white.

1.) I take the file appwidget_inner_focus_c.9.png (found in Settings/res/drawable) and rename to appwidget_inner_focus_c.png.

2.) Open in gimp (figure_1) and change color to white (figure_2).

3.) Open draw9patch

4.) Drop appwidget_inner_focus_c.png into draw9patch (figure_3) and define guides (figure_4). In fig.3 the purple color is showing where the patch will be applied (i.e. where the stretching will occur). After I define the guides, (fig.4) note the vertical and horizontal green lines with signify the only color stretching will be along the boundary itself.

5. Save the image as appwidget_inner_focus_c.9.png (anywhere you like).

6. Drag and drop the file into the res/drawable-hdpi folder in your project folder (navigate to through regular computer file browser). Note that it is in the correct folder (fig.5). Right click on the project (in my case Aaron) and choose Android Tools, the export unsigned android application. Aaron.apk now appear on my Desktop (I chose desktop to export to), which I extract my appwidget_inner_focus_c.9.png from.

7. I am now done.
Attached Thumbnails
Click image for larger version

Name:	figure_1.jpg
Views:	3859
Size:	10.6 KB
ID:	259753   Click image for larger version

Name:	figure_2.jpg
Views:	2809
Size:	10.1 KB
ID:	259754   Click image for larger version

Name:	figure_3.png
Views:	2735
Size:	15.2 KB
ID:	259755   Click image for larger version

Name:	figure_4.png
Views:	2565
Size:	18.7 KB
ID:	259756   Click image for larger version

Name:	figure_5.jpg
Views:	2045
Size:	11.0 KB
ID:	259757  

The Following 7 Users Say Thank You to cloverdale For This Useful Post: [ View ]
23rd December 2009, 09:00 PM   |  #2  
jairomeo's Avatar
Senior Member
Flag 727
Thanks Meter: 96
 
1,512 posts
Join Date:Joined: Mar 2009
More
You don't actually need to use the draw9 tool. You can use your favorite photo editing software, whether it be Photoshop, Paint.net or GIMP and you can just add a 1px wide black border where needed and it works just the same.

Of course if you download the source from cyan's github then you can edit them from there, the source code is unprocessed so it still has the 1px black border around it. To me this is the easiest way to do it, then you don't have to worry about where you place the lines, they are already there.

After you edit, then you still need to do the above in eclipse.
Last edited by jairomeo; 23rd December 2009 at 09:04 PM.
23rd December 2009, 09:06 PM   |  #3  
cloverdale's Avatar
OP Senior Member
Flag Washington DC
Thanks Meter: 147
 
1,597 posts
Join Date:Joined: Feb 2009
Quote:
Originally Posted by jairomeo

You don't actually need to use the draw9 tool. You can use your favorite photo editing software, whether it be Photoshop, Paint.net or GIMP and you can just add a 1px wide black border where needed and it works just the same.

Of course if you download the source from cyan's github then you can edit them from there, the source code is unprocessed so it still has the 1px black border around it. To me this is the easiest way to do it, then you don't have to worry about where you place the lines, they are already there.

After you edit, then you still need to do the above in eclipse.

Wow, that is much easier, thank you.
12th June 2010, 08:43 AM   |  #4  
Member
Flag Budapest
Thanks Meter: 7
 
61 posts
Join Date:Joined: Nov 2007
Donate to Me
More
Is it necessary to do step 6?
I find out the answer yes
Last edited by hadesz; 12th June 2010 at 09:01 AM.
20th July 2010, 04:43 PM   |  #5  
athanos's Avatar
Senior Member
Thanks Meter: 29
 
510 posts
Join Date:Joined: Apr 2010
Ok. So, everything was going great, but I ran into a problem. I am able to edit my .9.png's just fine. However, when I "export unsigned android application" in Eclipse I get an error that the package does not exist. Looking closer I see that one file in the package explorer has a little sqaure 'x' by it. If I delete that file it works perfectly, but I want that .9.png to be in there. Any clues on why this would happen? Any help would be greatly appreciated. Thanks for the great tutorial by the way. After you edit so many .9.png's you get a little used to it and it's really easy.
21st July 2010, 02:05 PM   |  #6  
Senior Member
Thanks Meter: 12
 
494 posts
Join Date:Joined: Jan 2010
Quote:
Originally Posted by athanos

Ok. So, everything was going great, but I ran into a problem. I am able to edit my .9.png's just fine. However, when I "export unsigned android application" in Eclipse I get an error that the package does not exist. Looking closer I see that one file in the package explorer has a little sqaure 'x' by it. If I delete that file it works perfectly, but I want that .9.png to be in there. Any clues on why this would happen? Any help would be greatly appreciated. Thanks for the great tutorial by the way. After you edit so many .9.png's you get a little used to it and it's really easy.

Thats usually caused by a bad 9patch. The 1px marquee around the real image can only contain full transparent pixels our full opaque pixels (the patch guides).
Open your png with gimp/photoshop/whatever and look into that area to see if there's something painted.
22nd July 2010, 04:31 PM   |  #7  
jairomeo's Avatar
Senior Member
Flag 727
Thanks Meter: 96
 
1,512 posts
Join Date:Joined: Mar 2009
More
Quote:
Originally Posted by athanos

Ok. So, everything was going great, but I ran into a problem. I am able to edit my .9.png's just fine. However, when I "export unsigned android application" in Eclipse I get an error that the package does not exist. Looking closer I see that one file in the package explorer has a little sqaure 'x' by it. If I delete that file it works perfectly, but I want that .9.png to be in there. Any clues on why this would happen? Any help would be greatly appreciated. Thanks for the great tutorial by the way. After you edit so many .9.png's you get a little used to it and it's really easy.

If you look at the errors it will tell you which file is bad and even if it's the top, bottom or sides that have a bad pixel in the border.
22nd August 2010, 08:44 PM   |  #8  
mr.megi's Avatar
Senior Member
Thanks Meter: 863
 
747 posts
Join Date:Joined: Jun 2010
Donate to Me
More
if someone want to help me how to do this on msn pleas PM me , im noob on eclipse
29th August 2010, 04:21 PM   |  #9  
C0mpu13rFr34k's Avatar
Senior Member
Flag Randers Ně
Thanks Meter: 28
 
1,048 posts
Join Date:Joined: Apr 2010
More
Why is the Eclipse part needed? I have no problem compiling my apk without doing that.
29th August 2010, 09:49 PM   |  #10  
Recognized Developer
Thanks Meter: 336
 
1,467 posts
Join Date:Joined: Jul 2009
More
This thread is quite old. Apktool (my signature) is able to properly decode 9.png files - it adds borders where they should really be. Don't waste your time on adding them by hand.

Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Top Threads in Android Themes by ThreadRank