"If you can't explain something simply, you don't know it well enough" -Albert Einstein
There are a ton of guides available for theming, but I have always found most to be either a) erroneous b) way over complicated or c) out of date. I'll try to keep this simple, easy to understand, and up to date.
Introduction
There are 2 main ways to theme. You can choose the more powerful “zip” style that gives you complete control but is more difficult and time consuming to maintain, or you can choose the “theme chooser” method that is much easier to maintain, but is more limited. A lot of themers will do a theme chooser apk and supplement it with an additional zip file that finishes things the theme chooser cannot. That’s what i do. I recommend Linux for theming since more of the advanced concepts are best done on linux. (Git, source building, etc) For the purpose of this guide, I’ll use my Elegant Dusk as a reference and Ubuntu 12.04 as my distribution of Linux.
Decompiling
Without building directly from source, you'll need apktool to decompile apps. We'll use Apkmultitool for this, since it will sign your apps with a debug key so you can actually install them to your device.
Download this ApkMultiTool, (Choose the "Linux Version 1.0" at the bottom) then extract it to your desktop, then rename the folder ApkMultiTool.
Once extracted, open a terminal and go to that directory by typing
If you got an error about optipng and sox are not in your path, simply open another terminal and run this:
Now, we need to patch the aapt to the newest version. In your Android SDK folder, look in the platform-tools folder and grab the aapt file from there and place it in the /other folder in ApkMultiTool. This ensures you have the latest aapt (Android Assets Packaging Tool)
Minimize that and place ElegantDusk.apk into the place-here-for-modding folder. Then maximize the script and choose option 9 to decompile. You should now have a /out folder with several things in it. This is our project folder to begin theming. Navigate to /out/res and let's begin.
Working with Images
First, you'll need an image editor. Since we're using Linux, i recommend the GIMP. Open a terminal (Ctrl + Alt + T) and run this:
Ok, you've edited an image and are ready to test it on your phone. Let's say you want to change the settings background. That's controlled by frameworks_res_background_holo_dark.png in the drawable-nodpi folder of my theme. Change it however you want. If you're done and ready to compile, refer back to the recompile section above. Or, continue on for more tips.
What the heck is a .9.png file?
Android has devised a method of special metadata that can stretch an image in certain ways so it doesn't have to store tons of large image files in it's resources. In other words, it's an optimization technique. We can edit these easily within GIMP, or we can redraw them with a tool that comes with the AndroidSDK called draw9patch.bat. It's in the /tools folder. Let's look at one.
See the 1 pixel black lines around it? The position of that tells android how and where to stretch the image, as well as where content (ie text) can be displayed inside it. The top and left sides tell android where to stretch and the bottom/right tell it where content can be displayed. As we see, content can be displayed everywhere, and the image is stretched in only a small part. For theming, you NEVER want to touch the black lines, so when you change something inside (the gray area), make extremely sure to never alter them in any way. It will cause literally dozens of compile errors with no warning as to which file caused it (a huge pain).
Working with XML
XML (eXtensible Markup Language) is the primary code language we'll be dealing with in theming. There are a TON of programs that can edit xml, but since we deal with it a lot, it's good to get one that looks nice and has syntax correction. I recommend Sublime Text 2. Let's install it with these 3 commands. Run them seperate.
sudo add-apt-repository ppa:webupd8team/sublime-text-2
sudo apt-get update
sudo apt-get install sublime-text-2
Now let's look at a simple XML. Go to /res/values/colors.xml and open it with sublime text. (Right click>open with) You'll see this:
The values are on the right side listed as #ffffffff or similar. These are hexadecimal ARGB color codes. Each set of 2 letters/numbers represent something. The first two (Alpha) are the transparency. FF means fully opaque and 00 means fully transparent. 50 would be 50% transparent. The next set of two (R) represent the red value, or how much red is in the color shade. Again, FF is fully saturated pure red and 00 is no red at all. The same applies to the next two sets. (Green and Blue) This makes up ARGB, so the example of #ffffffff would be fully opaque and full colors of red, green, and blue, which make white. So the hex for white is #FFFFFFFF.
ICS Blue is #ff33b5e5, just in case you are wondering.
Change any values you like, and then simply hit save at the top menu.
Ok, so what about changing more than just colors that were already there? Read on:
Let's say you wanted to change an entire style. I'll use MMS as an example. There are tons of "inverted MMS" apps out there, mainly because it is one of the easiest apps to invert. We want to change the light style to a dark style, so how do we do that? There are a handful of edits we need to do, but since we are concentrating on styles, let's start there. Open /res/values/styles.xml and search for theme.holo.light.darkactionbar. Found it? Change it to theme.holo (so, delete the .light.darkactionbar part) we've just told MMS to use the android "holo" style, which is dark with white text. There's a lot more to it, but this is a simple example of redirecting styles within an app.
Compiling
This is where it gets fun. There can be a lot of errors at this point so be patient. After you've edited your images and .pngs you need to pack it all up again. Maximize your script.sh again and choose option 10 for compile. If you need, scroll up when it's done to see if it built ok. It should look like this:
Odds are you might get some errors at this stage, so copy the log and post it in a pastebin or similar and i'll try to help as time permits. If no errors, you now need to sign it. If you look in the place-here-for-modding folder, there will now be an unsigned apk waiting. After choosing option 11 to sign, it will change to a signed apk, and you can rename it whatever you like and install like a regular app.
There are a ton of guides available for theming, but I have always found most to be either a) erroneous b) way over complicated or c) out of date. I'll try to keep this simple, easy to understand, and up to date.
Introduction
There are 2 main ways to theme. You can choose the more powerful “zip” style that gives you complete control but is more difficult and time consuming to maintain, or you can choose the “theme chooser” method that is much easier to maintain, but is more limited. A lot of themers will do a theme chooser apk and supplement it with an additional zip file that finishes things the theme chooser cannot. That’s what i do. I recommend Linux for theming since more of the advanced concepts are best done on linux. (Git, source building, etc) For the purpose of this guide, I’ll use my Elegant Dusk as a reference and Ubuntu 12.04 as my distribution of Linux.
Decompiling
Without building directly from source, you'll need apktool to decompile apps. We'll use Apkmultitool for this, since it will sign your apps with a debug key so you can actually install them to your device.
Download this ApkMultiTool, (Choose the "Linux Version 1.0" at the bottom) then extract it to your desktop, then rename the folder ApkMultiTool.
Once extracted, open a terminal and go to that directory by typing
Now, we need to make the script executable. From the open terminal, type
then type ./Script.sh to execute it.
If you got an error about optipng and sox are not in your path, simply open another terminal and run this:
You should get a menu like this:
Now, we need to patch the aapt to the newest version. In your Android SDK folder, look in the platform-tools folder and grab the aapt file from there and place it in the /other folder in ApkMultiTool. This ensures you have the latest aapt (Android Assets Packaging Tool)
Minimize that and place ElegantDusk.apk into the place-here-for-modding folder. Then maximize the script and choose option 9 to decompile. You should now have a /out folder with several things in it. This is our project folder to begin theming. Navigate to /out/res and let's begin.
Working with Images
First, you'll need an image editor. Since we're using Linux, i recommend the GIMP. Open a terminal (Ctrl + Alt + T) and run this:
Once that's done, launch gimp (either from the dash or by typing gimp into a terminal) and we're ready to theme. I can't get into a full GIMP tutorial here, but that will get it installed, and you can either play with it or find some of the zillion gimp tutorials.
Ok, you've edited an image and are ready to test it on your phone. Let's say you want to change the settings background. That's controlled by frameworks_res_background_holo_dark.png in the drawable-nodpi folder of my theme. Change it however you want. If you're done and ready to compile, refer back to the recompile section above. Or, continue on for more tips.
What the heck is a .9.png file?
Android has devised a method of special metadata that can stretch an image in certain ways so it doesn't have to store tons of large image files in it's resources. In other words, it's an optimization technique. We can edit these easily within GIMP, or we can redraw them with a tool that comes with the AndroidSDK called draw9patch.bat. It's in the /tools folder. Let's look at one.
See the 1 pixel black lines around it? The position of that tells android how and where to stretch the image, as well as where content (ie text) can be displayed inside it. The top and left sides tell android where to stretch and the bottom/right tell it where content can be displayed. As we see, content can be displayed everywhere, and the image is stretched in only a small part. For theming, you NEVER want to touch the black lines, so when you change something inside (the gray area), make extremely sure to never alter them in any way. It will cause literally dozens of compile errors with no warning as to which file caused it (a huge pain).
Working with XML
XML (eXtensible Markup Language) is the primary code language we'll be dealing with in theming. There are a TON of programs that can edit xml, but since we deal with it a lot, it's good to get one that looks nice and has syntax correction. I recommend Sublime Text 2. Let's install it with these 3 commands. Run them seperate.
sudo add-apt-repository ppa:webupd8team/sublime-text-2
sudo apt-get update
sudo apt-get install sublime-text-2
Now let's look at a simple XML. Go to /res/values/colors.xml and open it with sublime text. (Right click>open with) You'll see this:
The values are on the right side listed as #ffffffff or similar. These are hexadecimal ARGB color codes. Each set of 2 letters/numbers represent something. The first two (Alpha) are the transparency. FF means fully opaque and 00 means fully transparent. 50 would be 50% transparent. The next set of two (R) represent the red value, or how much red is in the color shade. Again, FF is fully saturated pure red and 00 is no red at all. The same applies to the next two sets. (Green and Blue) This makes up ARGB, so the example of #ffffffff would be fully opaque and full colors of red, green, and blue, which make white. So the hex for white is #FFFFFFFF.
ICS Blue is #ff33b5e5, just in case you are wondering.
Change any values you like, and then simply hit save at the top menu.
Ok, so what about changing more than just colors that were already there? Read on:
Let's say you wanted to change an entire style. I'll use MMS as an example. There are tons of "inverted MMS" apps out there, mainly because it is one of the easiest apps to invert. We want to change the light style to a dark style, so how do we do that? There are a handful of edits we need to do, but since we are concentrating on styles, let's start there. Open /res/values/styles.xml and search for theme.holo.light.darkactionbar. Found it? Change it to theme.holo (so, delete the .light.darkactionbar part) we've just told MMS to use the android "holo" style, which is dark with white text. There's a lot more to it, but this is a simple example of redirecting styles within an app.
Compiling
This is where it gets fun. There can be a lot of errors at this point so be patient. After you've edited your images and .pngs you need to pack it all up again. Maximize your script.sh again and choose option 10 for compile. If you need, scroll up when it's done to see if it built ok. It should look like this:
Odds are you might get some errors at this stage, so copy the log and post it in a pastebin or similar and i'll try to help as time permits. If no errors, you now need to sign it. If you look in the place-here-for-modding folder, there will now be an unsigned apk waiting. After choosing option 11 to sign, it will change to a signed apk, and you can rename it whatever you like and install like a regular app.
Last edited:
