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

Search This thread

xenio2000

Senior Member
May 23, 2009
257
22
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
 

Attachments

  • NinePatch_example.zip
    56.9 KB · Views: 8,262
  • NinePatch_Photoshop.jpg
    NinePatch_Photoshop.jpg
    92.2 KB · Views: 14,831
Last edited:

georgegreco86

Senior Member
Jul 21, 2009
97
0
Las Vegas
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 ..
 

prash

Senior Member
Feb 7, 2009
565
16
Philadelphia
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:

fixthisandroid.png


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.
 
  • Like
Reactions: dywerd

Barina

Senior Member
May 10, 2009
468
10
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..?
 

prash

Senior Member
Feb 7, 2009
565
16
Philadelphia
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..?
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.
 

Honestly77

Senior Member
Dec 10, 2007
297
5
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?
 

georgegreco86

Senior Member
Jul 21, 2009
97
0
Las Vegas
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!
 

nuformzdesign

Senior Member
Apr 1, 2010
161
20
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?
 

nzdcoy

Senior Member
Jul 11, 2010
165
2
Auckland
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?

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.
 
Last edited:

fisha21

Senior Member
Nov 23, 2007
2,331
4,379
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!
 

elbello

Senior Member
Nov 8, 2006
279
40
NYC
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
 

Attachments

  • widget_inbox_background.9.png
    widget_inbox_background.9.png
    5 KB · Views: 306

gruesomewolf

Senior Member
Jan 30, 2011
4,428
8,515
Mocksville, NC
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
 
Last edited:

lawsonmh15

Senior Member
Nov 13, 2010
627
110
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!
 

AndroidGraphix

Senior Member
Apr 4, 2011
1,266
377
Paradise Valley, AZ
Better draw9patch program?

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

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.
 

Top Liked Posts

  • There are no posts matching your filters.
  • 15
    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
    1
    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:

    fixthisandroid.png


    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.
    1
    Ohhhhhh, THAT'S how it works!

    Thank you, xenio2000. Awesome post :D
    1
    Resizing 9.pngs doesnt work for me (shrinks or gets rid of the black boarder) so can you help me ?

    Sent from my HTC Desire X

    use these tutorial, should work

    http://radleymarx.com/blog/simple-guide-to-9-patch/

    also check xda thread

    http://forum.xda-developers.com/showthread.php?t=580351
Our Apps
Get our official app!
The best way to access XDA on your phone
Nav Gestures
Add swipe gestures to any Android
One Handed Mode
Eases uses one hand with your phone