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/developing/eclipse-adt.html) 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/developing/tools/draw9patch.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.
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/developing/eclipse-adt.html) 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/developing/tools/draw9patch.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.
