[Tutorial] DrawPatch9

Discussion in 'Android Themes' started by johnnyb15613, Feb 8, 2011.

  1. johnnyb15613
    Offline

    johnnyb15613 Theme Developer Theme Developer

    Joined:
    Apr 16, 2010
    Messages:
    259
    Likes Received:
    2
    Trophy Points:
    0
    [Tutorial] DrawPatch9 Basic

    I struggled with this concept myself, and spent many hours searching for answers that I failed to find! It is actually quite easy.
    It will require a few things, and having these installed correctly are beyond the scope of this tutorial!
    First you will need the Android SDK installed and working!
    Second, you will need xUltimates d9pc compiler for your system
    http://www.droidforums.net/forum/xeudoxus/47283-release-xultimate.html
    I chose to extract xUltimates tool into my SDK\tools folder since that is where the drawpatch9.bat file is ran from anyhow!
    First create your image and save it as the same name as the .9.png you are replacing without the.9 (This example uses popup_full_dark.9.png, we will save it in our photo editor as popup_full_dark.png) Saving it to the desktop is most efficient!

    [​IMG]


    Enter the SDK\tools directory
    Double click drawpatch9.bat
    The tool now opens. Minimize the application and drag your saved photo overtop the taskbar icon of the tool, wait for the window to maximize, and let go of the mouse.
    Make sure to uncheck Show Lock!
    Make sure to check show patches and show content boxes!

    [​IMG]


    Left clicks add marks, and right clicks erase marks.
    The bottom and right sides control where content can be displayed in the image!
    The top and left side control what portion of the image is expanded as needed!
    First thing to do is decide where you want content to fit in your image. I know that this is a large dialogue box so i'm going to add a 1 pixel padding inside the border of the box. This way text or images are not touching the sides of the box. I add myself a few guidelines along the top and left to help me get my content area set.

    [​IMG]


    So now if I stay just on the insides of the green marks along the bottom and right sides, I will have my 1 pixel padding area where no content will be displayed! Guides along the bottom and right should be a continueous line from beginning of context area to the end!

    [​IMG]


    Notice the area to the right of the window. This shows you how your image will look and react if saved right now. The blue area is our context area! This is the area we just defined with the black guide marks along the edge.
    Now those marks along the top and left were just guides so right click them to erase them.
    Since our gradient runs horizontally I place a single mark in the center of the image along the top to tell the image that if it needs to be wider than it is now, this is the exact pixel line that I want you to replicate!
    The same rule applies to the mark on the left. However since there is a horizontal gradient you are stuck with 2 options! Normally I simply choose the Exact middle pixel line on the left because it is the purest red color in the gradient. You will notice in the pics how the preview pane on the right reflects what the image will look like stretched. That single pixel mark compared to replicating the whole gradient have different effects on what the image will look like stretched. I have tried to replicate entire gradients before and they looked pixelated, thats another reason i choose the single pixel. Also if the box or button or bar or whatever image you are changing is a single color, then you simply use the single pixel method anyways.

    [​IMG]

    [​IMG]


    After you make all your guide marks, click on File in the upper left hand corner, then click save! In the save dialogue box, navigate to the desktop, then scroll until you see the name of your image and click on it, then click save. This will save the patched .9 image on your desktop. The old one will be ther as well, and should be deleted. The new one will have .9.png at the end. Close drawpatch9 application.
    Go back to you SDK\tools folder (this is where I chose to extract xUltimates tool to!) or go wherever you extracted it to. You will see the xUltimate-d9pc.exe, a music folder, an example1 folder, and an example2 folder. All folders must be there, but only example1 matters to us. Open up example1 folder and then open the res folder. Finally, open the drawable-hdpi folder and delete ALL of its contents! Now drag your image saved to the desktop with a .9.png extension into the drrawable-hdpi folder.

    [​IMG]


    Brows back to the directory where all the folder and the exe are located. Double click the xUltimate-d9pc.exe file. A small command window will pop up.

    [​IMG]


    Let it finish. The window will disappear and you will have a new folder named done. Open that folder, and the one inside it, and the one inside it, until you find your image.

    [​IMG]

    That image is patched and ready to be pushed back into the apk!
    You must remember to delete the done folder before you run the tool again!

    Here are a few other examples of patching.

    [​IMG]

    This image is one of the tab buttons. Pretty self explanatory, think about where the content should go (once again I left a 1 pixel padding on sides and 2 on top and bottom) and what pixels should be stretched!

    This next one is the status bar "handle". On my Droid it is approximately 840 pixels wide. This image is only 100 pixels wide. Notice the Guide marks along the top!

    [​IMG]

    Along the top and left, where we tell the image what pixels to replicate when it needs stretched, I have a few scattered. Here's the deal, if two dots are along the top, this tells the image to stretch between those two points. Its the same as setting the content area with a solid black line, but ONLY on the top and left can we skip the solid black line and use two endpoints instead! Obviously as seen in the pic, using four black dots tells the image that there are 2 starting points, and 2 ending points!
    .__________. .__________.

    The line representation above is what the image sees! Stretch the image between the 2 sets of points! You can always check the right window pane, to see how your guide placement is affecting things!
    And finally you will notice that i chose to replicate all pixels on left except the border pixels. This is so if it stretches the middle lines it stretches them evenly!
  2. Mbk
    Offline

    Mbk Android For Life Theme Developer Premium Member

    Joined:
    May 4, 2010
    Messages:
    4,169
    Likes Received:
    4
    Trophy Points:
    0
    nice write up johnnyb...;)... very detailed Bro. one thing that can also be suggested is that draw9patch can be used to alter or create the .9.pngs and then saved directly into a decompiled apk, then letting apkmanager or apktool recompile it when it recompiles the full APK...

    I do love how you explained the meanings of those guides... :)
  3. B-boy™
    Offline

    B-boy™ Team B-boy™/Jedi Counsel Theme Developer Premium Member

    Joined:
    Oct 10, 2010
    Messages:
    1,893
    Likes Received:
    7
    Trophy Points:
    0
    Location:
    central Az
    Dude, nice tut!!! I self taught myself 9patching and this has taught me so much more and will help anyone wanting to learn how to 9patch... Very nice work...

    On system wide buttons in framework I have tried so many things, and even the 3 panels on the right showed it would look perfect, but then when I went to apply it, it had some of it cut off and it faded away.. almost like a botched looking football.... lol.. I didn't know about finishing the patch with the 'done' folder and stuff so I'm gonna look into that... but anyway, thank you for this tut. I will def use it in the future....
  4. Mbk
    Offline

    Mbk Android For Life Theme Developer Premium Member

    Joined:
    May 4, 2010
    Messages:
    4,169
    Likes Received:
    4
    Trophy Points:
    0
    Well I think that's where using draw9patch would come in handy for guys like you, who don't want to stick to the regular looking graphics and may want an oval looking button instead of the traditional rectangular ones, then with this tut you can set where the content will fill making sure that the text or image doesn't extend over the edges of your newly made 'oval' .9.png button... :)
    so this will definitely help guys like you who like to change things up instead of sticking to the norms...;)
  5. B-boy™
    Offline

    B-boy™ Team B-boy™/Jedi Counsel Theme Developer Premium Member

    Joined:
    Oct 10, 2010
    Messages:
    1,893
    Likes Received:
    7
    Trophy Points:
    0
    Location:
    central Az
    Definitely .... there aren't many good tuts for 9patching which is why I self taught myself.... so regardless of the style, I think this is a great thread for many.... and yeah, I do stray away from the norm a little... lol... :)

    Sent from my Droid using DroidForums App
  6. johnnyb15613
    Offline

    johnnyb15613 Theme Developer Theme Developer

    Joined:
    Apr 16, 2010
    Messages:
    259
    Likes Received:
    2
    Trophy Points:
    0
    Yes, if you are dumping these straight from the 9.bat tool, they will come out weird! Some may even show the black guides. I have never used MBK's method, but its great info. I didn't even know we could do that! I'm gonna do another to show how to only stretch certain spots like the taskbar handle, and also tab headers!
  7. CJM
    Offline

    CJM Developer Relations Staff Member Rescue Squad Premium Member

    Joined:
    Sep 12, 2010
    Messages:
    9,298
    Likes Received:
    527
    Trophy Points:
    113
    Location:
    Mississippi Gulf Coast
    Great tutorial johnnyb15613. I havent seen another tutorial that explains it as well as you just did.
  8. B-boy™
    Offline

    B-boy™ Team B-boy™/Jedi Counsel Theme Developer Premium Member

    Joined:
    Oct 10, 2010
    Messages:
    1,893
    Likes Received:
    7
    Trophy Points:
    0
    Location:
    central Az
    Poo.... I get an error in the compiler saying 'and' is not recognized as an internal or external command, operable program or batch file..... processing ant.. "ant/res' does not exist.... I thought I had everthing set right but maybe not....
  9. johnnyb15613
    Offline

    johnnyb15613 Theme Developer Theme Developer

    Joined:
    Apr 16, 2010
    Messages:
    259
    Likes Received:
    2
    Trophy Points:
    0
    Thanks for the praise people! I know when I decided to really get into Android, I noticed a lack of resources. I have never seen a tut on dp9 that was anything close to what I made, and the patching is so incredibly easy. This took the better part of an hour to create. Will help so many people, I'm sure. I really liked MBK's info on compiling image when I repack the apk after xml edits, so convenient!
    First 10 times I tried patching a 9 I knew there had to be marks, but nothing anywhere gave a clear explanation of anything. Learned through trial and error, and just like somebody above, I put decompiled graphics into the apk's and had undesirable image effects!
    Anything else, within my ability, I will happily make another?
    Suggestions?

    @ B-Boy:
    After you installed the SDK, did you change the environment variables ?
  10. B-boy™
    Offline

    B-boy™ Team B-boy™/Jedi Counsel Theme Developer Premium Member

    Joined:
    Oct 10, 2010
    Messages:
    1,893
    Likes Received:
    7
    Trophy Points:
    0
    Location:
    central Az
    Ya know, I never really understood all that and never really used the sdk unless I was practicing drawpatch. It all works fine and once I dl'd the xUltimate stuff, I used Xkape's tut on "so ya wanna edit xml's...." and did everything he said to do with the variables or whatever... but it still has the error... what I might do is uninstall the whole sdk and start over....
  11. johnnyb15613
    Offline

    johnnyb15613 Theme Developer Theme Developer

    Joined:
    Apr 16, 2010
    Messages:
    259
    Likes Received:
    2
    Trophy Points:
    0
    That's the best bet. I had problems setting up the sdk as well. I had the wrong java dev kit installed too.
  12. stetsonaw
    Offline

    stetsonaw Beta Team/Marty McFly Theme Developer Premium Member

    Joined:
    Jun 16, 2010
    Messages:
    2,317
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    Bellevue, NE
    Thanks dude, this rocks!
  13. es0tericcha0s
    Offline

    es0tericcha0s Premium Member Theme Developer Premium Member

    Joined:
    Aug 6, 2010
    Messages:
    283
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    Orlando, Fl.
    Nice tutorial. Well thought out. I just thought I would throw it out there that if you are just wanting to edit a .9 that is already made and not needing to change the shape of the thing, you can just decompile the app with apk tool or apk manager and use your favorite photo editor to enlarge the png until it's large enough to see the borders and then use your rectangle (or whatever works for your situation) and select everything inside of the 1 pixel outer border and change the color or icon however you want. Just save afterwards. This will avoid having to figure out where the border should be and one less program you need to run. When you are done editing the .9 and have it saved, compile the apk or just take the individual .9s and follow the xUltimate instructions.
  14. Mbk
    Offline

    Mbk Android For Life Theme Developer Premium Member

    Joined:
    May 4, 2010
    Messages:
    4,169
    Likes Received:
    4
    Trophy Points:
    0
    If you are recompiling the apk after editting the .9.pngs in that simple method, why would there be any need for xUltimate for the .9.png??... I mean if you are going thru the trouble of decompiling an apk to edit the .9.pngs, might as well just recompile no?

    And I think that the way you decribe is actually the way almost all others use already... but the OP made this thread specific to teach draw9patch, thus the title of the thread... ;)
  15. ballmore
    Offline

    ballmore Member

    Joined:
    Jan 21, 2010
    Messages:
    370
    Likes Received:
    0
    Trophy Points:
    16
    Location:
    Trap Hill, North Carolina
    Yet another awesome tutorial made by a member of the D.F. community. This is why D.F. is my favorite website!!! I wish that we could take all of this information and make it into a book. Or atleast put it all in order and in one big sticky section so people don't have to find one tutorial on .9 here and another on xml's in a different part of the forums. :)

    Again thanks for the great tutorial.
Search tags for this page
.9png batch compiler
,
draw9patch batch
,

drawpatch9

,
drawpatch9 dowbload
,
how to use draw9patch
,

ultimate-d9pc

,
ultimate-d9pc download
,
xultimate 9 patch
,
xultimate-d9pc.exe