Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,806,279 Members 52,216 Now Online
XDA Developers Android and Mobile Development Forum

How to edit .9.pngs

Tip us?
 
cloverdale
Old
#1  
cloverdale's Avatar
Senior Member - OP
Thanks Meter 147
Posts: 1,597
Join Date: Feb 2009
Location: Washington DC
Default How to edit .9.pngs

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:	3824
Size:	10.6 KB
ID:	259753   Click image for larger version

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

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

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

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

Empirical evidence can never establish mathematical existence - nor can the mathematician's demand for existence be dismissed by the physicist as useless rigor. Only a mathematical existence proof can ensure that the mathematical description of a physical phenomenon is meaningful.
-- Richard Courant
The Following 7 Users Say Thank You to cloverdale For This Useful Post: [ Click to Expand ]
 
jairomeo
Old
(Last edited by jairomeo; 23rd December 2009 at 09:04 PM.)
#2  
jairomeo's Avatar
Senior Member
Thanks Meter 95
Posts: 1,512
Join Date: Mar 2009
Location: 727
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.
 
cloverdale
Old
#3  
cloverdale's Avatar
Senior Member - OP
Thanks Meter 147
Posts: 1,597
Join Date: Feb 2009
Location: Washington DC
Quote:
Originally Posted by jairomeo View Post
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.
Empirical evidence can never establish mathematical existence - nor can the mathematician's demand for existence be dismissed by the physicist as useless rigor. Only a mathematical existence proof can ensure that the mathematical description of a physical phenomenon is meaningful.
-- Richard Courant
 
hadesz
Old
(Last edited by hadesz; 12th June 2010 at 09:01 AM.)
#4  
Member
Thanks Meter 7
Posts: 61
Join Date: Nov 2007
Location: Budapest

 
DONATE TO ME
Is it necessary to do step 6?
I find out the answer yes
 
athanos
Old
#5  
athanos's Avatar
Senior Member
Thanks Meter 29
Posts: 510
Join Date: 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.
 
AnderWeb
Old
#6  
Senior Member
Thanks Meter 12
Posts: 494
Join Date: Jan 2010
Quote:
Originally Posted by athanos View Post
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.
----
Check my hacked launcher for donut:
AlmostNexus launcher :P

Check my theme
ADWone for CyanogenMOD/SuperD/PaysROM/Dwang/TheOfficial/SuperCSDI

If you want me to buy some ice-creams to my son, you can affor them here

follow me!
 
jairomeo
Old
#7  
jairomeo's Avatar
Senior Member
Thanks Meter 95
Posts: 1,512
Join Date: Mar 2009
Location: 727
Quote:
Originally Posted by athanos View Post
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.
 
mr.megi
Old
#8  
mr.megi's Avatar
Senior Member
Thanks Meter 863
Posts: 746
Join Date: Jun 2010

 
DONATE TO ME
if someone want to help me how to do this on msn pleas PM me , im noob on eclipse
 
C0mpu13rFr34k
Old
#9  
C0mpu13rFr34k's Avatar
Senior Member
Thanks Meter 28
Posts: 1,048
Join Date: Apr 2010
Location: Randers Ně
Why is the Eclipse part needed? I have no problem compiling my apk without doing that.
Current phone: HTC One S
Secondary phone: HTC Hero
Current tablet: Asus Google Nexus 7 16GB

 
Brut.all
Old
#10  
Recognized Developer
Thanks Meter 335
Posts: 1,467
Join Date: Jul 2009
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.
G+ | apktool | Ingress broot mod | Brut Google Maps (dead)

If you like me you can buy me a droidburger!

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes