FORUMS

Analysis & Opinion

Top Forum Discussions

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

257 posts
Thanks Meter: 22
 
By xenio2000, Senior Member on 4th November 2009, 09:47 PM
Post Reply Subscribe to Thread Email Thread
19th April 2010, 03:54 AM |#11  
Senior Member
Thanks Meter: 20
 
More
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?
 
 
6th September 2010, 01:56 PM |#12  
Senior Member
Flag Auckland
Thanks Meter: 1
 
More
Quote:
Originally Posted by nuformzdesign

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 by nzdcoy; 23rd September 2010 at 04:19 AM.
8th October 2010, 04:02 AM |#13  
Junior Member
Thanks Meter: 0
 
More
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.
26th October 2010, 06:53 AM |#14  
Junior Member
Flag Jeju
Thanks Meter: 1
 
More
Thanks a lot
Thanks a lot.
I can finish my theme for desire.

12th April 2011, 04:38 PM |#15  
fisha21's Avatar
Recognized Contributor / Themer
Thanks Meter: 4,277
 
Donate to Me
More
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!
14th April 2011, 07:34 PM |#16  
elbello's Avatar
Senior Member
Flag NYC
Thanks Meter: 41
 
Donate to Me
More
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
Attached Thumbnails
Click image for larger version

Name:	widget_inbox_background.9.png
Views:	279
Size:	5.0 KB
ID:	568620  
19th April 2011, 08:17 AM |#17  
gruesomewolf's Avatar
Recognized Contributor
Flag Mooresville, NC
Thanks Meter: 8,506
 
Donate to Me
More
Unhappy
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 by gruesomewolf; 23rd April 2011 at 05:30 AM. Reason: left out
24th April 2011, 03:39 AM |#18  
jimbush3's Avatar
Senior Member
Flag Baton Rouge, LA
Thanks Meter: 94
 
Donate to Me
More
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
11th October 2011, 05:21 AM |#19  
Account currently disabled
Thanks Meter: 115
 
More
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\APKTOOL8821811691 438883001.tmp, -I, C:\Users\Matt\apktool\framework\1.apk, -S, C:\androidsdk\platform-tools\xdaAutoTool_V2.0.0_Beta\xdaAutoTool\_INPUT_A PK\Phone\res, -M, C:\androidsdk\platform-tools\xdaAutoTool_V2.0.0_Beta\xdaAutoTool\_INPUT_A PK\Phone\AndroidManifest.xml]
at brut.androlib.res.AndrolibResources.aaptPackage(Un known 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\APKTOOL8821811691 438883001.tmp, -I, C:\Users\Matt\apktool\framework\1.apk, -S, C:\androidsdk\platform-tools\xdaAutoTool_V2.0.0_Beta\xdaAutoTool\_INPUT_A PK\Phone\res, -M, C:\androidsdk\platform-tools\xdaAutoTool_V2.0.0_Beta\xdaAutoTool\_INPUT_A PK\Phone\AndroidManifest.xml]
at brut.util.OS.exec(Unknown Source)
... 7 more
Done!
11th December 2011, 08:03 PM |#20  
AndroidGraphix's Avatar
Senior Member
Flag Paradise Valley, AZ
Thanks Meter: 378
 
Donate to Me
More
Better draw9patch program?
Quote:
Originally Posted by 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/d...raw9patch.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.
12th December 2011, 07:14 AM |#21  
Jumba's Avatar
Senior Member
Flag Johannesburg
Thanks Meter: 526
 
Donate to Me
More
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 by Jumba; 12th December 2011 at 07:23 AM.

Read More
Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes