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

Search This thread
By:
Advanced…
Jumba

Jumba

Senior Member
Nov 16, 2008
1,155
704
Johannesburg
It also works if you put a 1px white border. Doesn't have to be transparent. This may cause issues though if you want to decompile the images again.

Simplest way is to increase your canvas size by 2px vertically and 2px horizontally. This should create a 1px transparent border all the way around. Then make your marks using the pencil tool at 1px size (100% flow + 100% fill) and #000000 colour. Make 100% sure it's at 1px size.

It's wise to keep the 9-patch info on its own layer.

Then, select the whole image (CTRL+A) > modify selection > contract by 1px > hit CTRL+SHIFT+I to select inverse. Then select each layer one by one (except the one with the 9-patch info) and hit the DEL button - just to make sure there's nothing in the border that shouldn't be there.

hth
 
Last edited:
D

djdaveoc

New member
Sep 7, 2012
3
0
Sorry if this is a stupid or noob question but...
I'm new to Android development and need to make a .9.png file for my game splashscreen.
Can someone please give me an exact step-by-step on how to open the 9 patch tool?
I don't know what it means by opening it from a terminal.
I'm on a Windows 7 64-bit box using Eclipse etc.

Thanks,
David
 
Last edited:
TUN_SD

TUN_SD

Inactive Recognized Themer
Oct 21, 2011
3,575
4,812
here and there
tunsd.de
OnePlus 8T
djdaveoc said:
Sorry if this is a stupid or newb question but...
I'm not to Android development and need to make a .9.png file for my game splashscreen.
Can someone please give me an exact step-by-step on how to open the 9 patch tool?
I don't know what it means by opening it from a terminal.
I'm on a Windows 7 64-bit box using Eclipse etc.

Thanks,
David
Click to expand...
Click to collapse

right click on the image, go to "open with..", than browse to your android-sdk folder -->9.patch tool.
now you should be able to open every png with right click, open with 9.patch tool
 
D

djdaveoc

New member
Sep 7, 2012
3
0
TUN_SD said:
right click on the image, go to "open with..", than browse to your android-sdk folder -->9.patch tool.
now you should be able to open every png with right click, open with 9.patch tool
Click to expand...
Click to collapse

I found the .bat file here:
C:\Users\Administrator\AppData\Local\Android\android-sdk\tools
This is a new server and I had forgotten to show system folders and files in Windows folder options.
 
Last edited:
TUN_SD

TUN_SD

Inactive Recognized Themer
Oct 21, 2011
3,575
4,812
here and there
tunsd.de
OnePlus 8T
does anyone knows what the red boarder is for? it is from 4.2 source. can´t find any discription for it.
 

Attachments

  • btn_default_pressed_holo_dark.9.png
    btn_default_pressed_holo_dark.9.png
    905 bytes · Views: 940
D

denley

Member
Nov 27, 2012
5
1
Adelaide
RED_ said:
Anyone know if it's possible to scale an image only by height? I don't need 9patch to scale the width.
Click to expand...
Click to collapse

Just leave the top border empty and it wont stretch horizontally (unless it has to)


For those asking about it, having more than one region in the border just means that more than one region of the image will stretch. If one region is twice the size (e.g. two pixels wide vs one pixel wide) then it will stretch twice as much.
 
HandyBesitzer

HandyBesitzer

Senior Member
Jan 29, 2012
590
110
Köln
Hi,

i just tried this with an png file for an Theme pack. I use PSE.
i made my image with a 1px transparent for each border and filled 1px with black color #000000. Than save for web, png-8, ... but it doesn't work. Maybe you can have a look at my file and my options.

==EDIT==

i got it. i forgot to compile
 

Attachments

  • Unbenannt.JPG
    Unbenannt.JPG
    100.8 KB · Views: 102
  • htc_pin_asset_rest.9.png
    htc_pin_asset_rest.9.png
    829 bytes · Views: 609
Last edited:
Kevalvino

Kevalvino

Senior Member
Jun 1, 2013
115
16
24
Yogyakarta
prash said:
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.
Click to expand...
Click to collapse

Editing .9 png is just for stretching the image? or also can edit the entire image such as filling with another color?
 
You must log in or register to reply here.

Similar threads

Phromik
Post your Phone Home Screen **BE APPROPRIATE**
Replies
153K
Views
34M
Thebear j koss
Thebear j koss
zHk3R
[THEMES] WidgetLocker Theme Collection
Replies
1K
Views
17M
F
Fytdyh
zHk3R
[FAQ] WIDGETLOCKER | Documentation and Help thread! | We have answers!
Replies
4K
Views
1M
pitbullmommy45245
pitbullmommy45245
blackbearblanc
Black Bear Blanc _No-root theming [guides, images, walls, icons and widgets]
Replies
5K
Views
1M
_frog hair
_frog hair
jamieaxall
What does your MIUI look like?
Replies
28K
Views
7M
hussyhussy1122
hussyhussy1122

Top Liked Posts

24 Hours All time
  • There are no posts matching your filters.
  • 15
    xenio2000
    xenio2000
    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
    View
    1
    prash
    prash
    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.
    View
    1
    Super Jamie
    Super Jamie
    Ohhhhhh, THAT'S how it works!

    Thank you, xenio2000. Awesome post :D
    View
    1
    brainscollector
    brainscollector
    BatEarsJoe said:
    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
    Click to expand...
    Click to collapse

    use these tutorial, should work

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

    also check xda thread

    http://xdaforums.com/showthread.php?t=580351
    View

New posts