Database Develop

.9.pngs figured out. New thread!

Well my old thread got deleted, So i decided to redo it.
I am sure by now most of you know that editing .9.pngs cause some ill effects on certain images. Well i found a way to edit these images and make them look as good as Google's!
What you need:
Android SDK - Will be using the draw9patch tool in the tools folder.
Eclipse IDE - We will need this to compile the .9s
Photoshop or other image editing sfotware - with PNG compression.
Setting up the enviroment:
When i setup the SDK and Eclipse, i put them inside of C:\Android. Make sure to follow the instructions from here, it will walk you through setting up Eclipse to work properly with Android.
::Tip:: When you get to the part "Installing the Eclipse Plugin (ADT)" the URL "https://dl-ssl.google.com/android/eclipse/" sometimes gives an error, just change https to http and it should go through without an issue.
Now basically put a .9.png is an image with guides that tells Android where the image can be stretched and where the content will be placed inside the image. An easy example is a button, some fit only one word and others stretch across the whole screen and Android will put the text in the middle of the button.
When you open a .9.png you do not see the guides, that is because they are hidden. When you want to add the guides to an image, you have to drag it into the draw9patch tool. Now the tool has a hidden secret i figured out.(not really hidden, but not well described) If you open an image with the .9.png extension it just opens it. But if you open an image without the .9.png extension, it adds 2 pixels to its width and height. These 2 pixels are for the hidden guides. For example the btn_default_normal_disable.9.png in framework is 44x48. But if you remove the .9 from the file name and drag it into the draw9patch tool it changes to 46x50. Which you will notice after you save the image from the draw9patch tool. Also it will add the .9 to the file name.
Howto: draw9patch
The idea of the draw9patch tool is very simple, you drag an image into it you create the guides and you save the image. But the guides are very specific and if you do not do them properly your image will look strange. So follow these few rules about the tool.
Remove the .9 from image name before you drag it into the tool.
The top and left side guides set where the image can be stretched. Where ever you put a guide is where the image will stretch. Do not put more then 2 next to each other.
The bottom and right side guides set the content area(where the text will go). Now you can only put the guides in the outer border, once the image is compiled this border will be hidden. The tool will not let you put any guides anywhere but the outside border. Now usually you will put a 1x1 guide on the top and left sides, on the right and bottom you want to draw a full line. I have tried putting multiple guides on the top and left but the aapt tool seems to stress out and crash before compiling.
Once you save the image the draw9patch tool should of added the .9 to the name. That is all to adding the guides to the image.
So now your saying ok, i have the image and i still see the guides. To get rid of these lines we need to compile them with Eclipse. Basically we add them to a project in Eclipse and create an apk. During the compile the aapt tool from the sdk will set the image back to its original resolution and hide the guides.
(I am hoping to figure out some command lines for the aapt tool so we can skip this step. But until then editing these .9s are a big pain in the arse!)
Howto: Compiling in Eclipse.
I am assuming you followed the link above for setting up Eclipse and can create a new Android project.
Once Eclipse is open you want to go to "File\New\Android project". Select "Create project from existing source". It should default to the path of the samples in your SDK directory, but if it doesn't just browse to them. I have been using my own project but any sample should be fine. Choose "Finish" and on the left hand side under Project Explorer, you will see the name of the project you opened. Expand the project, then Res and you will see the Drawable folder. You will want to drag your edited .9s here. Once all of the images are in the drawable folder you want to right click the top level folder(Project name) for your project and choose "Android Tools"(second from botom) then "Export Unsigned Application Package..." Save the apk where ever you'd like, just remember where you put it. Cause you will want to open it and take the images out of the drawable folder. You will notice now that the guides are gone and the resolution is back to the normal size. Drag the images into your theme and you are done.
The images below are some screen shots of the draw9patch tool. The first one shows how most of the .9s should look with guides, the second shows with the Show Content checked and the third is what happens when you put your mouse inside the outer pixel range.
Attached is a zip with the drawables from framework-res, launcher, contacts and phone apks from the source. It has the .9s and xmls before being compiled, so you can use these images instead of having to use the draw9patch tool. But it doesn't have all of the same images, there are some missing and some that are not in our firmware yet. So do not just copy and paste all of the images, i have been just copying certain ones into my theme directory and editing them there. Also becareful when editing these images, if any of the guides color changes Eclipse will throw an error. This is easily fixed by using a 1 pixel pencil tool in photoshop and going over the guides with black. Also you need to make sure that there is not anything other then the black guides in the 1 pixel border of the images. you will get errors before compiling if there are. I normally use the rectangle marquee tool to highlight the edge and use the Del key to make sure nothing is in the outside edge.

I wonder why the other thread was deleted?
Anywho, thanks again for all the help on the .9.png files, I know its probably one of the biggest frustrations for new theme makers like me. I'll be working more with them on my second theme, the first one will just have to do without I suppose.
Thanks for all the contribution to the theme community!

Nice find, thanks for the info!

Seems like a lot to do, I've had no problems at all with my .9.png's, but this is good to know.
Bookmarked.

Thanks Man I have been trying to piece this info together with the thread and was getting nowhere. thank you for putting this out here.

A lot of work for sure, but if you're going for a full system theme you'll pretty much have to take the time to do things right. Very good info.

There are a few .9s you can change with minimal defects but things like buttons and tabs its pretty tough to get them perfect

when I try to export it fails because it says the .apk doesn't exist. What am I missing here? Thanks for your help.

it says the bin folder doesn't exist. but if I try to create the bin folder it says it already exists. confusing. what should I do?

Hmm not familiar enough with Eclipse to help out with this. But make sure there are not any errors on the images or any part of the app.

when I open up all of the sample apps they already show errors. Any thoughts on that? They show errors in the srs and the Android Manifest. I checked all of them. They all do.

Do they show warnings or errors?

they have a red box with an X next to them. What does that mean?

says I have to fix the build path for java.lang.object - any idea how I do this? Sorry for bothering you.

Ahh its no problem. The red X's are errors, yellow triangles are warnings.
You might want to run thru the steps of setting it up again and see if that fixes it.
Sounds to me something is missing. You did set the path of the SDK in Eclipse right?

haha... nope.. that fixed it - thanks so much. As you can tell you're talking to a real nube here that just tries to get things to work when he needs them.

ok, 1 more question. If I'm using the images that you provided in the zip, what are the necessary steps to edit them? Not sure I'm clear on that

for example. I want to make the search_bg.9.png in the drawable-port transparent. What's the steps? (I of course know how to edit it in photoshop so you can skip that step)

parmenti said:
for example. I want to make the search_bg.9.png in the drawable-port transparent. What's the steps? (I of course know how to edit it in photoshop so you can skip that step)
Click to expand...
Click to collapse
you set the layer to whatever % you want it at. then save for web and devices.(make sure you replace the right image) remove the .9 from the name, open it in the draw9patch tool, set the guides, save the file, drag it into the drawable folder for any android project, right click the root folder in the project, choose Android tools, choose export unsigned apk, save the apk, open it in winrar take the .9.png you just put in it and replace the original in the update.zip.
done =)

what would cause the images not to compile when exporting from eclipse? I moved the images over, went through the steps to export and opened the apk but the drawable folder does not contain my edited images I added

[REF] Theme Developement Resources

I want to make a thread for both those that are already Dev'in themes, and those that want to start, can trade info and techniques. For example:
(Program)
Photoshop Editor:
Then a description of a given process...
Etc.
I know that there are How To's, http://forum.xda-developers.com/showthread.php?t=471586 but I'd like a more direct, and detail orientated place to discuss the specifics. I've tried a few attempts myself and found that some programs work, some don't. Plus, since the prices of some of these programs are as high as $600, and the fact that there are thousands of web-based programs, it'd would be nice to see what works best for who, and how.
Hopefully, this will turn into a good resource, and we'll soon have a forum full of the most excellent themes.
MODS: Let me know if I'm outta bounds and I'll fix. This is my first time makin a thread so it ain't all that.
To Do:
*search and post Theme Developement info for Windows, Linux, and Mac
These are links to useful threads related to different parts of theme developement...
Key Files Chart:
http://spreadsheets.google.com/pub?key=r_ua-t_U23ci5_oxwQ4mGrg
Creating your boot animation:
http://forum.xda-developers.com/showthread.php?t=527200
Progress circle style/color editing:
http://forum.xda-developers.com/showthread.php?t=540830
Editing .XML's:
http://forum.xda-developers.com/showthread.php?t=479019
How to use baksmali/smali:
http://forum.xda-developers.com/showthread.php?t=537779
General Theme Developement:
http://forum.xda-developers.com/showthread.php?t=467639
Using DrawPatch-9:
http://developer.android.com/guide/developing/tools/draw9patch.html
Signing made easy:
http://forum.xda-developers.com/showthread.php?t=473580

photoshop is my primary weapon of choice but I've also found that for minor edits like color changes touchups transparency changes and resizes photoscape and fotoflexer work pretty well especially when I'm at work and decide to mess around because I can't install photoshop on my work computer due to administrator locks I just downloaded photoscape and installed to the documents folder and fotoflexer is an online image editor and both are free

Okay... here is something very usefull...
You know those pesky indexed files right? they corrupt if you open them in photoshop?... I figured out how to remove the indexing... first you need to download and install Paint.NET off of the web... and then install(of course)... and then open any indexed file in Paint.NET... then save it... and it will be un-indexed... ... this will be very usefull for lots of people... cuz it is for me!

I like paint.Net myself. Its free and if you load the plugins available you can get a lot done quickly and easily.
Best tip is to make sure you save stuff in layers so that if you only need to edit part of an image you can.
Another tip is after you finish your edits you can expand the canvas on all sides by 1 pixel then use solid black for doing the .9 marks. Once done you can dump your files right into the latest eclipse and draw9 isn't even needed which saves a lot of time.
Also 7-zip is just amazing. You can use the file manager to move files between zip files and apk and even jar files without unpacking or packing over and over.

I agree with beagz 7zip is a must it makes it a hell of a lot easier when porting your themes for new builds another life saver is the android sdk lot s of useful information in there and eclipse for compiling .9 images which there are samples of in the android sdk to show you how to do the guides properly like beagz was talkin about in his previous post because if you mess one of those your phone can end up totally screwed

This is easy
Apps
.zip/.apk management: 7-zip (the most important part of theme development)
image manipulation: GIMP
Software
sign/resign files: Java JDK
.9.png editing: Eclipse to compile the apk
Pre-reqs
ADB working properly through the command prompt

Applications that make theming possible for Jonnybueno
I use Photoshop for images. Hue and Saturation(ctrl+u) is my best friend for changing the color of stuffs. For hex editing, I use HXD, outlined in this thread by Stericson: http://forum.xda-developers.com/showthread.php?t=479019.
For signing, I use Stericson's Autosign.bat. If you don't know, you can double click on this to pull up the command prompt rather than launching the command line and then typing "autosign". Also, you can copy the file path by right clicking while holding the shift button on Vista.
And finally, for notification text, I use Ohsaka's colorChange.jar. Along with this really simple batch file.
White text:http://sharebee.com/b6b43290
Which is just one line(that I'm too lazy to type everytime I update)
Code:
java -jar colorChange.jar theme.zip ticker=FFFFFFFF clock=FFFFFFFF date=FFFFFFFF ongoing=FFFFFFFF latest=FFFFFFFF clear=FF000000 network=FFFFFFFF roam=FFFFFFFF
Resources
For viewing source to reference those xml files, I use these sites
Cyanogen source:http://github.com/cyanogen
Android reference (stock): http://developer.android.com/reference/android/R.attr.html
And then this website for finding just the right RGB codes: http://www.colorschemer.com/online.html
Tips
I've learned that it is totally possible to rotate .9.png files using windows without having to redraw them and that images don't have to be the original size. There is a limit to how big you can go... but i have no idea what that limit is.
Oh and for different colored(other than black) notification text for downloads, edit the only xml file in DownloadProvider.apk/res/layout. For example, 0800001C 000000FF becomes 0800001C FFFFFFFF. In case you're confused, whats happening is that you're changing an ARGB code (which is backwards, so you're looking at BGRA... see stericson's thread please) from black (000000FF) to white (FFFFFFFF).

Working from Linux (Ubuntu) I've found File Roller to work as nice and easy as 7zip in Windows for working with zip/jar/apk.
GIMP is my gfx editor of choice in both worlds. Glad I discovered you don't need draw9patch to put the .9 guides in - draw9patch is a pain to use!
In Windows I use XVI32 a hex editor, ghex in Linux.
testsign.jar is all you need to sign - very simple from command line in both Linux and Windows
/Mats

I use Adobe fireworks for image editing a little easier then photoshop and has styles for lazy ppl like me and winrar full version for managing the apk's and zips and png crush setup to right click and crush pngs for compression if your update is too big.

I know this thread has been dead for a while but I see new phones linking to it as a resource for themeing, so I wanted to let you know that I have compiled a huge amount of information into one guide, see http://forum.xda-developers.com/showthread.php?t=667951 for detalis

As a side note: you might want to note the fact that my tutorial for changing/creating boot animations is for pre-2.1 builds (unless someone really decides they want a pre-2.1 boot animation on their phone, of course). I havent got around to updating the boot animation tutorial for 2.1+, cause thats going to be a looooong post.

How hard is it to re-skin widgets?

While I'm new back in playing with the Android OS, I spent a ton of time modifying my iPhone when I had it, creating custom icons, wallpapers, overlays, etc.
What I've noticed recently is that most of the icons in the Android OS really don't have much synergy in their designs. Every widget maker has something a little different in what they see as their own design, but they often times don't make all of the widgets that I would like, and I'm stuck with a hodgepodge of different looking icons and widgets cluttering my screen.
I'm curious if there is a somewhat easy way to modify the graphics files of these widgets so that I can create a very clean theme. To give you an idea of what I would enjoy creating, I'll attach a before/after picture of some modified icons that I was using on the iPhone. While they retain the color schemes for the most part, I felt like I was able to make everything feel a bit more cohesive in a theme, and I would love to continue that trend on my Hero.
So the eternal question.... can it be done? And if so, is it something a mere noob back to the Android OS can make happen?

it is actually pretty easy, i will explain as good as i can. there are some drawbacks:
you need to resign the apk. there is testkey available at this forum, and i think you can generate your own with the sdk (not sure if and how). but after resigning the apps are signed with the testkey, not the developers key. i do not really understand what that means, but it was a hint i read somewhere...
i am not sure whether the apps will be flagged by the market as "update available", but i don't think so because they won't appear in your downloads list, since you have to install them "manually".
that is AFAIK all for the cons, here's the how:
1. extract the .apk, rename to .zip if necessary.
2. find the image you want to be replaced, should be somewhere in [extracted folder]/res/drawable/
3. edit the image to your needs and save it.
4. re-zip the contents of the folder (including the not changed elements of course) to whatever.zip
5. rename whatever.zip to whatever.apk
6. sign whatever.apk
as for signing, here is how to do:
http://forum.xda-developers.com/showthread.php?t=551711&highlight=howto
the process for apps is basically the same as for update.zips, just don't use with recovery image but filemanager to install as regular app...
i think there is a theme howto out there on this forum, maybe that helps too.

kendong2 explains it well .... it is easy when it all clicks into place check my siignature for more help

[Q] 8 bit? Themers Please help

Hi all, i am trying to work on a theme for the Droid X. Can anyone tell me why some of the images open in photoshop incorrectly and more to the point how to fix them?
I cant post a link apparently to the image or a http link since i'm new but
You can view the image here. http:/ / dl.dropbox.com/u/6769503/8bit.jpg
Is there a setting or something I can change in PS to open these correctly?
Thanks for your time.
KraYzeE

krayzee said:
Hi all, i am trying to work on a theme for the Droid X. Can anyone tell me why some of the images open in photoshop incorrectly and more to the point how to fix them?
I cant post a link apparently to the image or a http link since i'm new but
You can view the image here. http:/ / dl.dropbox.com/u/6769503/8bit.jpg
Is there a setting or something I can change in PS to open these correctly?
Thanks for your time.
KraYzeE
Click to expand...
Click to collapse
What is the original file extension? .png?
I had this same problem with some .png files wich had transparency in windows image viewer, but not in photoshop.
My solution was to open it in Paint.net and save it, rewriting the original image. Please be sure to set the transparency correct whilst saving in paint.net.
Download Paint.net

Thanks for the reply, yes it was a PNG, ill try paint.net but i would really like to use Photoshop. I cant understand how it can mess up the transparency and anti alias like that.

Update: Paint.net does indeed open the file correctly... so while i do now have a solution. I would still like to find out why Photoshop (both CS4 & CS5) open it incorrectly ?

Well technically 8 bit pngs are indexed images with a varying amount of colored pixels and then varying amount of transparent and semi transparent pixels so some programs might not like this. I would recommend gimp over ps as its similar but doesn't have this issue.
Sent from my HERO200 using XDA App

that image actually seems correct, can you post an image of the alpha channel? then we will know if photoshop is not reading the file correctly

As one poster said, it's because the images is indexed. If you do Image > Mode > RGB, it will un-index it. I must warn you though, PS is HORRIBLE with indexed images. Use GIMP/Paint.NET to un-index it to save yourself a headache

JAguirre1231 said:
As one poster said, it's because the images is indexed. If you do Image > Mode > RGB, it will un-index it. I must warn you though, PS is HORRIBLE with indexed images. Use GIMP/Paint.NET to un-index it to save yourself a headache
Click to expand...
Click to collapse
Ahh but then you lose the 8 bit optimization, even running optpng will not put it back to index png cause it will ossy optimize it. So just use gimp.

Thanks for the replys guys.
Here is an example image.
http:/ / dl.dropbox.com/u/6769503/btn_circle_pressed.png
If you open it in PS, you will see what i mean, changing it to RGB does not change the image. I can open it correctly it Fireworks, then save it without making any changes, and then i am able to open it in Photoshop correctly.
This will do for now in case anyone else runs into this issue. The file size isn't too much bigger this way, so it will work for now.
Thanks again to all that helped.

http://dl.dropbox.com/u/1631008/btn_circle_pressed_fixed.png
Here's the image fixed, it was indexed... all I did was open it up with osx Preview and save it again. Or you can try this gimp they all talk about but I think it's overkill to switch to another program just because 1 or 2 images are weird, especially after you paid for your copy of Photoshop.

DBBGBA said:
http://dl.dropbox.com/u/1631008/btn_circle_pressed_fixed.png
Here's the image fixed, it was indexed... all I did was open it up with osx Preview and save it again. Or you can try this gimp they all talk about but I think it's overkill to switch to another program just because 1 or 2 images are weird, especially after you paid for your copy of Photoshop.
Click to expand...
Click to collapse
Thanks for your help. I don't have OSX and i absolutely cannot get used to Gimp. but opening it in adobe fireworks and saving it again right away does the trick, so although it's a pain, its simple to do.
If anyone ever figures out a way to directly open these types of files in Photoshop i'd be glad to know.
Cheers
KraYzeE

krayzee said:
Thanks for your help. I don't have OSX and i absolutely cannot get used to Gimp. but opening it in adobe fireworks and saving it again right away does the trick, so although it's a pain, its simple to do.
If anyone ever figures out a way to directly open these types of files in Photoshop i'd be glad to know.
Cheers
KraYzeE
Click to expand...
Click to collapse
Yes that works but your removing the indexing. Android uses indexed pngs wherever possible because this saves space and resources, if you changed every file in the android system to rgba your phone would be noticeably slower.
If you change it to rgba and then run optipng on it you'll see it will not index cause it can only lossy optimize, but if you set the mode to index and then optimize it you'll notice then file will be considerably smaller with little or no image quality loss. So in short your removing a vary important optimization feature of the android system.
If your looking for a quick image conversion tool try image magick, this will allow you to write scripts to convert them png24/32 to png8 and back whole folders at a time.

well as we do with video it's always better to work with uncompressed, high res images. Then when everything is done and set in stone we compress and optimize without loosing too much image quality.
If i had to start a theming project I'll probably do the same, convert everything to high res, work on it then compress to a more optimized format.

DBBGBA said:
well as we do with video it's always better to work with uncompressed, high res images. Then when everything is done and set in stone we compress and optimize without loosing too much image quality.
If i had to start a theming project I'll probably do the same, convert everything to high res, work on it then compress to a more optimized format.
Click to expand...
Click to collapse
Yeah for video thats fine, but in theming and specifically for this file gimp will allow you to work on the indexed file and you literally can not tell the difference with the indexed file being atleast 50% smaller. Maybe this would make sense with an image that has alot of quality or is high res but in this instance it a loss of time and added steps when the same could be accomplished with industry standard tools.

[Q] 4g icon in themes

I ran into a major issue last night.
This was REALLY pissing me off, you know one of those things that SHOULD be working but isn't. Whenever I view the decompiled apk (framework-res, and systemUI)
The files are decompiled everything looks correct, but when I open the image files in cs5 they look all blurry as hell. I have attached some screenshots. Make any sense to anyone?
Just curious why the images would show up that way once they were pulled into PS. Its not just that image, its all the images. Does anyone know how I can resolve this or even prevent it from happening?
Can I not use Photoshop CS5? Dreamweaver CS5 seems to handle the XML files like a pro.
Any help would be greatly appreciated.

Try without decompiling - its not needed just for replacing icons - use any zip program to open apks

cdesai said:
Try without decompiling - its not needed just for replacing icons - use any zip program to open apks
Click to expand...
Click to collapse
Tried that too. The first pic is the picture preview in the folder. It only happens when its open in PS. Very strange. I can open it in paint, and the the icon is normal (just loses the transparency, of course).

Open the img with paint.NET first, then save, then you can open it in photoshop.
I think this is an issue with the img being indexed in photoshop, something like that.

It's an indexing issue, ps dies not do it right. Open the images in either paint.net or the gimp. Switch the mode to rgb, save then you can open them fine in ps

What a pain in the ass. Opening them all in paint.net now, this might take me awhile. lol