DroidForums.net is the original Verizon Android Forum! Registered Users do not see these ads. Please Register - It's Free!
Page 1 of 2 1 2 LastLast
Results 1 to 10 of 15

Thread: [Tutorial] DrawPatch9

  1. Theme Developer
    johnnyb15613's Avatar
    Member #
    59596
    Join Date
    Apr 2010
    Posts
    261
    Liked
    14 times
    Phone
    Galaxy Nexus
    DroidForums.net Theme Developer
    #1

    [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
    [Release] xUltimate
    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!




    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!




    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.




    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!




    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.






    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.




    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.




    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.



    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.



    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!



    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!
    Last edited by johnnyb15613; 02-21-2011 at 07:44 PM. Reason: Add

    The Sourcery Nexus: Hey, at least it's not crack!!!

    Bean Picker The Jelly Bean theme that is any color you want it to be!

    Droid Forums
    Rootz Wiki
    XDA
    Team Sourcery Forums

  2. Android For Life
    Mbk's Avatar
    Member #
    65152
    Join Date
    May 2010
    Posts
    4,170
    Liked
    48 times
    Phone
    Enter Current Phone Model Here
    DroidForums.net Theme Developer
    Premium Member
    #2
    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. Team B-boy™/Jedi Counsel
    B-boy™'s Avatar
    Member #
    125826
    Join Date
    Oct 2010
    Location
    central Az
    Posts
    1,897
    Liked
    96 times
    Twitter
    @B_boytm
    Phone
    Moto Droid 1
    DroidForums.net Theme Developer
    Premium Member
    #3
    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....




    http://bit.ly/BboyTMwebsite
    <-- My Website - The ALL-In-1 Place for all my work


    http://twitter.com/#!/B_boytm <-- Follow me on TWITTER...
  4. Android For Life
    Mbk's Avatar
    Member #
    65152
    Join Date
    May 2010
    Posts
    4,170
    Liked
    48 times
    Phone
    Enter Current Phone Model Here
    DroidForums.net Theme Developer
    Premium Member
    #4
    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. Team B-boy™/Jedi Counsel
    B-boy™'s Avatar
    Member #
    125826
    Join Date
    Oct 2010
    Location
    central Az
    Posts
    1,897
    Liked
    96 times
    Twitter
    @B_boytm
    Phone
    Moto Droid 1
    DroidForums.net Theme Developer
    Premium Member
    #5
    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




    http://bit.ly/BboyTMwebsite
    <-- My Website - The ALL-In-1 Place for all my work


    http://twitter.com/#!/B_boytm <-- Follow me on TWITTER...
  6. Theme Developer
    johnnyb15613's Avatar
    Member #
    59596
    Join Date
    Apr 2010
    Posts
    261
    Liked
    14 times
    Phone
    Galaxy Nexus
    DroidForums.net Theme Developer
    #6
    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!

    The Sourcery Nexus: Hey, at least it's not crack!!!

    Bean Picker The Jelly Bean theme that is any color you want it to be!

    Droid Forums
    Rootz Wiki
    XDA
    Team Sourcery Forums

  7. Developer Relations
    CJM's Avatar
    Member #
    117189
    Join Date
    Sep 2010
    Location
    Mississippi Gulf Coast
    Posts
    9,001
    Liked
    1036 times
    Phone
    Moto X
    Premium Member
    #7
    Great tutorial johnnyb15613. I havent seen another tutorial that explains it as well as you just did.
  8. Team B-boy™/Jedi Counsel
    B-boy™'s Avatar
    Member #
    125826
    Join Date
    Oct 2010
    Location
    central Az
    Posts
    1,897
    Liked
    96 times
    Twitter
    @B_boytm
    Phone
    Moto Droid 1
    DroidForums.net Theme Developer
    Premium Member
    #8
    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....




    http://bit.ly/BboyTMwebsite
    <-- My Website - The ALL-In-1 Place for all my work


    http://twitter.com/#!/B_boytm <-- Follow me on TWITTER...
  9. Theme Developer
    johnnyb15613's Avatar
    Member #
    59596
    Join Date
    Apr 2010
    Posts
    261
    Liked
    14 times
    Phone
    Galaxy Nexus
    DroidForums.net Theme Developer
    #9
    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 ?

    The Sourcery Nexus: Hey, at least it's not crack!!!

    Bean Picker The Jelly Bean theme that is any color you want it to be!

    Droid Forums
    Rootz Wiki
    XDA
    Team Sourcery Forums

  10. Team B-boy™/Jedi Counsel
    B-boy™'s Avatar
    Member #
    125826
    Join Date
    Oct 2010
    Location
    central Az
    Posts
    1,897
    Liked
    96 times
    Twitter
    @B_boytm
    Phone
    Moto Droid 1
    DroidForums.net Theme Developer
    Premium Member
    #10
    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....




    http://bit.ly/BboyTMwebsite
    <-- My Website - The ALL-In-1 Place for all my work


    http://twitter.com/#!/B_boytm <-- Follow me on TWITTER...
Page 1 of 2 1 2 LastLast

Links

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Similar Threads

  1. K9 Mail Tutorial
    By BrettW in forum Android Tech Support
    Replies: 1
    Last Post: 12-16-2010, 12:28 PM
  2. Tutorial(?)
    By microsnook in forum Motorola Droid 2 Development
    Replies: 0
    Last Post: 12-11-2010, 11:06 AM
  3. Tutorial Request*
    By arm121 in forum Android Themes
    Replies: 2
    Last Post: 09-28-2010, 09:37 PM
  4. theme tutorial
    By tiggerxplur in forum Android Themes
    Replies: 5
    Last Post: 06-03-2010, 06:05 AM
  5. 2.1 to 2.0.1 Tutorial?
    By hajabooja in forum Android Hacks and Help
    Replies: 5
    Last Post: 12-29-2009, 11:53 AM

Search tags for this page

.9png editor
,
draw 9 patch tutorial
,

drawpatch9

,
example drawpatch9
,
how to use drawpatch9
,
ultimate d9pc
,

ultimate-d9pc

,
xultimate 9 patch
,

xultimate-d9pc

,
xultimate-d9pc.exe
Click on a term to search our site for related topics.

Tags for this Thread

Find us on Google+