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
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.
Related
Like many other's i have tried to hop onto the skinning boat after the release of metamorph.
and i think like many others i have problems with those .9.png files. i read stericsons write up on them but i cant make any sense out of it.
therefore i would like to ask from any of you that do understand them: could you make a short video describing the editing of 1 file?
since i'm a visual kind of guy this would 99% sure make me understand it and make me able to continue with my theme.
i would really really apreciate this guys..
you can power up draw9patch and play with it and you will understand it..
few thing you should know
when you load a regular png file(not .9.png) the tool automatically expend the size by 1 pixel each side(up down left right)
then you can edit
the left and top sides represents stretchable area.. you should put there one or two black pixels.. no more!(for each side)
the right and bottom sides are represents the content area.. you can fill it how you like.. but keep it one line for each side
then you need to save it.. when you save it the tool adds a .9 to the end of the file name
the next move is to compile the file with eclipse........
i dont have time to make a vid right this second, but im willing to help you out...first tell me, have you checked out the source code? It has all the .9.png's UNCOMPILED, which means that they still have the guides drawn and you can take a look at certain images to get an idea of how the guies SHOULD be drawn for a certain image.
Brief explanation...The TOP and LEFT sides of the 1px border are where you will draw a single (or double is allowed) guide marker to mark where the image will be stretched. You are allowed up to 2 guides on the top and 2 on the left, but no more.
On the BOTTOM and RIGHT sides of your 1px border you will draw guide markers for the "Content area" of the image. That is to say, if you have a button that will contain text, image, or other content, you draw a line across the bottom edge from one side of the button to the other to center the content in the center of the button. Then the same for the right side to make it centered vertically.
You should check out the source and look at those images in there, that'll help you see what draw9patch does and how certain images should look when they're done.
Then you have to compile the images in eclipse to get them to work right. just start a new Android project and choose "From existing Source", then choose one of the samples that comes with the SDK...i use home.apk. then after you edit the .9.png's with draw9patch, you dump them into a folder (i.e. res/drawable or res/drawable-land) in the project, overwrite whatever images may already be there, and then right click the root of the project in the tree view and go down to "Android Tools" and pick "Export Unsigned package". (it doesnt matter if its signed cuz your just gonna extract it for the images)
This will save an .apk file to your eclipse workspace directory. just copy it to your desktop and extract it to get the freshly compiled .9.png's and inject them into your .apk or update.zip...then sign and flash!
Hope this helps...
-BMFC
ok so the problem for me seems to lie with eclipse, atm i'm stuck on the fact that when i try to open an existing project, i dont have the AndroidManifest.xml and when i extract it from some other theme, it says it cant be parsed. so eehm where exactly should i find a unparsed AndroidManifest.xml or what should be in it?
you already got me a lot further! thanx!
did you try using a different sample application? there are some that throw some errors when i first try to open them as projects but home.apk seems to work fine for me. i tried to figure out why youd be getting that error but i dont seem to get it for any of my samples so maybe its a problem with your SDK? im not sure but here is my AndroidManifest.xml from the home.apk sample, it works for me so it SHOULD work for you. if not you may have a deeper issue going on. anyways just drop the ".txt" from the end of the filename and drop it in [YourSDKdirectory]/platform/Android 1.6/samples/Home/ and then try to open as existing project again. Lemme know if it works...
-BMFC
View attachment AndroidManifest.xml.txt
Is there a way that you can make .9 images on photoshop? Or someway to get around using the 9 tool found in the sdk?
AndroidFiend said:
Is there a way that you can make .9 images on photoshop? Or someway to get around using the 9 tool found in the sdk?
Click to expand...
Click to collapse
yeah, you just give the image a 1px border on all sides and then draw the guides on the border and then save it and compile with eclipse...its the same basic thing, the draw9patch tool just automates most of it for you.
-BMFC
Hey, I'm also one of the people who jumped in the Metamorph bandwagon(not that it's bad), and I'm also having trouble with .9.png's.
In my case, I downloaded an existing Metamorph theme, and I'm basically recoloring some .9's here and there. So, is it possible to just open the .9's in Photoshop, recolor them, then save it as normal? or do I still have to recompile it in Eclipse?
Thanks in advance.
bmfc187 said:
i dont have time to make a vid right this second, but im willing to help you out...first tell me, have you checked out the source code? It has all the .9.png's UNCOMPILED, which means that they still have the guides drawn and you can take a look at certain images to get an idea of how the guies SHOULD be drawn for a certain image.
Brief explanation...The TOP and LEFT sides of the 1px border are where you will draw a single (or double is allowed) guide marker to mark where the image will be stretched. You are allowed up to 2 guides on the top and 2 on the left, but no more.
On the BOTTOM and RIGHT sides of your 1px border you will draw guide markers for the "Content area" of the image. That is to say, if you have a button that will contain text, image, or other content, you draw a line across the bottom edge from one side of the button to the other to center the content in the center of the button. Then the same for the right side to make it centered vertically.
You should check out the source and look at those images in there, that'll help you see what draw9patch does and how certain images should look when they're done.
Then you have to compile the images in eclipse to get them to work right. just start a new Android project and choose "From existing Source", then choose one of the samples that comes with the SDK...i use home.apk. then after you edit the .9.png's with draw9patch, you dump them into a folder (i.e. res/drawable or res/drawable-land) in the project, overwrite whatever images may already be there, and then right click the root of the project in the tree view and go down to "Android Tools" and pick "Export Unsigned package". (it doesnt matter if its signed cuz your just gonna extract it for the images)
This will save an .apk file to your eclipse workspace directory. just copy it to your desktop and extract it to get the freshly compiled .9.png's and inject them into your .apk or update.zip...then sign and flash!
Hope this helps...
-BMFC
Click to expand...
Click to collapse
hey brotherin ..
i didnt have to do that at all. just make sure you have a fresh .png to work with.
)i.e - ballsack.png - wanna stretch it so the sack is in the middle of png.
)do the lines up top and left like stated .. but the guides really arent that important at the bottom.
)next you will than get it to your liking - watch the right side of screen in the example pane, you can see the image shifting - hence you can shift gradients and such with more guide lines behind the first pixel that you mark for guide line. get it?
)than you save the file from the "File" option as a .9.png file.
)and walla its a .9 that can be shfted with the existing metadata that is there.
just dont get too advanced or imsure it wont work to well.i have edited all kinds of them in PSCS4 and than the .9 editor from HTC. Its hard as **** to do. but it pays off. hope this helps.
like bmfc said, get the uncompiled .9.png from the source. makes it so much easier.
then what I do is
open the source .9.png in cs4
marquee tool, and select all content except the guidelines, make it invisible
save that image as ex. guide.png.
take all the images that look the same i.e pressed/selected/default of the same images
open them and the guide.png in photoshop, copy and paste the modified .9.png onto the guide.png, then I save as the original image, repeat as many times as needed,
then when done with that before I compile, I move all of the images with guidelines to a folder ex. guidelines, so that I will have them for future use.
then follow what bmfc said to compile them in eclipse.
check out this video walthrough for working with the .9.png files.
http://www.youtube.com/watch?v=Lf1l9JV9JBw
thanks for the info
the youtube link was a great help
less frustrated....and need improvement but at least getting better and getting the hang of it
the attachment was just for kicks and practice
takumi2k4 said:
Hey, I'm also one of the people who jumped in the Metamorph bandwagon(not that it's bad), and I'm also having trouble with .9.png's.
In my case, I downloaded an existing Metamorph theme, and I'm basically recoloring some .9's here and there. So, is it possible to just open the .9's in Photoshop, recolor them, then save it as normal? or do I still have to recompile it in Eclipse?
Thanks in advance.
Click to expand...
Click to collapse
completely legit. ive been doing it now for a while, works fine. after editing in photoshop, just close the image and click ok when it asks if you want to save the changes.
ive been having some trouble editing the .png files from the Facebook.apk.....
all im trying to do is replace the widget background png but it keeps sizing it wrong once its changed...
I am guessing this has to do with the fact that it's a .9.png but ive messed with it in draw9patch and i just cant seem to make it work
Are you compiling your .9's?
Had exactly the same problem, tried exactly the same solution
It turns out that the all draw9patch tool does is adding 1 pixel wide black stripes that define which area is resizable and which is fixed plus it shows you a preview. But you can as well do this in normal graphic editing program. The real magic happens when you compile a project containing png's with these black bars: the image is cropped from 1 pixel border containing the extra bars and necessary information is stored in the image itself.
I don't know if there even is a method of converting only the png's without setting up an entire development environment, so reading on how to do that might be a good starting point. Note that you don't need any fancy programming skills here, just compiling some simple example app should do the trick if you add your png's to it. Can't give you any details on the process since it's still something i have to try myself
Or is there a simpler way - just running the png's trough the compiler without actually setting up a project?
ffff00 said:
Are you compiling your .9's?
Click to expand...
Click to collapse
no i wasn't .. and obviously that was my problem.. got it all sorted out now though
Big question. When you rotate the phone, the status bar background (in themes like Darkness, with a design) gets messed up because it's shaped for our screen and not a small piece that gets tiled like the original. Can you make a landscape version of the background? I noticed in TouchWiz30Launcher.apk there is a homescreen_icon_bg.png and homescreen_icon_bg_h.png the latter being for a horizontal orientation of the launcher. Can we apply this concept to a custom made portrait AND landscape drawer background in twframework-res.apk? I would really like to know if it is possible, but am not asking for the creation of the background. I can make my own, but I need to know how to make it work.
I think you have to create a layout-land and layout-port folder and put something in there. Hopefully someone else will chime in.
A simpler idea might be to modify status_bar_expanded.xml to have multiple images for the background and bottom bar, like 3 where the center is fixed and the outer 2 are tiled matched up to look seamless of course. Or just allow certain parts to be stretched and some not with draw9patch.
CuriousTech said:
I think you have to create a layout-land and layout-port folder and put something in there. Hopefully someone else will chime in.
A simpler idea might be to modify status_bar_expanded.xml to have multiple images for the background and bottom bar, like 3 where the center is fixed and the outer 2 are tiled matched up to look seamless of course. Or just allow certain parts to be stretched and some not with draw9patch.
Click to expand...
Click to collapse
Thanks a lot for your post, I looked into status_bar_expanded but couldn't find anything applicable. Looked at status_bar.xml and it contains all the info on status_bar_background in the vertical position. How would you put it all into horizontal? Would you have to edit the existing xml or make a new one in layout-land? Could I just copy it into layout-land and edit in some new filenames and stuff?
EDIT: You know how to signify a file it says @drawable/statusbar_background? Does this actually refer to status_bar_background.9.png? And how would you signify a drawlable-land destination? @drawable-land/statusbar_background?
That's mostly what I don't understand yet. In framework-res there are 3 folders:
layout
layout-land
layout-port
icon_menu_layout.xml is in land and port and not in just layout. I think because layout is default for both, and land or port is used for those modes if the file doesn't exist in layout. Just like an xml in drawable can replace an image if the same name is used. But I think there's more to it than that. I tried creating a layout-land and layout-port and moved status_bar_expanded.xml to both and it looked normal both ways. I would think that layout-land would automatically use the drawable-land images too. Something else is missing.
EDIT: Oh yes @drawable/statusbar_background is the png in drawable-hdpi, unless there's actually a drawable/statusbar_background.xml which would make it use that instead. I just don't know where drawable-land-hdpi fits in.
Inside the XML there is a "vertical" and "horizontal" section, you'd have to change that too. I have changed it and will try it tonight in my framework. I just don't understand the references it makes too well...
I've been trying to find a simple reference, but I guess most of it's here:
http://developer.android.com/guide/topics/ui/layout-objects.html
Or around that area of the docs. The vertical/horizontal I think is the alignment of objects in a group. I don't think it has to do with land/port.
This looks interesting too. I just found it. It looks like a way to view layouts on the computer.
http://developer.android.com/guide/developing/tools/hierarchy-viewer.html
CuriousTech said:
I've been trying to find a simple reference, but I guess most of it's here:
http://developer.android.com/guide/topics/ui/layout-objects.html
Or around that area of the docs. The vertical/horizontal I think is the alignment of objects in a group. I don't think it has to do with land/port.
This looks interesting too. I just found it. It looks like a way to view layouts on the computer.
http://developer.android.com/guide/developing/tools/hierarchy-viewer.html
Click to expand...
Click to collapse
I honestly don't know what that stuff means with a headache, so I can't understand what the links refer to, sorry
It's all really disorganized or I'm just used to Microsoft docs. The xml corelates with the android classes for coding java. So xml is used sort of like html tables where everything is nested so you can have rows or collumns of buttons (horiz/vert) or menus or whatever, but the elements used are all the members of the android class. It's just so hard to find the meaning of each one.
CuriousTech said:
It's all really disorganized or I'm just used to Microsoft docs. The xml corelates with the android classes for coding java. So xml is used sort of like html tables where everything is nested so you can have rows or collumns of buttons (horiz/vert) or menus or whatever, but the elements used are all the members of the android class. It's just so hard to find the meaning of each one.
Click to expand...
Click to collapse
Crap 10char
8/14/2011 Update: See this post for details. Now you can make circular progress bars, dotted progress bars, the text is anti-aliased and smoothed, and more!
Attached is a very simple, small Windows .NET application that will generate a 101 Battery Icon images (for percentages 0-100) with a growing battery indicator bar and also the battery percentage text using the font, style, format and position that you desire.
Using an XML configuration file and some image templates, you can quickly generate a wide range of icons for your battery icon theme.
To start, just unzip the files into a folder and open up the "Config.XML" file in a text editor. Here's the one I've included to use as a guide/template/example:
Code:
<?xml version="1.0" encoding="utf-8" ?>
<batteryIcon>
<output folder="output" filename="stat_sys_battery_{0:0}.png" />
<batteryLevels>
<level max="24">
<background filename="Files\template.png"/>
<bar startX="6" startY="21" endX="31" endY="21" filename="Files\bar-red.png"/>
<pctStyle colorRGB="FFFFFF" fontFamily="Arial" fontSize="11" italic="false" bold="true" formatString="{0:0}%"/>
<pctPosition centerX="true" centerY="false" offsetX="1" offsetY="3"/>
</level>
<level max="49">
<bar filename="Files\bar-orange.png"/>
</level>
<level max="74">
<bar filename="Files\bar-green.png"/>
</level>
<level max="100">
<bar filename="Files\bar-blue.png"/>
</level>
</batteryLevels>
</batteryIcon>
In addition, in the "Files" folder, I have an example image called template.png, which is the example icon's background image, and some bar-xxx.png images, which are different colored 1-pixel-wide images that are used in the example to draw the horizontal battery meter over the background. Attached to this post is a picture of the output from this configuration and image files so you can get a basic idea of what it can do.
Using this application is (hopefully) quite simple: Create your template images, edit the config file to specify your parameters, then run the executable. 101 images, for battery levels 0-100 percent, will be created as specified. Tweak and run again as needed until you get it right. The "level" elements allow you to change any of the icon's characteristics (text color, size, position; background image; progress bar image) for different battery level intervals. Anything not changed from the previous level is carried over, so you only need to specify changes.
For most of you, editing the config.xml file is probably obvious from the example; you can probably just tweak it file and get what you want, but below are more details.
Documentation
The output element just indicates where the final images will be stored and how they will be named. The {0:0} part is a standard .NET format string and indicates where and how to put the battery percentage in the file name. (You probably won't need to change this; {0:0} will format numbers from 1-100, no leading zeroes, and we don't need to worry about commas or decimal places or anything).
After that, under the batteryLevels element, there are a series of level elements that define the icon options at each battery percentage interval. The end of the interval is defined using the "max" attribute, which is a number from 0-100 for the battery percentage.
The first level should include all layout and image and formatting options, but then after that, you just need to specify things that change from the previous interval. The level elements should go in order from lowest battery level to highest.
At each level, we can specify:
The background element which sets the base background image for the icon, on which the progress bar and pct text will be overlayed.
The bar element which determines how the progress bar is drawn over the background. startX/startY and endX/endY are the range of positions for which the progress bar image will be drawn. The image should be 1 pixel tall or wide, depending on if the bar is progressing vertically or horizontally. Omit this element completely if you do not wish to draw a progress bar -- i.e., for just the battery percentage text on top of one or more background images.
pctStyle lets you theme the battery percentage text a bit. formatString is a .NET format string, and is probably fine as is, except notice that it ends with a % symbol. Remove this if you don't want a % after the number. (i.e., it would be just "{0:0}")
pctPosition is used to indicate where on the background image the text is drawn. centerX/centerY are true/false if you want the text to be centered in that dimension, otherwise it is drawn at the top and/or left of the background. offsetX/offsetY let you move the text up/down or left/right pixels as needed from either the center or top/left position.
That's really it. Anything that doesn't change from the previous battery level will be carried over, so you just need to specify what has changed.
Tweak the XML file and re-run until you get the battery icons you are looking for! You can also create and drop different configuration XML files on the executable (or specify the file via the command line as the first argument) and it will run using that file as opposed to the default "config.xml" file in the application directory.
Additional Notes:
Specify an empty string ("") for the filename attribute of the bar element if you do not want a progress bar drawn.
Specify an empty string ("") for the fontFamily attribute of the pctStyle element if you do not want the percentage text drawn.
Remember that the background image can change at any interval as well, if you'd like to use a series of different backgrounds with percentage text overlayed and no progress bar, for example.
the start/end positions of the progress bar should be specified once and cover the entire range of the progress bar, from 0-100 %, and not change at different intervals (unless that is an effect that you want for some reason).
You can specify the filename for any valid configuration file as the single parameter for the executable to use that file instead of the default config.xml file if you like.
WOW! Are you kidding me. You mean I don't have to make 100+ Battery icons. THANKS. I'll definately be donating next time I get paid. DO YOU REALIZE how much time you just saved me? Thanks. DL'ing now.
EDIT: DUDE! Where's your donation link? I just tested this and IT'S INSANE! IT WORKS PERFECT! Seriously, post a donation link. You deserve a lot for making this. I'll also post a link to your thread at "themikmik.com". They'll love this program.
EDIT: Could you please give me an idea of what pctposition I would need to accomplish this type of battery? Thanks. I tried a pct of 1:1 but had an FC. Or Offest. I'm still trying to figure it out.
EDIT: I almost have it down. offsetX="3" offsetY="10"/> gives me:
Will the Font be transparent? Answer: YES
I finally got it looking the way I wanted. I used:
<bar startX="10" startY="15" endX="31" endY="15" filename="Files\bar-red.png"/>
It looks like I just have to modify the PNG bar's to make it the size I want so it fills up the battery.
To think, it took me 20 minutes to do TWO battery PNG's in Adobe photoshop! LOL.
How can I change which way the bar is going? It currently goes from Left to right. I'd like it to go from Left to Right.
Answer: I feel like an air-head. I figured it out. You just have to reverse the Start X. For example:
<bar startX="33" startY="9" endX="7" endY="9" filename="Files\bar-red.png"/>
Great!!!!
THX for this tool
Made my life much easier
raider3bravo said:
It looks like I just have to modify the PNG bar's to make it the size I want so it fills up the battery.
Click to expand...
Click to collapse
Yeah, those images are just examples, modify as needed. Glad it is working for you!
jsmith8858 said:
Yeah, those images are just examples, modify as needed. Glad it is working for you!
Click to expand...
Click to collapse
Can you give me an idea of some fonts we can use? I was thinking if I used a certain font that wasn't on the phone then it might not show.
EDIT:
On another note, I'd like to share with everyone the coding I used to achieve a perfect battery using a 38x38 icon and 1x21 bar colors.
Never before have I been able to custom make batteries this fast. Thanks!
Code:
<?xml version="1.0" encoding="utf-8" ?>
<batteryIcon>
<output folder="output" filename="stat_sys_battery_{0:0}.png" />
<batteryLevels>
<level max="24">
<background filename="Files\template.png"/>
<bar startX="34" startY="8" endX="6" endY="8" filename="Files\bar-red.png"/>
<pctStyle colorRGB="A7CEA7" fontFamily="Arial" fontSize="11" italic="false" bold="true" formatString="{0:0}"/>
<pctPosition centerX="true" centerY="false" offsetX="2" offsetY="9"/>
</level>
<level max="49">
<bar filename="Files\bar-orange.png"/>
</level>
<level max="74">
<bar filename="Files\bar-green.png"/>
</level>
<level max="100">
<bar filename="Files\bar-blue.png"/>
</level>
</batteryLevels>
</batteryIcon>
raider3bravo said:
Can you give me an idea of some fonts we can use? I was thinking if I used a certain font that wasn't on the phone then it might not show.
Click to expand...
Click to collapse
Use any font you have available on your pc that looks good. On your phone it's just a PNG image, it doesn't matter .
HTC style battery meter
I modified HTC battery png files to include the battery percentages.
Attached is the preview and output folder. Use as you please.
It would be awesome if we could get the charging icon pngs. Anyone care to post?
Sent from my ADR6400L using XDA Premium App
raider3bravo said:
It would be awesome if we could get the charging icon pngs. Anyone care to post?
Sent from my ADR6400L using XDA Premium App
Click to expand...
Click to collapse
Attached are all HTC battery pngs including the charging ones.
I just made another battery icon. This program is a huge time-saver.
When I asked about the power widgets. I was wanting to know if it's possible to include those images in the battery icon similar to the numbers being populated in the icon. The battery power widgets are easy to get but populating them inside a battery icon can be tricky and again time consuming. Just putting the thought out there. I'm happy the way it is, but maybe consider it for a future update?
raider3bravo said:
I just made another battery icon. This program is a huge time-saver.
When I asked about the power widgets. I was wanting to know if it's possible to include those images in the battery icon similar to the numbers being populated in the icon. The battery power widgets are easy to get but populating them inside a battery icon can be tricky and again time consuming. Just putting the thought out there. I'm happy the way it is, but maybe consider it for a future update?
Click to expand...
Click to collapse
I'm afraid that I don't really understand what you are requesting, can you be a little more specific or explain a bit more what you are trying to do?
jsmith8858 said:
I'm afraid that I don't really understand what you are requesting, can you be a little more specific or explain a bit more what you are trying to do?
Click to expand...
Click to collapse
Sure thing. Right now, the script populates 100 icons. However, there are 110 "battery icons." The other 10 are for charging. What I'm requesting is if the script could somehow, populate those charging icons along with the modified battery png's. I can easily add the charging icons but theming them will be a huge hassle. If it's possible, great. No big deal if it can't be done right now. I'm just thankful we have this script to make all 100 Png's.
How do I compress series png files as 1png file?
I'm running MIUI galnet 6.0 and need to add 1 png file that has all the percentage inside (0-100)
Do you guys know how I need to do this?
Thanks
This is amazing! Why doesen't everyone use it! Please create charging and different types of batteries like circular ones!
Circle battery indicators
see next post!
Version .2
Here's version .2. The OP will be updated at some point when I have time to rewrite it.
Changes:
1) The % text is now smoothed and anti-aliased.
2) You can draw a circular progress bar by specifying rotateStart and rotateEnd attributes for the bar element. These are in degrees (0-360). The "bar" image will be drawn at the startX, startY point (usually 0,0; omit if you like as this is the default) and then repeatedly rotated and drawn up to the currently drawn battery level. endX and endY are ignored if you use rotation. (The included config.xml file has an example of using this feature.)
3) You can now specify a "step" attribute in the batteryLevels element. This allows you to draw icons for only every nth battery level, say, 0,5,10,15...90,95,100. (the default config.xml file includes this attribute so you can see where it is; it is set to 1, which is the default.)
4) in the bar element, you can specify drawCount and skipCount attributes to toggle drawing the progress bar on and off to make a "dotted progress bar" effect. This is often done for circular battery icons. Basically, specify how many % to draw and then how many % to skip using these attributes. (The included config.xml file has an example of using this feature.)
5) An image called "preview.png" will be created in the output folder with a simple compilation of all of your icons in one image. This is useful for posting for others to see or for you to quickly review all in 1 place.
The standard horizontal bar example included with the app has been renamed to "config-bar.xml", while the default "config.xml" included creates a dotted circular progress bar and includes most of the features described above.
Have fun! See some attached examples. (PLEASE NOTE: I literally threw the examples together in 10 minutes, they are a little sloppy since I didn't take the time to line things up perfectly, you can do better!)
this tool is premium quality!
Since no one really knows about this tool, I have two requests:
1) If you use this for a theme you make available to others here on XDA, if you could include a link to this thread and (very) briefly mention that you used this to generate your icons that would be much appreciated.
2) Maybe a few clicks to "Submit to Portal" (on the top-right) can get this thread on the XDA home page! (I apologize if soliciting this is against forum rules)
3) Share your work here! Use the cool "preview.png" feature to post some examples of what you've created.
Enjoy!
R3D X said:
this tool is premium quality!
Click to expand...
Click to collapse
Thanks, glad it works for you!
jsmith8858 said:
Since no one really knows about this tool, I have two requests:
1) If you use this for a theme you make available to others here on XDA, if you could include a link to this thread and (very) briefly mention that you used this to generate your icons that would be much appreciated.
2) Maybe a few clicks to "Submit to Portal" (on the top-right) can get this thread on the XDA home page! (I apologize if soliciting this is against forum rules)
3) Share your work here! Use the cool "preview.png" feature to post some examples of what you've created.
Enjoy!
Click to expand...
Click to collapse
Ya, this should have been on the homepage of XDA months ago. lol. Thanks for the update. I know I included a link on my first theme to this thread, but forgot about the others. I'll mention you now in every OP. Thanks a million. My themes wouldn't be possible without this. Submitting to portal now!
I think I'm finally understanding how the draw9patch tool works, and with that, how .9.png files work as well. Just because it wasn't clearly explained in anything else I saw (well, clearly to me, anyway), I'm going to try to do a quick explanation of how it works.
The first thing to remember about the draw9patch tool is that it's generally for use after you've already edited a .9.png file, and that a .9.png file is built to be stretched. To start editing .9.png files, just decompile the source apk (usually something like framework-res.apk) with the apk manager or apktool.
Open the .9.png file in Photoshop and edit everything except for an area 1 pixel wide around the edges of the image. That area is sacred. There is probably already something there - if so, leave it.
If you want an easy way to make sure it stays clean, just create a new layer, use the "select single row/column" tool in photoshop to select those single pixel borders one at a time. Using the bucket tool, fill in that single pixel border with a solid color as a visual reminder. Keep that layer in place as you edit as a guide, and when you get ready to save the file, make that the active layer, and use the magic wand to select the area inside the border, then invert the selection (so you just have the one pixel border around the outside selected). Go through any other layers you have in the drawing with that selection still selected and delete anything inside the selection. That will keep the area clear on all layers. Once you've done this, delete the layer with the border and save your .9.png.
Once your .9.png file is saved, start the draw9patch tool (usually in android-sdk-windows/tools/draw9patch.bat).
When you fire up the draw9patch tool in the android SDK, you'll see an arrow on the screen. The easiest option is to just drag the .9.png file into the window. It will open it, but it might be hard to see. If that's the case, drag the "Zoom" slider as far to the left as you can until you can see the entire image.
The first thing you'll want to do is activate the buttons that will best show you how your .9.png file will stretch and move. Here's what each button/setting will show you:
Show/Hide bad patches - this will show you areas where it will stretch, but it will probably look bad. Go ahead and make this show bad patches (the button will say "hide bad patches" if you are currently showing bad patches)
Show lock - I honestly don't know. I haven't yet seen this setting work for anything. Leave it unchecked.
Show patches - This will show you where your image is going to stretch. Check it.
Show content - This will show you where things get written/overlayed on your image. Check it.
Zoom - Zooms the image.
Patch Scale - adjusts the preview of how your image will stretch at different scales.
Now, you're probably wondering how .9.png files determine how the image stretches, and where stuff gets written. That's what the 1 pixel border tells it (except for where two borders overlap - that's a dead area). Here's the way it works:
The border on the top of the screen controls the area of the image that stretches left-to-right. Every black pixel you put in this border selects a portion of the drawing that will be repeated when Android needs to stretch the image in the landscape direction.
The border on the left side of the screen controls the area of the image that stretches up-and down. Every black pixel here will set a repeating area as the image stretches in the portrait direction.
The border on the right side of the screen sets how much area in the portrait direction is available to have items drawn inside of it. If you have some text that will be written on your image by Android (a clock, for example), it will check the black pixels on the right side of the screen to determine where it can put them.
The border on the bottom of the screen works in conjucntion with the border on the right side to determine the landscape portion of the area where things can be drawn.
One thing you'll notice with draw9patch is that it will only let you draw in the 1-pixel borders. This makes it generally easier than Photoshop to work with.
To start, just draw a few pixels at the top and left side borders, then look in the preview pane on the right side of the window. That will show you how those areas will repeat. If you adjust the scale, you can see how it will repeat over a greater area. If a patch isn't going to work, it will show up highlighted in a red border. If you need to erase, just hold shift and then click on the pixels you need to get rid of.
Once you have a stretchable area that works for you, put some pixels in the bottom and right borders until you're happy with the area that will accept drawing items. If you look in the window on the right, you'll see a blue area highlighted where that stuff would go. As long as that looks ok to you, you're good to go.
After you've checked everything and it all looks like it will stretch well, you can just use the File-Save command, and it will save a good .9.png file that (should) compile properly.
A quick pointer that I'm discovering: If you have an image that really won't stretch well in any direction, just delete everything two pixels in from each edge, leaving a transparent line just inside the 1-pixel border. Then select those areas as your repeating areas. It may mean your item shrinks on the screen, but it also means it will look the way you intended.
Good info, thanks.
Sent from my SAMSUNG-SGH-I897 using XDA App
Well done!
If I don't have to make an image with customized draw9patch guides, I personally prefer to make my images before adding the 9patch guides. If you have the fully decompiled .png with the 9patch pixels visible, any slight mistake (partial erase, glow/fade/shadow overlap, ect.) can cause an error when you try to compile it.
Check the size of the .9.png you want to edit before it has been decompiled, and open a new photoshop document in that same size. Make your .png. Decompile, then drop your new image on top of the old one and merge the layers (you may need to erase some parts of the original if they are overlapping). If you find yourself repeatedly editing some of the more common .9.png files, it can also help to make a transparent image template that only has the draw9patch guides on it. Make sure it decompiles and compiles properly, and then you can drag and drop it over your new images, merge layers, and you're finished. Obviously, this only works on images that will be the same size and have the exact same draw9patch guides. Those template borders are very useful for porting and minor changes to common .9.pngs.
Thanks, 10ton.
Since writing up that first post, I came across this. It's the xUltimate-draw9patch tool. I know it's been posted before, but this is the super stripped-down version. It has the application and two folders. You dump your decompiled, doctored up .9.png's in the deepest folder of the "originals" folder set, and then run the xUltimate-d9pc tool. It will compile the .9.png files (assuming all is well - it'll give you useful error messages if they're not right) and spit out the finished ones in the deepest folder of the "done" folder set. From there, it's just a matter of sticking them back into the apk's with 7zip.
I personally have found it to be pretty useful when compiling multiple .9.png's at once, instead of using the draw9patch tool or apk manager.