I’ve seen many people asking for a step-by-step guide to making a theme so I thought I’d attempt to fulfill this request. I will be using this method to edit a few files but this method can be used to create a theme for any ROM.
Mad props to DaSchmarotzer and karandpr for their help with this tutorial.
I am not responsible for any problems that result from following this tutorial
I have attempted to keep this tutorial as basic as possible but please let me know if you have any questions.
You will need the following skills
* Basic computer skills
* Downloading files
* Unzipping files
* File management
* Image editing
* Web browser
* A rooted android device
* Amon_RA recovery or ClockworkMod recovery
* Image editor – GIMP is free but Photoshop works just as well
* APK Manager – available here (Windows version is preferred)
* Your favorite beverage
Obtaining the required files
First we’ll need a ROM. I’ll be using the Fresh Evo 18.104.22.168 ROM for this walk-through, available here, but this walk-through can be used to make a theme for any android ROM.
NOTE ON THEMES:
When creating a new theme it is imperative that you begin with the same files that are included in the ROM you plan to use. Creating a theme for, say, ROM A will cause problems when using that theme on ROM B. Do not attempt to mix themes and ROMS. You will need to create a new theme each time you flash a new ROM.
NOTE ON PACKAGES: The required packages are in different locations for different versions of Android. Different packages may also be needed for each manufacturer.
Let me know which packages are required for theming the various manufacturer ROMs and I will add them.
All Froyo ROMs:
All Gingerbread ROMs:
Manufacturer specific ROMs:
The above packages will be needed in addition to the below requirements.
Sense UI ROMs:
Samsung Froyo ROMs:
* /system/framework/twframework-res.apk – Notification menu
Since Fresh Evo 22.214.171.124 is a Froyo ROM with htc’s Sense UI we’ll need the following packages in order to create a theme:
If this were a Gingerbread ROM we would need these packages plus /system/app/SystemUI.apk
Extracting the ROM and packages
Once you have the ROM you’ll need to extract it so you can work with the correct packages. I used a zip file extractor to extract the ROM and also to extract the com.htc.resources.apk and framework-res.apk packages which are located inside this ROM. Make sure you keep untouched copies of the packages that you extract from the ROM because you’ll be adding the edited images back to those packages later.
Decompiling the packages
Please note that this step isn’t a requirement: you could modify most picture files directly in the package (such as framework-res.apk). However, it will be much easier to modify the .9.png files and you will be able to edit important xml files making the theme much more customizable.
Unzip the APK Manager package and go into the folder that was produced. Launch APK Manager and follow the instructions. Choose “y” when it asks if you want to clean out all of your current projects. This will create some required folders that you will need to work in.
Place the package you want to modify in the “place-apk-here-for-modding” folder. Run APK Manager and select the 22th option to pick your project. Follow to onscreen directions to pick the apk you want to modify. Then, select the ninth option, “Decompile apk” (You might have to use the tenth one, but I won’t give more details).
You should now see a folder named after the decompiled package in the “projects” folder of APK Manager. That’s where you will edit the images and different files.
Editing the images
Now that we have extracted the ROM and required packages, it’s time to edit the images. I use the GIMP on a Linux machine to do all of my graphics work but Photoshop works just as well.
The images I will be working with in this tutorial are:
From the com.htc.resources.apk package:
From the framework-res.apk package:
I won’t go into how to edit the individual images as that is beyond the scope of this tutorial. Use your imagination and personalize your images as needed.
What are .9.png files?
I won’t be using this type of image in this tutorial but I wanted to touch on it for users who want to edit these images.
A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. An example use of a NinePatch is the backgrounds used by standard Android buttons — buttons must stretch to accommodate strings of various lengths. A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide border. It must be saved with the extension .9.png in your project so it can be compiled when you build your project.
This page has a nice explanation of what is required.
If you have decompiled the package (you should have if you followed the tutorial), you will see that the .9.png files have a 1 pixel transparent border with a few 100% black pixels around. You can modify them directly and the border will disappear when you compile the package again. If you haven’t decompiled the package, you will see regular images, but modifying them will cause different problems as they will not stretch correctly and might cause incompatibility issues with UOT Kitchen for example.
Incorporating edited images into their packages
Open the com.htc.resources.apk folder and drag and drop the 5 GPS icons that you edited into the /res/drawable-hdpi folder – their original location. Make sure you drop the images into the proper folder or your theme won’t change.
Status bar image:
Open the framework-res.apk folder and drag and drop the status bar image that you edited into the /res/drawable-hdpi folder – its original location. Make sure you drop the image into the proper fol
der or your theme won’t change.
Once the edited images have been dropped into their proper places in respective their packages, close the folder. Did I mention that you need to make sure you drop the images into their proper folders or your theme won’t change?
Compiling the package
Open up the APK Manager again. This time, select the 11th option, “Compile apk”. After a short while, you will be asked if it is a system app or not. The answer will probably be yes, since this is a theming tutorial. It will also ask if you would like to copy any additional files to avoid errors. You should pick no since it’s faster and you are less prones to errors. My themes always worked perfectly. You should now find an apk file called “unsignedframework-res.apk” in the “place-apk-here-for-modding” folder (if you were modifying the framework-res package, of course).
Optimizing the package (Tested on Windows only)
This is a great way to enhance the performance of your modified packages. Take your compiled apk and place it into the “place-apk-here-to-batch-optimize” folder. Rename it to remove the “unsigned” part: you won’t have to sign system applications. In APK Manager, select the 15th option: “Batch Optimize Apk”. You will be asked what you want to do specifically, type zp and press enter. This will take a while, so enjoy your beverage.
Creating the flashable theme
I have supplied a blank theme template which you can use to create your theme. This template can be found here and includes a README.txt file. Download the theme template and unzip it to find a README file and 3 folders. Place the edited package according to this table AFTER you have edited the images and added them back to their proper packages:
framework-res.apk – framework folder
framework-res.apk – framework folder
SystemUI.apk – app folder
com.htc.resources.apk – framework folder
If this will be a Gingerbread theme you’ll need to add the following line to the /META-INF/com/google/android/updater-script file BETWEEN the run_program lines:
There is already a package_extract_dir line there for framework, leave it there and add the above line under the existing line.
Signing the theme
Once the edited packages are in the proper places for the theme you’ll need to sign the theme. APK Manager is an awesome tool and I would recommend keeping a copy of it for future use.
1. Place the theme zip file that you created earlier into the place-apk-here-for-modding folder
2. Rename the theme zip file to repackaged-unsigned.apk
3. In APK Manager choose item number 4 (Sign apk)
4. When the signing procedure is complete go into the place-apk-here-for-modding folder and your finished theme should be there already renamed to repackaged-signed.apk. This is the package you previously renamed to repackaged-unsigned.apk.
5. Rename this apk package to anything you want but change the .apk file extension to .zip. This is your new theme, place a copy of it somewhere for archival purposes.
Flashing your new theme
1. Place your new theme zip file on your SD card and make note of where it is placed
2. Reboot your phone into your custom recovery image
3. Flash your theme zip file as you would a ROM. I’ve never had to wipe anything prior to flashing a theme and my themes have always worked.
4. Reboot your phone and you should see your new theme
Reverting to the original theme
The easiest way to revert to the original ROM’s theme is to create a flashable from the original packages that were edited. For instance, if you changed anything in framework-res.apk you can simply create a new flashable zip file using the original untouched framework-res.apk and flash it via your preferred recovery. Make sure, however, that you create the new flashable zip file to include untouched versions of ALL of the packages that were edited when you created your theme.
I have been creating themes from the above steps for some time and I’ve never had any problems with this procedure. Please let me know if there is anything I can do to improve this tutorial. I hope you enjoyed this tutorial and I look forward to seeing some new screenshots
Small package of artwork that can be used with this tutorial to theme the notification bar. The artwork package can be found here.