Saturday, October 29, 2011

How to Theme Android Framework

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 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
* Your favorite beverage 

Obtaining the required files
First we'll need a ROM, I'll be using the CyanogenMod 7.1.0 ROM for my device for this walk-through. You can get ROMS compatible with your device from here. Search ROM for the required device on that site.

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 being used 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
Froyo ROMs:
* /system/framework/framework-res.apk

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

Sense UI ROMs:
Packages from Froyo or Gingerbread and
* /system/framework/

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

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

From the framework-res.apk package:
* /res/drawable-mdpi/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.

Incorporating edited images into their packages
Once we have edited our images we need to place them back into their respective packages, this is where the untouched copies of the packages come into play.

GPS icons:
Open the untouched package in a zip file manager 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 untouched framework-res.apk package in a zip file manager and drag and drop the status bar image that you edited into the /res/drawable-mdpi 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 packages. Did I mention that you need to make sure you drop the images into their proper folders or your theme won't change?

Creating the flashable theme
Froyo ROMs:
framework-res.apk - framework folder

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

Sense ROMs: - framework folder

Now just replace the framework-res.apk and SystemUI.apk in the original ROM which you had downloaded using WinRAR. This should be easy.

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.

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.

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 for myself 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 screenshot.

Hope it Helps you!

Credits: My own little naughty Brain. :D


Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More