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
Related
hello!
i would like to change my Kaiser's dialer/commanager's background image.
anybody know how should i do that?
i searched the whole forum, but i always found questions about this...
i tryed to change some images in dialer's .CAB files, but that is not so obvious for me.
i would like to use this background, and simple black buttons.
thanks,
pulyka
I did this a while ago.
Look inside the \Windows folder on your device using any picture viewer and take note of the filenames you'll need. Transfer the images to your PC and edit them. I had to transfer them to my storagecard before being able to move them over, as my PC couldn't see the Windows folder.
After altering the images to your likings, transfer them back to your device and reboot for the changes to take effect.
Good luck with your skinning project
hmm thanks, i will try it!
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.
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
I am currently messing around creating my own personal theme. I have been successful in changing every image except the buttons. For example, this one: btn_default_normal.9.png
I did a little Googling and understand the concept about 9 slicing. I have done flash for years and it pretty much does the same thing when scaling objects.
However, when ever I modify one of the button images, even just changing the color, the slicing goes to crap. It just scales the entire images instead of slicing it up.
If anyone has run into this before, I'd love to hear your solution.
Sent from my FroyoEris using XDA App
rhamej said:
I am currently messing around creating my own personal theme. I have been successful in changing every image except the buttons. For example, this one: btn_default_normal.9.png
I did a little Googling and understand the concept about 9 slicing. I have done flash for years and it pretty much does the same thing when scaling objects.
However, when ever I modify one of the button images, even just changing the color, the slicing goes to crap. It just scales the entire images instead of slicing it up.
If anyone has run into this before, I'd love to hear your solution.
Sent from my FroyoEris using XDA App
Click to expand...
Click to collapse
.9 images are a pain to work with, but here's what you need to do...
1- download the android sdk kit
2- in the android sdk, there is a program called draw9patch. This let's you edit .9 images for scaling.
3- you will need to download a 9image compiler. There's one called xultimate-d9. This will compile the images for use on your phone.
First, modify your image and save it. Next, open draw9patch and drag the image in. Place a solid border on the bottom and right sides. Place a single dot middle left and middle top. Save the image. Finally, put the modified images in the compiler folder (example1/res/drawable-hdpi) and run the compiler. It will put the final image in a "done" folder. Put that in your theme and your done.
If your doing a large theme with alot of 9images, this will take hours... been there!
You can bypass some steps if you decompile the apk using apktool in the sdk kit. This retains the patch borders, but you have to make sure the borders stay black or you'll have trouble compiling them.
Good luck! Its alot of fun!
Sent from my FroShedYo.V8-ERIS using XDA App
Thank you! That is exactly what I needed to know
Sent from my FroyoEris using XDA App
Macrodroid said:
.9 images are a pain to work with, but here's what you need to do...
1- download the android sdk kit
2- in the android sdk, there is a program called draw9patch. This let's you edit .9 images for scaling.
3- you will need to download a 9image compiler. There's one called xultimate-d9. This will compile the images for use on your phone.
First, modify your image and save it. Next, open draw9patch and drag the image in. Place a solid border on the bottom and right sides. Place a single dot middle left and middle top. Save the image. Finally, put the modified images in the compiler folder (example1/res/drawable-hdpi) and run the compiler. It will put the final image in a "done" folder. Put that in your theme and your done.
If your doing a large theme with alot of 9images, this will take hours... been there!
You can bypass some steps if you decompile the apk using apktool in the sdk kit. This retains the patch borders, but you have to make sure the borders stay black or you'll have trouble compiling them.
Good luck! Its alot of fun!
Sent from my FroShedYo.V8-ERIS using XDA App
Click to expand...
Click to collapse
i cant seem to find that compiler. a link?
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