19 replies to this topic

[jayrod]

Hello. If you are reading this you probably are or have had issues with these wonderful little pains in the butt. While there are lots of tutorials out there, for some reason I just couldn't wrap my head around what they were saying and I will admit,after reading 100's of posts, I probably missed it. Although the way I have been editing them in the past worked...it takes much longer and the results were not as good...plus it wasn't the "correct" way. If you have searched for what .9's are you realize that the idea and function is rather awesome as it allows for images to have smaller file sizes while being able to fill a specific field and helps to cut the size of .APKs.

The biggest thing I was not understanding was the addition of using draw9patch to give the image it's stretching patches ( The black lines) for 2 reasons.

1. Draw9patch is a difficult program for me to use (..as is using apktool which is why I wrote this tutorial on an alternative)
2. The fact that I was doing my edits WRONG!!!!

I read repeatedly how important it was to keep from altering the black patch lines but my problem was, the .9's I was editing didn't have patches...and I didn't know why. Here is why and a quick and simple guide to doing them correctly.

[jayrod]

What I was doing wrong

Basically...


 1.png   151.66KB   69 downloads

I was editing the wrong files! I was unzipping the compressed images and doing my edits from those. Now,before I make myself sound really dumb,yes..I know that when you decompile a .APK , that it decompresses everything so that XML's etc. can be edited . But what I didn't realize was that it also decompresses the hidden information in those .9's and you can edit those all day long , but you will always see those black bars in your theme. (I'll fill you in later on how dumb I felt when I finally understood what I was doing wrong)


YES...I ADMIT..I AM DUMB!

OK..let's start doing this the RIGHT way.First,decompile whatever .APK you want with whatever your preferred app. I am using VTS so this is what my decompiled framework-res drawable-hdpi folder looks like.

 2.png   178.77KB   80 downloads

First thing we want to do is make a copy of the image that we want to edit and place it somewhere you'll remember,just in case you get an error in apktool because you destroyed the patch.

Select a .9 and open it up in Photoshop,GiMP or whatever image editor you like.

Select the rectangular marquee tool and make a selection around as much of the image that you are trying to edit

 3.png   160.52KB   84 downloads

 4.png   163.83KB   87 downloads

And create a new layer

 5.png   173.75KB   87 downloads

Repeat the rectangular marquee tool around the image you are wanting to change but this time delete it..this is what you will have...

 6.png   161.88KB   86 downloads

Now,select the top layer so you can edit it. The easiest things you can do are to either change the Hue/Saturation or to create a layer style such as a color overlay...well stick to the basics for now.

 7.png   214.76KB   80 downloads

Whatever color you have selected is the color you will be altering the image..but to see the changes,you'll need to click the colorize button. As you can see the black bars are still nice and black...and aren't being touched.

 8.png   176.62KB   78 downloads

You can add your special little touches, change the transparency...whatever. Just make sure that any of your edits such as glow effects do not encroach too close to where the patch lines are going to be because there is a good chance you'll get an error when compiling. Once you are done,merge the layers (delete any that you are not using first) And just save. if you did it correctly,it will automatically overwrite the original.

 9.png   220KB   82 downloads

And here is our newly created .9

 10.png   269.6KB   72 downloads

Now recompile....

And here is our compressed .9

 11.png   224.09KB   62 downloads



Now...because I was hung up on the whole draw9patch thing and since I never fully understood what recomiling a .9 actually did, but didn't want to be that kid in class that asks the teacher a question in fear of being laughed at..I wrote this....which is almost like asking that question and being laughed at! Hahahaha

Now you understand why I felt so DUMB!

[jayrod]

Here is what our new .9 looks like compared to the original


 Screenshot_2013-02-26-19-26-50.png   295.65KB   43 downloads  Screenshot_2013-02-26-19-47-18.png   238.6KB   42 downloads


I hope that this helps somebody!

[Bama]

nice,detailed write up sir

[usmcamgrimm]

Interesting...I'm going to have to get more in depth into using VTS. I have been doing 9 patches completely different, maybe this will help. Thanks

[ZKK007]

Good write up! This is how I've been doing it in the past after 24v helped explain .9's to me Before that I could recolor, but images were all over the place!

[Maxxaholic]

Great write up. Someday I may get into theming.

[jp1044]

Nice writeup! Will definitely be referencing this.

[jayrod]

Here is a good explanation of how 9 patch images work, and what the guides do.
http://developer.and...html#nine-patch

And here is a good image showing them.

Thanks for that..I have looked for something like that for a while

[tucstwo]

Moving to theming how-to (new section)

[usmcamgrimm]

My problem with 9 patches stems from transparency. On my new theme I'm trying to modify text boxes and some other things and getting errors. Is there a rule for setting the alpha of a pixel next to the black borders? Some sort of allowable threshold perhaps?

Sent from my DROID RAZR using Tapatalk 2

[jayrod]

What are you using to edit images?

Sent from my Flying Spyder that likes jelly beans

[jayrod]

Also..these may help understand how to edit with the shadow/ glow effects..I break them down into 3 layers..

 uploadfromtaptalk1362484624501.jpg   72.77KB   25 downloads

 uploadfromtaptalk1362484635941.jpg   73.43KB   27 downloads

 uploadfromtaptalk1362484655251.jpg   79.36KB   27 downloads

Sent from my Flying Spyder that likes jelly beans

[usmcamgrimm]

What are you using to edit images?

Sent from my Flying Spyder that likes jelly beans

I've been using Photoshop and paint.net depending on the image. I followed this thread to edit through VTS and had the same issue.
Trying to work on some semi-transparent boxes and stuff for the theme I'm working on.

Sent from my DROID RAZR using Tapatalk 2

[jayrod]

OK...here is my secretest non secret ...Open them in Image Ready then import them into Photoshop

[jayrod]

Never tried fireworks.. and this has been the only thing I've used Image Ready for.

Sent from my Icarus HD Edition Bionic

[mrlolli]

hey, jayrod...thanks an awful lot for your writeup. i have been studying your op for a couple of days now, and i finally got it to work . Thanks for spelling it all out the way that you did so dummies like me can do this too

[jp1044]

Or edit them in fireworks. Photoshop and gimp have problems with indexed png's.

Ooooooohhh I just got Fireworks not too long ago. Might have to try it out on some pngs

Sent from my Nexus 4 using Tapatalk 2