How To Edit .9.png's

Discussion in 'Droid FAQ' started by CorCor67, Jun 14, 2010.

  1. CorCor67
    Offline

    CorCor67 Premium Member Premium Member Developer

    Joined:
    May 2, 2010
    Messages:
    438
    Likes Received:
    2
    Trophy Points:
    18
    I have seen lots of questions about the 9patch images lately, and filled my inbox trying to explain to others. Figured it's time for a write up. There are other ways of doing this, this is what works for me. If you have another method please add to this.

    To complete this "how to" you will need these programs installed on your computer

    The android sdk
    Android SDK | Android Developers
    The compiler
    http://www.droidforums.net/forum/xeudoxus/47283-release-xultimate.html


    In this example I will be editing the genie widget, a smoked glass look with gradient red highlights.

    1. First I need to open up the genie widget apk, all the files in here ending in .9.png will be modified.
    [​IMG]

    2. I pulled the .9.png's to a folder on my desktop and named it "genie widget".
    [​IMG]

    3. Using your favorite editor, I use gimp, change the widget to look how you want it, then save it under the same name.
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]

    4. Right click on your image and open with draw9patch.(draw9patch is in the tools folder of the android sdk)
    [​IMG]

    5. In draw9patch you can only edit a 1px border, the rest goes untouched.
    [​IMG]

    6. If you check the extra boxes at the bottom it will show your patches. The top and left border determine where the image will be stretched. The bottom and right border determine where content can be placed in the image (shown in blue in the right window)
    [​IMG]

    7. Do this with all of the images, be sure not to stretch rounded corners or any designs you put in there. When done with each just click (file/save)
    [​IMG]
    [​IMG]

    8. Now with the compiler, you should have extracted the contents of the zip to a folder. Inside this folder is (example1, example2, and music) folders plus an icon. Open example1/res/drawable-hdpi and erase all the images from here (or move them somewhere else). Now put all of your patched images in here. Go back out to the root of the folder and double click the icon, a command window will pop up and in a few seconds you will see a folder named "done". Inside is your example1 folder with your images. Now just pull the images and stick them back in the apk and you now have a themed genie widget.
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]

    I included the files I used, drawable-hdpi is the images with patches in place before compiled. GenieWidget.apk.zip is the full apk with the updated and compiled widget, edit the name to remove the .zip if you want to use it. Thebowers and pandroid both helped me figure this out, thanks to both of them.

    View attachment 10209 View attachment 10210

    I might make this into a MM theme, just gotta figure out the thm file first, if you want to, go for it, just send me the file so I can put it up in this post.
  2. icculusX
    Offline

    icculusX Premium Member Theme Developer Premium Member

    Joined:
    Feb 10, 2010
    Messages:
    2,539
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    The Moon
    Yea, 9-Patch files are annoying. Wish they were easier to work with. Nice post man, well layed out... I am sure many will find this useful!
  3. CorCor67
    Offline

    CorCor67 Premium Member Premium Member Developer

    Joined:
    May 2, 2010
    Messages:
    438
    Likes Received:
    2
    Trophy Points:
    18
    Thanks, woulda helped me when I was trying to figure them out, hopefully helps others.
Search tags for this page
.9 png
,

.9.png

,
9.png editor
,

9.png

,
android 9.png
,
edit .9.png files
,
how to edit .9.png
,
how to edit .9.png android
,
how to edit .9.png files
,
how to edit 9.png