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

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

How to theme, preferably with MM

Just wondering how to theme on the Hero. I know the rough idea from my small amount of experience with Winterboard. Indicate folder/app with and then have images to replace UI elements.
However I don't know how to work a .THM file or if anything special needs to be done to the zip file.. I tried to edit a theme once and it wouldn't load on MM so something was wrong..
Is there any guide?
Also: there is an app available for iPhone OS that gives you all the UI elements in a list and has an image to indicate where it's found on the phone, you can then edit it and it will change on the image so you have a preview of your theme without saving or applying it... Anything like this available or in the works?

essentially the .thm needs to be exactly the same filename as the .zip
Also, if you open the .thm with Notepad for example, you will see the format you need to keep.
If you modify someones theme, remember if you delete an apk (dir) then you need to delete the relevant lines in the .thm. Same goes for if you are adding apk's too. You need to add the lines, so it is installed to the correct location.
You do not need to do anything specific with the .zip.... This is the beauty of MM. It does the complicated bits for us.
To be brutally honest, i dont find MM very reliable (having made a very full theme). People report all kinds of crazy issues caused by MM.
There is a VERY good guide in this forum....Google 'xda metamorph theme' that will lead you to it.
Also, there is no apps like the one you mention for the iPhone.
Enjoy

[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.

help with homebrew bootanimation

Hi I' a web designer and graphic artist, not much android developer, I've made this intent of a bootanimation.zip, even make the zip with KEKA for mac osx ppc and photoshop, but somewhat it is just showing a black screen. I'm attaching the zip file, could you check it out and tell me what would be wrong with it?
I cannot attach the file, so I've uploaded, if someone can download it and check it, I would appreciate letting me know why this is only showing a black screen on my tablet.
Thanks.
Gus
p.s: here is the file http://gusduenas.leftandrightsolutio...tanimation.zip

any help.
;(

What device?
----------------------------------------------
I'm full of great idea's, but don't have the time to create them or learn the coding to create them. If you want to make one of my ideas a reality just message me and I will give you my idea as specific as possible.
ideas:
Spoiler
-launcher/lock screen
-line rider type game where you control the character
-2d fighting game like art of fighting for the SNES
-multiplayer fps where you create your own map with a creative mode (minecraft style)
-roller coaster tycoon style game
-many more!
Just message me which idea you want info on and I'll tell you!
----------------------------------------------

check on the link I've posted and see what would be the problem, thanks for your help.

gusduenas said:
check on the link I've posted and see what would be the problem, thanks for your help.
Click to expand...
Click to collapse
link is broken...

Homebrew animation [SOLVED for Mac users]
Finally! I've just solved, many threads were correct the problem with the bootanimation.zip is the compression so I've downloaded the stuffit plus and I set the preferences to no compression and expert mode to the middle between faster and smaller compression level 8 and I've opened in the stuffit archive manage one of the many bootanimation.zip files I have from original and finally I got it good! :good:
Now it is working this solution is specially for all mac users (like me) with photoshop and stuffit archive manager. When in the window of the stuff archive manager, you are able to navigate the files inside the zip, so the better is to erase the originals and replace by yours, don't forget to have the desc.txt written good.
As an extra precaution, when you finally have all your files made in photoshop jpg, go and open preview and re-save them as jpg again in order to have a regular jpgs, maybe is nothing but I've just wanted to be sure since the bmp from photoshop is not read as a boot_logo by android, so my those are my two cents.