How to draw NinePatch images with Photoshop - .9.PNG

f'n thank you

dude ive been going hard on these .9's and found that making them huge compared to normal is doing better, just dropping it down (resize) from the massive one, to the appropriate filesize yaknow. kinda confusing but hopefully it helps, if i get these down its onnnnnn ..

Nice job on a quick explaination of it, oddly enough I was just working with the draw9patch tool working on google's own images that they sort of messed up as well (you're not alone if you mess up on these..they're tricky) To show you what difference a small dot makes, here is an example:



I plan on submitting the fixed images to google's open source project. Basically their own .9.png file gets stretched out oddly when bigger.

Hopefully the above image shows you the difference the border makes.

so its posible to put 2 dots in top\left.. the question is whats the limit?
can i put 5 dots close to eachother or 3 dots conected togather that make a lilte line..?

Barina said:

so its posible to put 2 dots in top\left.. the question is whats the limit?
can i put 5 dots close to eachother or 3 dots conected togather that make a lilte line..?

Click to expand...

Click to collapse

Actually the MAX is 2 dots, on left and top, anything more and Eclipse starts freaking out and won't compile at all. I used 2 dots because I saw it being used in official android source images for the pull down tray image. Figured if it works for them, it'll work for us.

Also as far as making a LINE, its fine but I'd stay away from full lines on top and left. You CAN get away with it, but it would mean that entire line area of the image will stretch.

in some ways stretch could be better.. thanks its good to know

I have so much trouble with .9s...UGH! This KIND of helps. I dont understand why an extra dot makes a difference or why it's their. So you can't just draw those 2 dots on the left anywhere on the left side? And is there a certain amount of pixels needed to be filled or not filled on the right and bottom?

bretheren

okay,
so i think i am getting it. the image will be stretched via the black lines? kind of like a guideline type deal huh? if i could figure these damn things out it would make life that much easier!

xenio2000 said:

If you want draw a .9.png (NinePatch) image in Photoshop...

Click to expand...

Click to collapse

wow, thank you for this thread!!

Ohhhhhh, THAT'S how it works!

Thank you, xenio2000. Awesome post

near as I can figure (and I may be wrong) but the bottom and right side lines denote the entire content area. the single dots on the top and left define the 1- pixel column or row that is allowed to be stretched. Remember, a line of pixels is not a 1- dimensional line, it has width and area as well.

If you have photoshop, try this. Open up any random picture and make a 1 pixel selection (either vertically or horizontally) and then use the free transform tool and scale it in the direction perpendicular to the selection. For example, if you make a 1 pixel selection vertically across the middle of the image, scale it horizontally, you'll see what I'm trying to get at.

I am curious though, will photoshop automatically recognize the black lines on the sides as defining these areas and automatically append the file name to *.9.png?

nuformzdesign said:

I am curious though, will photoshop automatically recognize the black lines on the sides as defining these areas and automatically append the file name to *.9.png?

Click to expand...

Click to collapse

cs4 doesn't. you can quite easily *accidentally* delete the black dots without it complaining or even noticing.

to the OP: thanks a bunch! until now editing .9. files have been too daunting a task.

Thanks for both of the examples at the top. I just tried Draw9Patch again and now I'm styling but good. Great job guys/gals.

Thanks a lot

Thanks a lot.
I can finish my theme for desire.

Thanks for the excellent, concise post. Finally able to finish my custom Archos Gen 8 framework!!

Mainly posting this comment to bring this post back into the light of day - far too useful to be hidden away!

I need some help...
I've made a 9.png file and it looks fine on the draw9patch tool, but when I put it in the apk, sign it and install it, it doesnt get stretched properly.

Any ideas?
Attached is the 9.png file

Ok so maybe Im missing something and I feel kinda dumb asking. However after I create the image I input the lines using draw9patch, it looks good, but when I add it to my framework-res.apk and push it to my phone I can see the lines. In other words the image looks fine and stretches out ok, but I can see the black lines I created in the draw9patch. Am I missing a step here? I really hate these .9.png's, they are really driving me nuts. I do thank you though for shedding alot more light on what was a very dim area!
NEVERMIND, duh. Im using xUltimate. Thanx though dude

Been trying to figure this out too - I had a feeling that there was some type of compiling I had to do with these draw9 images but hadn't read about it anywhere else. Thanks for mentioning the xUltimate tool.

Download the xUltimate tool here

I've been going nuts trying to theme the aosp dialer. I finally have (or thought I had) the .9 issues figured out, but now I can't a useable apk. Can someone please help me out here?

Here is the output I get upon recompiling:

-----------------------------------------------------
[*] Phone.apk
-----------------------------------------------------
Recompiling Phone.apk folder...
I: Smaling...
I: Building resources...
res\drawable-hdpi\btn_in_call_main_selected.png:0: error: Resource entry btn_in_call_main_selected is already defined.
res\drawable-hdpi\btn_in_call_main_selected.9.png:0: Originally defined here.
Exception in thread "main" brut.androlib.AndrolibException: brut.common.BrutException: could not exec command: [aapt, p, -F, C:\Users\Matt\AppData\Local\Temp\APKTOOL8821811691438883001.tmp, -I, C:\Users\Matt\apktool\framework\1.apk, -S, C:\androidsdk\platform-tools\xdaAutoTool_V2.0.0_Beta\xdaAutoTool\_INPUT_APK\Phone\res, -M, C:\androidsdk\platform-tools\xdaAutoTool_V2.0.0_Beta\xdaAutoTool\_INPUT_APK\Phone\AndroidManifest.xml]
at brut.androlib.res.AndrolibResources.aaptPackage(Unknown Source)
at brut.androlib.Androlib.buildResourcesFull(Unknown Source)
at brut.androlib.Androlib.buildResources(Unknown Source)
at brut.androlib.Androlib.build(Unknown Source)
at brut.androlib.Androlib.build(Unknown Source)
at brut.apktool.Main.cmdBuild(Unknown Source)
at brut.apktool.Main.main(Unknown Source)
Caused by: brut.common.BrutException: could not exec command: [aapt, p, -F, C:\Users\Matt\AppData\Local\Temp\APKTOOL8821811691438883001.tmp, -I, C:\Users\Matt\apktool\framework\1.apk, -S, C:\androidsdk\platform-tools\xdaAutoTool_V2.0.0_Beta\xdaAutoTool\_INPUT_APK\Phone\res, -M, C:\androidsdk\platform-tools\xdaAutoTool_V2.0.0_Beta\xdaAutoTool\_INPUT_APK\Phone\AndroidManifest.xml]
at brut.util.OS.exec(Unknown Source)
... 7 more
Done!

Better draw9patch program?

xenio2000 said:

If you want draw a .9.png (NinePatch) image in Photoshop just make your image with a 1px transparent for each border and draw with a pencil 1px size black color #000000 the area you want to use for the content and the stretchable area.

Save it with "save for web" in png-8 or png-24 (if you use a lot of color)
in the option check Transparency, matte none, metadata none.

you can check it with the draw9patch tool in the sdk.
get more info about the NinePatch here: http://developer.android.com/guide/developing/tools/draw9patch.html

Click to expand...

Click to collapse

I could really use your help. I read your thread on creating a one-pixel border and I'm fairly familiar with Cs5 but could use some help.

How do I create the one pixel border? I've tried creating another layer but that's not right.

After that, how do I create the pixel lines as shown in your example? I try using the pencil but I'm pretty sure, it's not creating an exact one pixel border.

I can't stand using draw9patch. It takes me hours to do a theme because of it's one pixel-at-a-time limitations. This will save me hours of time. Thanks and I look forward to your reply.