Updated:03-15-12-Better Draw9patch Program FOUND!

Search This thread

AndroidGraphix

Senior Member
Apr 4, 2011
1,266
377
Paradise Valley, AZ
UPDATED 03-15-12:

Elex_kr has introduced a NEW DRAW9PATCH Program. Please scroll down through the post to view his work. AND DONATE. This DEV deserves a lot of credit for bringing a new improved program to the rooted community. I can attest that his program is very easy to use and extremely fast. We're working on new ways to improve the program. Please post your comments and suggestions to Elex_kr below.


03-15-12-Direct link to his latest Better 9-patch Tool

Here's quick video of what Elex_kr's Better 9-Patch Tool




Original Post:

I'm putting this thread together because it's been too long that draw9patch has been in place without any updates or improvements since its release. I'm also posting this because I'm sure there's a dev willing to redesign draw9patch and make it easier to use. Here's a quick video of why we need an improved draw9patch program.



The main issue for many themers is how time consuming it can be to fill in only ONE pixel at a time. I've been using draw9patch for almost a year and it consumes a large portion of my day. The IDEAL draw9patch would be able to select multiple pixels at the same time. For example, selecting one end of the png and holding down (Shift) while selecting the end point where the pixels would automatically fill in. I'm open to suggestions or comments. Please keep this professional.

Donation: I'm willing to give any DEV $100 for a newly improved draw9patch program. Conditions as follows:
1) Must be based off the original draw9patch
2) Must have the improvements stated above, allowing for multiple pixels to be selected based on holding (CTRL, SHIFT or ALT)
3) Must have the ability to save the PNG as a .9.png.
4) Must be compatible with Windows 7.


*-*-*
Just to give the dev an idea of how long draw9patch can take. Today I used the program to stretch 59 .9.png's. It took an average of 2 1/2 minutes per 9.png. That's 2 hours and 26 minutes of solid time spent using draw9patch. I could have done these in probably 35 minutes tops if the program was more user friendly and had the above stated actions.


Attention moderator(s). If this video can be embedded, please correct it.
 
Last edited:

Diamondback

Retired Dev Committee Lead / Retired Senior Mod
Jan 17, 2010
4,476
6,631
virtuous-ten-studio.com
Well as I am fairly new to the .9 drawing itself, can you please explain the general idea and workflow?
I know that those lines and pixels are used to determine what in the image is stretchable and what not.

And I have another question:
You say that the new too lneeds to be based on the old one... What do you mean exactly with that sentence?

Is there any special kind of problem doing these .9 files? Or is it just drawing the lines and then saving the file as a normal png?
 

AndroidGraphix

Senior Member
Apr 4, 2011
1,266
377
Paradise Valley, AZ
Well as I am fairly new to the .9 drawing itself, can you please explain the general idea and workflow?
I know that those lines and pixels are used to determine what in the image is stretchable and what not.

And I have another question:
You say that the new too lneeds to be based on the old one... What do you mean exactly with that sentence?

Is there any special kind of problem doing these .9 files? Or is it just drawing the lines and then saving the file as a normal png?

Thanks for dropping in Diamondback! Draw9patch places a one pixel border around the PNG. The border is used to place black pixels in areas the png will stretch.

My workflow consist of making the png from scratch in CS5 (Adobe Photoshop) then saving the image as a png. That PNG is then places into draw9patch for editing. I place the pixels around the border as needed then save the work in draw9patch. Draw9patch automatically saves the png as a .9.png.

The .9.png is in it's raw decompiled format. Which means, the pixels are still visible. The only way to hide the outer border is to place the .9.png into either Eclipse (Instructions found here on my thread:

http://xdaforums.com/showthread.php?t=1140034

Or XUltimate draw9patch compiler(reference: xeudoxus). Website:

http://www.droidforums.net/forum/xeudoxus/47283-release-xultimate.html

Both of the programs will compile the .9.png which then can be used in any apk. XUltimate's being the quickest and easiest to use by far.

What the new draw9patch needs:

"The new Tool needs to be based on the old on." Really, I just need to be able to see how the png will look when my pixels on the border are added. When you drop a png into draw9patch, you'll know what I'm talking about. Aside from that, it's basic functions would be nice. Such as,

1) Show lock
2) Show Patches
3) Show content
4) Zoom
5) The drop and drag png's into the program
6) MOST IMPORTANTLY a faster way to draw the pixel border around the png. An example of this would be to hold shift down and select the beginning point and end point of where a pixel line should be place.

If it could compile itself upon saving, that would be another great feature to add.

There's really no kind of problem with doing .9.png's other than the draw9patch program we are forced to use is a dinosaur and lacks efficiency. Hundred's of Devs and themers use draw9patch on a daily basis. This product alone would be valuable to anyone needing a more efficient tool. With that said, I'm sure themers like myself would gladly pay to use a more efficient program.
 
Last edited:

Diamondback

Retired Dev Committee Lead / Retired Senior Mod
Jan 17, 2010
4,476
6,631
virtuous-ten-studio.com
Thanks for dropping in Diamondback! Draw9patch places a one pixel border around the PNG. The border is used to place black pixels in areas the png will stretch.

My workflow consist of making the png from scratch in CS5 (Adobe Photoshop) then saving the image as a png. That PNG is then places into draw9patch for editing. I place the pixels around the border as needed then save the work in draw9patch. Draw9patch automatically saves the png as a .9.png.

The .9.png is in it's raw decompiled format. Which means, the pixels are still visible. The only way to hide the outer border is to place the .9.png into either Eclipse (Instructions found here on my thread:

http://xdaforums.com/showthread.php?t=1140034

Or XUltimate draw9patch compiler(reference: xeudoxus). Website:

http://www.droidforums.net/forum/xeudoxus/47283-release-xultimate.html

Both of the programs will compile the .9.png which then can be used in any apk. XUltimate's being the quickest and easiest to use by far.

What the new draw9patch needs:

"The new Tool needs to be based on the old on." Really, I just need to be able to see how the png will look when my pixels on the border are added. When you drop a png into draw9patch, you'll know what I'm talking about. Aside from that, it's basic functions would be nice. Such as,

1) Show lock
2) Show Patches
3) Show content
4) Zoom
5) The drop and drag png's into the program
6) MOST IMPORTANTLY a faster way to draw the pixel border around the png. An example of this would be to hold shift down and select the beginning point and end point of where a pixel line should be place.

If it could compile itself upon saving, that would be another great feature to add.

There's really no kind of problem with doing .9.png's other than the draw9patch program we are forced to use is a dinosaur and lacks efficiency. Hundred's of Devs and themers use draw9patch on a daily basis. This product alone would be valuable to anyone needing a more efficient tool. With that said, I'm sure themers like myself would gladly pay to use a more efficient program.

Hm, okay so the only real "work" is drawing lines around the image, okay.

I wonder if those lines are really needed? Does the final (compiled) image somehow has those lines too?
Or are the lines only an easy way to tell the compiler what to do?

Would it be possible choose another way of "marking" those areas instead of lines if we create a different compiler?

What about the sources of the compilers? Are they opensource?

Edit: Actually the biggest problem would be the preview... But I see that this is the most important part too :D
 
Last edited:

AndroidGraphix

Senior Member
Apr 4, 2011
1,266
377
Paradise Valley, AZ
Hm, okay so the only real "work" is drawing lines around the image, okay.

I wonder if those lines are really needed? Does the final (compiled) image somehow has those lines too?
Or are the lines only an easy way to tell the compiler what to do?

Would it be possible choose another way of "marking" those areas instead of lines if we create a different compiler?

What about the sources of the compilers? Are they opensource?

Edit: Actually the biggest problem would be the preview... But I see that this is the most important part too :D

The lines are exactly what you say. They aid in telling the compiler which way to stretch the png. Sometimes if you have complex png's like I do, you have to be very specific on where you place the pixels. The same problem remains though, the bottom pixels and the right pixels take the longest.

If the compiler was modified to to automatically place these borders in a specific place each time, it would lead to png's that may not look as intended. For example:

tango_extreme_alarmclock.jpg


The screen shot on the left shows several of my buttons. Look specifically at the button with the words "Set" & "Cancel". These buttons require very specific pixel alignment on the bottom of the png which tells where to place the text. If it were on the entire bottom portion of the button it may lead to text running over parts of my graphic where I didn't intend it.

I'm not sure if the compilers are opensource. I would talk to the dev that made XUltimate.

**Adding the ability to select multiple pixels at the same time with the current program in place is the ideal solution.
 

zelendel

Senior Member
Aug 11, 2008
23,360
20,607
OnePlus 6T
OnePlus 9
I would love thus as well. Now while I don't mind hold the mouse button and dragging the pointer down to draw the line instead of the single click method it would be so much easier with making 2 points and then having the rest get filled in.
 

Diamondback

Retired Dev Committee Lead / Retired Senior Mod
Jan 17, 2010
4,476
6,631
virtuous-ten-studio.com
I would love to work on that project here but actually I don't have enough time to code and maintain two projects ( of which is one way bigger than everybody thinks)...

So maybe someone else can join me?

We do have several "harder" tasks to do:
  • Crerate an engine which can generate the patches fro mthe patch lines
  • Something that can work with the patch lines to show the previews
  • The user interface needs to be easy to work with

I would code that with C# and WPF, so if we have some talented experienced .NET WPF devs here it would be cool to make a little team :)
 
  • Like
Reactions: AndroidGraphix

AndroidGraphix

Senior Member
Apr 4, 2011
1,266
377
Paradise Valley, AZ
Alternative to using draw9patch

Here's a alternative method I uncovered using Adobe Photoshop.

1.Drag and drop png's into Adobe Photoshop instead of Draw9patch
2.Increase canvass size by 2w and 2h.
3. Use the pen tool to make your corrections like you would in draw9patch.
4. Convert pen tool by right clicking on the line you created and select stroke path/pencil/ok
5. Delete the path
6. save the png as .9.png
7. Compile

Here's video on how. For now, it's the best alternative to draw9patch.

This process alone has saved me hours of time. Especially, on large png's.

http://youtu.be/kwpQ8A9r_Zo

Updated 12-16-11. Someone out of Korea just created an awesome draw 9 patch program. It's a must see. Link here.
http://fly-elex.tistory.com/m/entry/the-9-patch-builder
 
Last edited:

AndroidGraphix

Senior Member
Apr 4, 2011
1,266
377
Paradise Valley, AZ
Hello,
I just make a new id in xda to let you know that
I made an alternative 9 patch tool with Java.

And you can download it from my blog.

(sorry, it says that i shouldn't link external ... oh.. i'll attach the '.jar' file.)

Please try it. Thank you.

Awesome work Elex_kr! Downloading now. This could change the entire Theme Community/rooted community. Good work. I'll report back soon.

Updated:

WOW! This is a must have Themer tool. Very nice job. Thanks for posting your initial link on my Youtube video. Very much appreciated, your donation has been sent!
 
Last edited:

Elex_kr

Member
Dec 17, 2011
15
47
www.roundrect.kr
Newly updated!!!

Following is your requirements.

1) Show the outer line pixel being drawn. It really helps to see it being draw9 out. This is a must. The shading you designed helps but it will help much more if we see the border being drawn.

2) Your program draws the line from one end to one end. The original draw9patch leaves at least one pixel at each corner. Have you experienced any problems with your .9.png’s being designed like this?

3) Can you add a copy button or port button to allow the image to be immediately opened up in the old draw9patch editor so we can see how the image stretched? Or at least make it super easy for us to save the path to our draw9patch program from command prompt then press a button to have the image created in your program transfer over to draw9patch.

4) Create a transparent border around the png. With your latest release, there’s only a transparent border on the left and right. The top and bottom should also have a little buffer room to make things equal.

5) A save as button would be nice so we can direct the image to a folder where we want our work to be saved. Even better, give us an option to create a default work folder where our .9.png’s are saved.

6) This is of course much more difficult but would be a nice feature. Being able to compile the .9.png upon save. That would save some time. That would for sure be the icing on the cake.

DOWNLOAD FROM HERE
------------------------------------------------------

I think I solved 1) ~ 5).
And 6) will be available on next release.
Please, check attached file.

And thanks for your donation!
 

Attachments

  • 2011-12-21_0_9999999.jpg
    2011-12-21_0_9999999.jpg
    48.3 KB · Views: 470
Last edited:

AndroidGraphix

Senior Member
Apr 4, 2011
1,266
377
Paradise Valley, AZ
FINALLY a New Draw9patch Program

Following is your requirements.

1) Show the outer line pixel being drawn. It really helps to see it being draw9 out. This is a must. The shading you designed helps but it will help much more if we see the border being drawn.

2) Your program draws the line from one end to one end. The original draw9patch leaves at least one pixel at each corner. Have you experienced any problems with your .9.png’s being designed like this?

3) Can you add a copy button or port button to allow the image to be immediately opened up in the old draw9patch editor so we can see how the image stretched? Or at least make it super easy for us to save the path to our draw9patch program from command prompt then press a button to have the image created in your program transfer over to draw9patch.

4) Create a transparent border around the png. With your latest release, there’s only a transparent border on the left and right. The top and bottom should also have a little buffer room to make things equal.

5) A save as button would be nice so we can direct the image to a folder where we want our work to be saved. Even better, give us an option to create a default work folder where our .9.png’s are saved.

6) This is of course much more difficult but would be a nice feature. Being able to compile the .9.png upon save. That would save some time. That would for sure be the icing on the cake.


------------------------------------------------------

I think I solved 1) ~ 5).
And 6) will be available on next release.
Please, check attached file.

And thanks for your donation!

WOW. Your work is amazing and SPOT ON

I really enjoy having the push button that exports the 9.png to the old draw9patch, I'm impressed. The lines around the png certainly helps along with having an even buffer around the image. I'm very excited for the next release.

Up until now, theming .9.png's have been a serious pain and very time consuming. Another donation sent just now...as promised! Thank you sir. We all look forward to the next release.
 
Last edited:

tommytomatoe

Inactive Recognized Developer
Dec 13, 2010
6,282
6,800
34
Knoxville USA
Hey D! Thanks for the linky. I just got back from honeymoon :)

TO imbed youtube...........

Use the YOUTUBE Tags with this in between: 2Wvw1aNXRw4

[youtube ]2Wvw1aNXRw4[/youtube ]

no spaces in between brackets yield this:

 
  • Like
Reactions: AndroidGraphix

AndroidGraphix

Senior Member
Apr 4, 2011
1,266
377
Paradise Valley, AZ
as you know,
it's been a massively complicated calculating job..
i hope you could test it and report me some bug, if any.

and some 'preview' would be available on next release.

merry christmas~

So far, so good. The "Center" feature you added saves a lot of time. That's a very nice feature to have.

Here's a thought.

1) Add a "New Project/New" button so we don't have to close the program to start a new project.
2) Batch open and save, based on your "Center" feature you added. I'm sure we couldn't use this feature on all our .9.png's but the majority of the buttons all use the same "center" feature you added.
 
Last edited:

Elex_kr

Member
Dec 17, 2011
15
47
www.roundrect.kr
1) I couldn't understand why 'new' is needed. Is there any difference between dropping new image on a workspace? Please explain more..

2) Processing entire images inside a folder with same values, good idea! I'd better let it an additional function for a paid version.

Thank you for your ideas!
 
  • Like
Reactions: explodingboy70

wrxtc714

Senior Member
Jul 5, 2008
130
67
Buena Park, California
+ 1

Here's a alternative method I uncovered using Adobe Photoshop.

1.Drag and drop png's into Adobe Photoshop instead of Draw9patch
2.Increase canvass size by 2w and 2h.
3. Use the pen tool to make your corrections like you would in draw9patch.
4. Convert pen tool by right clicking on the line you created and select stroke path/pencil/ok
5. Delete the path
6. save the png as .9.png
7. Compile
I was just about to suggest this same thing, however I use gimp.
But the process is exactly the same except I only add a 1 pixel border usually.
You then select that border so you don't affect the rest of the image when drawing your lines.
You must be good at 9 patching to use this method but after spending so much time with the android 9 patch tool like you said it should be a easy for you.
I don't think it could ever really get easier than this.
I swear I have seen a tutorial a long time ago when I was getting started that showed a guy doing exactly as you described by drawing the lines by hitting shift. I was never able to figure it out.

I am going to try your tool Elex_kr
It sounds very promising.
 
Last edited:

AdamOutler

Retired Senior Recognized Developer
Feb 18, 2011
5,224
9,826
Miami, Fl̨̞̲̟̦̀̈̃͛҃҅͟orida
Following is your requirements.

1) Show the outer line pixel being drawn. It really helps to see it being draw9 out. This is a must. The shading you designed helps but it will help much more if we see the border being drawn.

2) Your program draws the line from one end to one end. The original draw9patch leaves at least one pixel at each corner. Have you experienced any problems with your .9.png’s being designed like this?

3) Can you add a copy button or port button to allow the image to be immediately opened up in the old draw9patch editor so we can see how the image stretched? Or at least make it super easy for us to save the path to our draw9patch program from command prompt then press a button to have the image created in your program transfer over to draw9patch.

4) Create a transparent border around the png. With your latest release, there’s only a transparent border on the left and right. The top and bottom should also have a little buffer room to make things equal.

5) A save as button would be nice so we can direct the image to a folder where we want our work to be saved. Even better, give us an option to create a default work folder where our .9.png’s are saved.

6) This is of course much more difficult but would be a nice feature. Being able to compile the .9.png upon save. That would save some time. That would for sure be the icing on the cake.


------------------------------------------------------

I think I solved 1) ~ 5).
And 6) will be available on next release.
Please, check attached file.

And thanks for your donation!

I would like to say thank you. I don't think clicking the button is good enough. Thank you for improving the infrastructure of development tools.
 

BigFwoosh

Member
Jan 26, 2010
8
1
Awesome, awesome, awesome work. Every time I have to use draw9patch I'm reminded of how long it takes to do such a simple task. Can't thank you enough for the work you've done on this!
 
  • Like
Reactions: Elex_kr

Top Liked Posts

  • There are no posts matching your filters.
  • 14
    Updated.

    Now with,
    + Preview windows
    + Drawable using mouse
    + Batch process
    etc...

    DOWNLOAD FROM HERE
    11
    UPDATED 03-15-12:

    Elex_kr has introduced a NEW DRAW9PATCH Program. Please scroll down through the post to view his work. AND DONATE. This DEV deserves a lot of credit for bringing a new improved program to the rooted community. I can attest that his program is very easy to use and extremely fast. We're working on new ways to improve the program. Please post your comments and suggestions to Elex_kr below.


    03-15-12-Direct link to his latest Better 9-patch Tool

    Here's quick video of what Elex_kr's Better 9-Patch Tool




    Original Post:

    I'm putting this thread together because it's been too long that draw9patch has been in place without any updates or improvements since its release. I'm also posting this because I'm sure there's a dev willing to redesign draw9patch and make it easier to use. Here's a quick video of why we need an improved draw9patch program.



    The main issue for many themers is how time consuming it can be to fill in only ONE pixel at a time. I've been using draw9patch for almost a year and it consumes a large portion of my day. The IDEAL draw9patch would be able to select multiple pixels at the same time. For example, selecting one end of the png and holding down (Shift) while selecting the end point where the pixels would automatically fill in. I'm open to suggestions or comments. Please keep this professional.

    Donation: I'm willing to give any DEV $100 for a newly improved draw9patch program. Conditions as follows:
    1) Must be based off the original draw9patch
    2) Must have the improvements stated above, allowing for multiple pixels to be selected based on holding (CTRL, SHIFT or ALT)
    3) Must have the ability to save the PNG as a .9.png.
    4) Must be compatible with Windows 7.


    *-*-*
    Just to give the dev an idea of how long draw9patch can take. Today I used the program to stretch 59 .9.png's. It took an average of 2 1/2 minutes per 9.png. That's 2 hours and 26 minutes of solid time spent using draw9patch. I could have done these in probably 35 minutes tops if the program was more user friendly and had the above stated actions.


    Attention moderator(s). If this video can be embedded, please correct it.
    9
    Newly updated!!!

    Following is your requirements.

    1) Show the outer line pixel being drawn. It really helps to see it being draw9 out. This is a must. The shading you designed helps but it will help much more if we see the border being drawn.

    2) Your program draws the line from one end to one end. The original draw9patch leaves at least one pixel at each corner. Have you experienced any problems with your .9.png’s being designed like this?

    3) Can you add a copy button or port button to allow the image to be immediately opened up in the old draw9patch editor so we can see how the image stretched? Or at least make it super easy for us to save the path to our draw9patch program from command prompt then press a button to have the image created in your program transfer over to draw9patch.

    4) Create a transparent border around the png. With your latest release, there’s only a transparent border on the left and right. The top and bottom should also have a little buffer room to make things equal.

    5) A save as button would be nice so we can direct the image to a folder where we want our work to be saved. Even better, give us an option to create a default work folder where our .9.png’s are saved.

    6) This is of course much more difficult but would be a nice feature. Being able to compile the .9.png upon save. That would save some time. That would for sure be the icing on the cake.

    DOWNLOAD FROM HERE
    ------------------------------------------------------

    I think I solved 1) ~ 5).
    And 6) will be available on next release.
    Please, check attached file.

    And thanks for your donation!
    7
    Hello,
    I just make a new id in xda to let you know that
    I made an alternative 9 patch tool with Java.

    And you can download it from my blog.

    (sorry, it says that i shouldn't link external ... oh.. i'll attach the '.jar' file.)

    Please try it. Thank you.

    DOWNLOAD FROM HERE
    4
    Alternative to using draw9patch

    Here's a alternative method I uncovered using Adobe Photoshop.

    1.Drag and drop png's into Adobe Photoshop instead of Draw9patch
    2.Increase canvass size by 2w and 2h.
    3. Use the pen tool to make your corrections like you would in draw9patch.
    4. Convert pen tool by right clicking on the line you created and select stroke path/pencil/ok
    5. Delete the path
    6. save the png as .9.png
    7. Compile

    Here's video on how. For now, it's the best alternative to draw9patch.

    This process alone has saved me hours of time. Especially, on large png's.

    http://youtu.be/kwpQ8A9r_Zo

    Updated 12-16-11. Someone out of Korea just created an awesome draw 9 patch program. It's a must see. Link here.
    http://fly-elex.tistory.com/m/entry/the-9-patch-builder