View Single Post
Old June 3rd, 2011, 01:20 PM   #1 (permalink)
Blame it on me
Thread Author (OP)
DaSchmarotzer's Avatar
Join Date: Mar 2010
Location: Québec, Canada
Posts: 3,087
Carrier: Not Provided

Thanks: 442
Thanked 1,559 Times in 783 Posts
Default [TUTORIAL] Theming walkthrough v. 1

Warning, this thread is outdated. No support will be given. The links and pictures of the first post are down. You can still learn from it: the general idea is still the same. The "tips" given on the second post are still useful.

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

Goals of this tutorial
* Edit the GPS icons that appear in the status bar as well as the status bar itself
* Create a theme zip file that can be flashed in a custom recovery

You will need the following skills
* Basic computer skills
* Downloading files
* Unzipping files
* File management
* Image editing

Tools needed
* Web browser
* A rooted android device
* Busybox
* 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 ROM for this walk-through, available here, but this walk-through can be used to make a theme for any android ROM.

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.

Required packages
Let me know which packages are required for theming the various manufacturer ROMs and I will add them.

All Froyo ROMs:
* /system/framework/framework-res.apk

All Gingerbread ROMs:
* /system/framework/framework-res.apk
* /system/app/SystemUI.apk

Manufacturer specific ROMs:
The above packages will be needed in addition to the below requirements.

Sense UI ROMs:
* /system/framework/

Samsung Froyo ROMs:
* /system/framework/twframework-res.apk - Notification menu

Since Fresh Evo is a Froyo ROM with htc's Sense UI we'll need the following packages in order to create a theme:
* /system/framework/
* /system/framework/framework-res.apk

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 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 package:
* /res/drawable-hdpi/sym_gpsone_0_sprint.png
* /res/drawable-hdpi/sym_gpsone_0_vzw.png
* /res/drawable-hdpi/sym_gpsone_3_sprint.png
* /res/drawable-hdpi/sym_gpsone_3_vzw.png
* /res/drawable-hdpi/sym_gpsone_none.png

From the framework-res.apk package:
* /res/drawable-hdpi/statusbar_background.png

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
GPS icons:
Open the 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 folder 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:

Froyo ROMs:
framework-res.apk - framework folder

Gingerbread ROMs:
framework-res.apk - framework folder
SystemUI.apk - app folder

Sense ROMs: - 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:

package_extract_dir("app", "/system/app");
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
DaSchmarotzer is offline  
Last edited by DaSchmarotzer; March 27th, 2012 at 08:32 PM. Reason: Changed OP
The Following 20 Users Say Thank You to DaSchmarotzer For This Useful Post:
9to5cynic (July 4th, 2011), AndyOpie150 (June 22nd, 2011), bk201123 (August 18th, 2011), cds0699 (June 5th, 2011), chevanlol360 (January 25th, 2012), DaSchmarotzer (June 8th, 2011), DemonMonk (May 25th, 2012), El Presidente (June 5th, 2011), eyebeam (June 3rd, 2011), funkyman (March 30th, 2012), gbiggie (May 22nd, 2012), Granite1 (July 11th, 2011), melissapugs (July 21st, 2011), MikeC1408 (June 3rd, 2011), moto179 (May 20th, 2012), nuked (January 11th, 2012), PatHoge (June 6th, 2011), Sak01 (June 4th, 2011), Shaddow313 (August 23rd, 2012), sweeds (June 7th, 2011)