Guide To Building A Theme
#1
Posted 20 September 2012 - 11:35 PM
First things first. These two links below are where I really got my start. They explain the basics of using apkmanager and apktool. I STRONGLY recommend that you read both of them and have an understanding of each tool first as it will make my guide make even more sense to you when you follow it.
Note: If you use apkmanager be sure that you have version 5.0.2
I do most of my decompiling and compiling with apktool, but apkmanager is a great tool to have since it will sometimes compile apk's that apktool has problems with.
You should have two versions of apktool that were listed in that thread by Gary. For my own use I named the folders ICS Apktool (for compiling ICS apk's) and Old Apktool(the older version of apktool that decompiles the apk's)
You also need to download 7zip if you don't have it already.
Place the rom you want to theme on your desktop and open it with 7zip,
You will want to get the framework-res.apk from the rom you are working with and put a copy of it in both ICS Apktool and Old Apktool. Just simply drag-and-drop.
Next pull out whatever apk you want to edit and put it in the Old Apktool folder only.
Note: framework-res is located in system/framework
all other apk's will be in either system/app or data/app
_________________________________________________________________________________________________________________________________
Now by following Gary's thread you can see that to pull up command prompt you hold $#!7 and right click on Old Apktool. Then click "Open command prompt here"
Now you can decompile the apk that you want to edit.
The process to decompile an apk is to type in this exactly.
apktool if framework-res.apk [Enter]
apktool d SystemUI.apk [Enter]
You should end up with something like this
When you are typing in the name of the apk be aware that it is case sensitive so you must get every capital letter and hyphen exact. Also be sure to put ".apk" on the end.
You should now have a new folder in Old Apktool called SystemUI.
Now copy this folder and paste it in ICS Apktool. I say copy because it is good to have an unmodified version of the apk you are working on in case you need to fall back on it for any reason. When you start editing xml's this unmodified copy can become invaluable.
Now in ICS Apktool, open the SystemUI folder.
You will see three folders, AndroidManifest, and apktool.yml
At this point you are only concerned about the "res" folder. Open that folder and you will notice a whole list of folders. There are only a few folders you will actually use when building a theme.
drawable -- Usually there is just xml files in this folder, but sometimes there will be a few images here that you may want to edit
**drawable-hdpi -- This is where the vast majority of the images and icons for any given apk will be found.**
drawable-nodpi -- From time to time there will be a background image or other useful images in this folder, but often times it will not be used.
values -- This is where you will find the xml files that you can edit to change the color of text and backgrounds. I will touch xml files a little bit in another post.
mipmap -- When you see these folders it means that the homescreen/app drawer icon is held here and NOT in drawable-hdpi. I believe you only need to edit the one called mipmap-hdpi, but I always edit all 3 just to be safe.
I put the ** around drawable-hdpi because as you will see this is where the majority of your time will be spent. Basically all of the images you want to edit will be in this folder.
_____________________________________________________________________________________________________________________________________
So now you're ready to start editing some images. Let the tedious work of editing hundreds and hundreds of images begin.
IMPORTANT: .9.png You will see many files that have .9.png in their name. These images are special and you must be careful when working with them. You will notice that each one has a 1 pixel wide border all the way around the edge of the canvas. DO NOT TOUCH THIS 1 PIXEL BORDER. Those black lines MUST stay black and can NOT be erased. These black lines are actually guides that tell which parts of the image will be stretched. I will post a link at the bottom that will explain more in depth about .9.png files.
With that being said don't be afraid to edit .9's. As long as you don't touch that border you will not have any problems. It is just a warning to explain how important they are.
The best thing to do as you start is just work with simple color changes and get used to editing the images with Photoshop, Paint.net, Gimp, or whatever editing program you are using.
These tools will become your best friend:
Magic wand
Quick selection(great tool in photoshop)
Hue/Saturation
Curves
Layers (If you are familiar with using layers then use them. They can make all the difference in the world in getting the desired effect as you get more advanced.)
There are many more, but those are my "go-to" tools.
______________________________________________________________________________________________________________________________________
Now lets go over xml files a little bit.
This is just a quick run down and not a guide for editing xml's. I will only scratch the surface on this.
If you are going to edit xml files then download Notepad ++ here
In your res folder open up the "values" folder. In this folder the only files you are worried about at this point are colors, drawable, and styles.
Open the colors.xml file.
You will notice each line has a hex code in it that looks like this "#ffffffff"
There are 8 characters in it. The first two should be left alone as they control the alpha transparency of the color. The six after that can be changed however. In most photo editing programs it will tell you the hex code of the color you have selected. There are also plenty of sites for finding the hex code of a color.
For instance #ffffffff is the hex code for white. If I wanted to change this to ICS blue then I would make it #ff33b5e5
Be aware of the descriptions for each line and it will sometimes be easy to tell what it controls and other times you will just have to play with it to find the line that will change the color of what you want.
The styles and drawable xml files sometimes will not have any lines in them to control the color of things so don't be alarmed if you don't see anything in them. If in the styles.xml you can't easily find any lines with color controls in them, then just do a quick CTRL+F search for "color" and see if anything comes up.
Sometimes there will be a need to go to layout folder in the res folder to get the desired color change. For instance, to change the color of the clock on a stock based rom you have to edit the status_bar.xml in the layout folder(this is in the res folder).
Note: Common hex code colors:
ICS Blue 33b5e5
Black 000000
White ffffff
______________________________________________________________________________________________________________________________________
Now let's go over recompiling the apk.
Hold control and right click on ICS Apktool. Then click "Open command window here"
Now type in exactly:
apktool if framework-res.apk [Enter]
apktool b SystemUI [Enter]
This will compile the apk (hopefully with no errors)
It should look like this:
IMPORTANT: Remember that everything is case sensitive. Also when compiling the apk do not put the ".apk" extension at the end of the name.
_____________________________________________________________________________________________________________________________________
zOMG NOOOOOOOOOO I got errors help me!!!
Don't panic. Errors compiling are an inevitable when building themes. It could be something as simple as you accidentally hitting the black guide on a .9.png with your brush tool or you forgot to put a # at the beginning of the hex code. If you haven't editing any xml files then chances are that you have a problem with one of the .9's.
And this is where apk manager becomes extremely useful. (mopar57 explained how to use apk manager very well so be sure to read through his guide carefully for an even better understanding.)
Take your stock unmodified SystemUI.apk and put it in the "place apk here for modding" folder in apk manager.
Run the script.
Option 22 to select the apk
Option 9 to decompile the apk.
Then open the projects folder. In here you should see the SystemUI folder once it finishes decompiling.
Now in ICS Apktool you will want to copy all of the images you edited in the SystemUI folder and paste them in to the proper location of the SystemUI folder that is in APK Manager.
Run the script again.
Option 22 to select the apk again.
Option 11. This compiles the selected apk.
If there is a problem with a .9.png files it will pop up saying that there was an error. This is a good thing. Close the script and open the log.txt file. This is an error report that will show you what went wrong. Scroll to the beginning of the most recent report. The most recent one will be the bottom one.
Notice on this log that near the top there is this line:
"ERROR: 9-patch image C:\Users\Lee\Desktop\Apk_Manager_ICS\other\..\projects\Phone.apk\res\drawable-hdpi\dial_btn_bknd.9.png malformed."
This tells exactly what .9 image you need to go back and fix because something happened to the 1 pixel border. Once you correct the image try to compile again.
_____________________________________________________________________________________________________________________________________
So the apk compiled with no errors this time. Congrats you are almost there.
Be sure to download mopar57's flashable zip in the thread about using apkmanager. Place this zip on the desktop.
Now make a new folder called "Themed APK's"
Open the original rom and drag-n-drop SystemUI.apk to this Themed APK's folder. So you should have a stock unmodified copy in the Themed APK's folder.
Open this stock SystemUI.apk using 7zip.
Now in ICS Apktool open the SystemUI folder. There should now be a new folder called "dist"
Open it and you should see a SystemUI.apk.
Open this SystemUI.apk using 7zip.
You should now have two SystemUI.apk files open in 7zip. Now you want to drag and drop ONLY the res folder and resources.arsc from the apk that was created in apktool to the stock apk that you opened from the Themed APK's folder.
Note: The resources.arsc file is what holds the xml files from the values folder.
You can close the 7zip windows now.
The only thing left to do now is open mopar57's flashable zip file and drag and drop the apk from the Themed APK's folder in to the proper folder of the zip.
Congrats now you are ready to flash your new theme.
______________________________________________________________________________________________________________________________________
EXTRA NOTES:
If you modify LatinIME.apk (keyboard) then when you get to the point where you are drag and dropping the res folder and resources.arsc to the unmodified apk.....you CAN NOT move the res folder. You have to open the res folder and move ONLY the drawable-hdpi folder. If you don't it will force close when you flash it. Be sure to thank 24v for that tip!!!
If you try to theme contacts.apk or phone.apk for a rom that uses the aosp version (typically CM9 and AOKP roms) then you can not edit the xml files or it will force close. With those you will only be able to edit images.
Here is a link to explain a little more about .9's
To help with hex codes -- **courtesy of andlaw**
More to come as I think of them.
I would like to thank all of the devs and theme builders here for there help and encouragement since I got in to making themes a few months ago. This is a truly amazing site and I'm not going to drop specific names b/c at some point nearly all of the devs here have helped me in some way. Be sure to show your support to those guys and make a donation to them if you can so they can continue to bring us more great development for our phones.
- jbag1489, BytecodeMe, lostsoul01 and 4 others like this
#2
Posted 20 September 2012 - 11:38 PM
I also apologize if any of it doesn't make sense. I originally was doing this for Bytecode and it was spur of the moment so hopefully it makes sense. I've been working on it for a few hours and its 4 AM lol.
- BytecodeMe, lostsoul01 and Gytole like this
#3
Posted 20 September 2012 - 11:49 PM
I'm always available through PM or just post back here with your questions and I'll give any help I can.
I also apologize if any of it doesn't make sense. I originally was doing this for Bytecode and it was spur of the moment so hopefully it makes sense. I've been working on it for a few hours and its 4 AM lol.
nice writeup man, im sure it will help out many new themers!
Sent from my XT912M running BW.6.16.214.ROM
"A truly blacked out experience"
[XT912 |[(BLACKWIDOWICS 214)] | [(BLACKWIDOWICS AOKP/CM9)] | [(BLACKWIDOWJB AOKP/CM10/CNA)] | [(wWIDOWICS 214)] | |[(BLACKWIDOWHDish)]| XT912]
[XT926 |[(BLACKWIDOWHD|wWIDOWHD)]| XT926]
#4 Guest_BDH_*
Posted 20 September 2012 - 11:50 PM
I'm always available through PM or just post back here with your questions and I'll give any help I can.
I also apologize if any of it doesn't make sense. I originally was doing this for Bytecode and it was spur of the moment so hopefully it makes sense. I've been working on it for a few hours and its 4 AM lol.
Dude..extremely good write up and I will "sticky" this. Also, nice to see that my thread on apktool helped someone
Again, very very nice write up and hopefully this will get more people into themeing!! Thanks DSG!
EDIT: Pinned.
- lightsword likes this
#5
Posted 21 September 2012 - 03:30 AM
EST 4 LIFE
**** If you want a signature, wallpaper or avatar done feel free to hit me up send me a pm ****
#6
Posted 21 September 2012 - 04:18 AM
Sent from my Galaxy Nexus using Tapatalk 2
#7
Posted 21 September 2012 - 05:35 AM
Sent from my DROID RAZR using Tapatalk 2
#8
Posted 21 September 2012 - 06:34 AM
#9
Posted 21 September 2012 - 11:09 AM
I'll post some more tips and tricks to help with common xml edits i make.
Sent from my DROID RAZR using Tapatalk 2
#10
Posted 21 September 2012 - 11:14 AM
Thanks guys. Hopefully we will see some new cool themes come out of this.
I'll post some more tips and tricks to help with common xml edits i make.
Sent from my DROID RAZR using Tapatalk 2
and this is just one of the many reasons i am glad i chose this place to call home. the community makes this place the great place it is.. keep up the great work~
Sent from my XT912M running BW.6.16.214.ROM
"A truly blacked out experience"
[XT912 |[(BLACKWIDOWICS 214)] | [(BLACKWIDOWICS AOKP/CM9)] | [(BLACKWIDOWJB AOKP/CM10/CNA)] | [(wWIDOWICS 214)] | |[(BLACKWIDOWHDish)]| XT912]
[XT926 |[(BLACKWIDOWHD|wWIDOWHD)]| XT926]
#11
Posted 21 September 2012 - 11:22 AM
Sent from my Galaxy Nexus using Tapatalk 2
#12
Posted 21 September 2012 - 11:39 AM
- c_live_lee likes this
#13
Posted 02 October 2012 - 01:12 AM
#14
Posted 04 November 2012 - 07:41 PM
#15
Posted 12 November 2012 - 05:18 PM
Once I'm done with framework-res and SystemUI, can i use apktool to decompile other apks, make edits and then recompile? Do I do it the same way or are they dependant on something other than framework-res?
Do the same thing with all apk's using framework. I have not found anything dependent on anything but framework. Yes use apktool to decompile and recompile. There may be a time when an apk won't compile with apktool even though everything is correct. In those situations I use apk manager 5.0.2. If you have that problem just let me know and I can walk you through that.
#16
Posted 21 November 2012 - 02:16 PM
Edit: Using the Original APK Tool, I did decompile some apks. I noticed however, that I'm getting an error message: "Can't find 9patch chunk in file: "drawable-hdpi/list_selected.9.png". Renaming it to *.png." I'm considering redrawing it in accordance with other 9patches that are similar but I don't know if this will work.
#17
Posted 30 November 2012 - 06:39 PM
98KB 14 downloads
Edit: I did check APK Manager and it did not list any .9 PNGs as the culprit for this.
#18
Posted 04 December 2012 - 03:37 PM
Nevermind, I figured that out! lol
#19
Posted 04 December 2012 - 03:53 PM
I will add though... The screen shot above does not appear to be related to dependencies... It appears as if your apktool doesn't know how to handle the resources for the apk properly.
Sent from my HTC6435LVW using Tapatalk 2
#20
Posted 04 December 2012 - 03:55 PM
2 user(s) are reading this topic
0 members, 2 guests, 0 anonymous users