Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,738,086 Members 54,375 Now Online
XDA Developers Android and Mobile Development Forum

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

Tip us?
 
nuformzdesign
Old
#11  
Senior Member
Thanks Meter 19
Posts: 146
Join Date: Apr 2010
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?
LG G2 (LS970)
__________

Horsepower is how fast you can hit a guardrail. Torque is how far you drag it.
 
nzdcoy
Old
(Last edited by nzdcoy; 23rd September 2010 at 04:19 AM.)
#12  
Senior Member
Thanks Meter 1
Posts: 165
Join Date: Jul 2010
Location: Auckland
Quote:
Originally Posted by nuformzdesign View Post
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.
 
bubbason
Old
#13  
Junior Member
Thanks Meter 0
Posts: 2
Join Date: Jun 2010
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.
 
kotaekyun
Old
#14  
Junior Member
Thanks Meter 1
Posts: 20
Join Date: Nov 2009
Location: Jeju
Default Thanks a lot

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

Incite - X1i - Desire & HD2
 
fisha21
Old
#15  
fisha21's Avatar
Recognized Contributor / Themer
Thanks Meter 3824
Posts: 2,149
Join Date: Nov 2007

 
DONATE TO ME
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
Old
#16  
elbello's Avatar
Senior Member
Thanks Meter 36
Posts: 264
Join Date: Nov 2006
Location: NYC

 
DONATE TO ME
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:	274
Size:	5.0 KB
ID:	568620  
Phone: Sony Xperia Z1s
Tablet: Sony Xperia Z2

Don't forget the Thanks button!
 
gruesomewolf
Old
(Last edited by gruesomewolf; 23rd April 2011 at 05:30 AM.) Reason: left out
#17  
gruesomewolf's Avatar
Senior Member
Thanks Meter 7752
Posts: 4,167
Join Date: Jan 2011
Location: Mooresville, NC

 
DONATE TO ME
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
 
jimbush3
Old
#18  
jimbush3's Avatar
Senior Member
Thanks Meter 94
Posts: 294
Join Date: Mar 2011
Location: Baton Rouge, LA

 
DONATE TO ME
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
 
lawsonmh15
Old
#19  
Account currently disabled
Thanks Meter 115
Posts: 627
Join Date: Nov 2010
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!
 
AndroidGraphix
Old
#20  
AndroidGraphix's Avatar
Senior Member
Thanks Meter 374
Posts: 1,229
Join Date: Apr 2011
Location: Paradise Valley, AZ

 
DONATE TO ME
Default Better draw9patch program?

Quote:
Originally Posted by xenio2000 View Post
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.

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes