[GUIDE] Theme editing and related things.

Let me start by saying that this will be by means not a definitive guide and my way of doing things may not exactly be the best or quickest way to do things but this is how i learnt to do the things i have done for the themes for Japanese Jellyfish and Pauls rom. I am just trying to pool together everything i have learnt along the way so you guys can maybe help yourselves a little.

Note! To avoid errors my method of editing a theme is to decompile framework-res.apk, make .xml changes, recompile and add images in later. Other than the steps detailed in the circle battery mod. It is always good practise to start from a clean framework-res.apk to avoid any errors.

Index.

0. Tools
0a. Framework-res.apk Tools
0b. Services.jar Tools

1. Framework-res.apk editing.
1a. Decompiling and recompiling.
1b. Changing images in an .apk.
1c. Circle Battery Mod.
1d. Changing framework-res text colours.
1e. Changing progress bar colours.
1f. Black/Dark Popup Menu Style.

2. Services.jar editing.
2a. Changing statusbar clock colours.
2b. Statusbar Pulldown Transparency.

3. Other Editing.
3a. Extended notification area text colour changes.

98. Creating an update.zip.

99. Credits.

0a. Framework-res.apk Tools.

All my work is done on a Windows 7 x32 box.

Editpad lite is used for all xml changes.
APKtool used for decompiling and recompiling apks. Link at bottom of page for APKtool 1.3.1 Windows
WinRAR for editing the .zip files and also adding images to .apk!

0b. Services.jar Tools.

Yet again all work done an a Windows 7 x32 box.

Editpad lite is used for smali file changes.
Avabox for Baksmali and other useful tools!

1a. Decompiling and recompiling framework-res.apk.

You need to download APKTool from the tools section and extract it and run install.bat. Once you have done this you only need to place framework-res.apk (or any other .apk file!) in the APKTool folder and run APKTool_Decompile.bat, this will decompile all .apk's in the folder. Once deoompiled you will be able to make all your changes to the .xml files using a text editor like Editpad Lite.

To recompile you just need to run APKTool_buiuld.bat. It will pop up a command window and you drag and drop your decompiled framework-res folder or other to this window and press enter. If it compiles with only "no default translation" errors then it is fine. Your compiled .apk will be output to /framework-res/dist/ folder or whatever your .apk name was. e.g. /apkname/dist/apkname.apk.

Alternatively APKTool allows manual commands. Open a cmd window in the APKTool directory and run "apktool d apkname.apk outputfoldername" to decompile and "apktool b outputfoldername newapkname.apk" to build your modified .apk. 

Something to note is that if you add xml that points to new images (extra battery images) then you must also add these extra images to the right folder or the apk will fail to compile.

1b. Changing images in an .apk.

If you only want to change images in an .apk you can do this without even decompiling the framework-res.apk. Simply open the .apk using WinRAR and change the images with new ones. If swapping images from one .apk to another you can actually extract the old .apk to a folder using WinRAR and then browse to see the images you want. Select them and drag and drop to the same corresponding folder in your new .apk using WinRAR. This is useful for changing simple things like icons, battery images etc. As long as the images are like for like number of images. If you want to add extra battery images for example battery circle mod then that is covered in another section.

Things to note when adding the images using WinRAR make sure the settings are "update mode = add and replace files" and "compression method = normal".

1c. Circle Battery Mod.

To add the circle battery mod (not just circle but 100 battery images, 100 charging images) to your framework-res.apk you must first decompile the framework-res.apk using section 1a. Once this is done there are 3 xml files that need replacing and 1 extra xml that needs adding to your decompiled folder. You can  download the pre edited files here and add them to your decompiled folder overwriting where necessary.

The files and locations are,

/framework-res/res/drawable/stat_sys_battery.xml
/framework-res/res/drawable/stat_sys_battery_charge.xml
/framework-res/res/drawable/zzz_stat_sys_battery_1.xml (only present in circle mod!)

/framework-res/res/values/public.xml

Once you have overwritten the .xml files you MUST add the extra battery images to the /res/drawable/drawable-hdpi-v4 folder to match what the .xml thinks are there. overwriting the old ones where necessary. For the provided .xml files this must be 101 battery images and 103 including all charging images the full image and the unknown image. That means 204 total images with the words "stat_sys_battery...". As long as all images are replaced correctly the framework-res.apk will compile with no errors using the instructions in 1a. (You will get "no default translation" errors, these are fine.) That is everything for circle battery mod. Please note if your battery images only have 5 or 6 it is possible to edit the .xml to remove references to extra images.

1d. Changing framework-res text colours.

If you are editing a framework-res.apk sometimes you will need to change the colours of the status bar text, date etc to make it fit the theme. This section will detail the files to change. All colours for these are stored in the following .xml files. Decompile framework-res first.

/framework-res/res/layout/status_bar.xml
/framework-res/res/layout/status_bar_expanded.xml
/framework-res/res/layout/status_bar_latest_event_content.xml

These can be edited using Editpad Lite or notepad etc. All colours are in hex format. #ff being the beginning and the following 6 characters being the colour. #ff000000 being black or #ffffffff being white. You can make the last 6 characters any hex colour.

/framework-res/res/layout/status_bar.xml

The first two hex codes in this are for the ticker text in the status bar when you recieve a message or plug in your phone and it tells you usb connected etc. The last one is for the colour of the date in the pulled down status bar.

/framework-res/res/layout/status_bar_expanded.xml

The first two hex codes here are for the colour of your carrier e.g T-Mobile and your carrier name whilst roaming e.g. T-Mobile Orange. The last hex code here controls the colour for the "clear" button text when you have a notification.

/framework-res/res/layout/status_bar_latest_event_content.xml

The 3 hex codes in here are all for notifications Title colour, description text and notification time in that order. These are the notifications you would see when you pull down your notifications bar and you have a text or a download going or something like that.

Once you have made your changes you can recompile using section 1a. To change the notifications clock colour you need to edit services.jar. This is covered in another section. See index.

1e. Changing progress bar colours.

To change the colour of the progress bars for downloads, volume changing and browser page loading etc you need to decompile framework-res.apk using 1a. Now go to /res/drawable/ and open progress_horizontal.xml using Editpad Lite or similar. There are a total of 9 hex codes here. The first line of three are for the background of the progress bar. The last 6 hex codes are for the colour of the actual bar. You can change them to whatever you like here but i usually change the last 6 to all the same colour. Unless you want to expermient to get a gradient. Once edited save the progress_horizontal.xml and recompile your framework-res.

1f. Black/Dark Popup Menu Style.

In my Gingerbread theme there is an option for dark menu pops. These looks great however certain apps may not use them. (Root explorer etc, i don't know how to fix these.) Most Google apps etc will be fine though. If you want an example go flash the Gingerbread theme with black menu and look around. Now for how to do it. I have included full sections of text to make the sections easier to identify and copy and paste over if you need to.

You need to follow section 1a. to decompile your framework-res.apk. Now browse to /framework-res/res/values/ and open styles.xml in your favourite text editor.

For the pop up buttons text you need to find this line..

<style name="TextAppearance.Widget.IconMenu.Item" parent="@style/TextAppearance.Small">
                <item name="textColor">?textColorPrimaryInverse</item>
        </style>

and change it to...

<style name="TextAppearance.Widget.IconMenu.Item" parent="@style/TextAppearance.Small">
                <item name="textColor">@color/bright_foreground_dark</item>
        </style>

Now some Google apps extended popup menus will still need changing. On to the next step. Search for...

<style name="Theme.IconMenu" parent="@style/Theme">
                <item name="windowAnimationStyle">@style/Animation.OptionsPanel</item>
                <item name="background">@null</item>
                <item name="itemTextAppearance">@style/TextAppearance.Widget.IconMenu.Item</item>
                <item name="horizontalDivider">@drawable/divider_horizontal_bright</item>
                <item name="verticalDivider">@drawable/divider_vertical_bright</item>
                <item name="itemBackground">@drawable/menu_selector</item>
                <item name="itemIconDisabledAlpha">?disabledAlpha</item>
                <item name="moreIcon">@drawable/ic_menu_more</item>
        </style>

and change this to...

<style name="Theme.IconMenu" parent="@style/Theme">
                <item name="windowAnimationStyle">@style/Animation.OptionsPanel</item>
                <item name="background">@null</item>
                <item name="itemTextAppearance">@style/TextAppearance.Widget.IconMenu.Item</item>
                <item name="horizontalDivider">@drawable/divider_horizontal_dark_opaque</item>
                <item name="verticalDivider">@drawable/divider_vertical_dark</item>
                <item name="itemBackground">@drawable/menu_selector</item>
                <item name="itemIconDisabledAlpha">?disabledAlpha</item>
                <item name="moreIcon">@drawable/ic_menu_more</item>
        </style>

And also search for this section...

<style name="Theme.ExpandedMenu" parent="@style/Theme">
                <item name="listViewStyle">@style/Widget.ListView.Menu</item>
                <item name="windowAnimationStyle">@style/Animation.OptionsPanel</item>
                <item name="background">@null</item>
                <item name="itemTextAppearance">?textAppearanceLargeInverse</item>
        </style>

and change it to...

<style name="Theme.ExpandedMenu" parent="@style/Theme">
                <item name="listViewStyle">@style/Widget.ListView</item>
                <item name="windowAnimationStyle">@style/Animation.OptionsPanel</item>
                <item name="background">@null</item>
                <item name="itemTextAppearance">?textAppearanceLarge</item>
                        <item name="itemBackground">@drawable/menu_selector</item>
        </style>

You will also need to browse to /res/drawable/ and open menu_selector.xml with EditPad or similar. Change this text...

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/highlight_pressed" />
        <item android:state_enabled="false" android:state_selected="true" android:drawable="@drawable/highlight_disabled" />
        <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/highlight_selected" />
        <item android:state_focused="true" android:state_enabled="false" android:drawable="@drawable/highlight_disabled" />
        <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/highlight_selected" />
</selector>

To the following, which just adds the bottom line to it.

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/highlight_pressed" />
        <item android:state_enabled="false" android:state_selected="true" android:drawable="@drawable/highlight_disabled" />
        <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/highlight_selected" />
        <item android:state_focused="true" android:state_enabled="false" android:drawable="@drawable/highlight_disabled" />
        <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/highlight_selected" />
        <item android:drawable="@drawable/screen_background_dark" />
</selector>

That's all the .xml work done so follow the steps in 1a. to recompile your framework-res.apk. Once done you need to change the button images for dark ones. You can  download my black ones from my Gingerbread theme here and use them. Extract the .zip file and open the framework-res.apk with WinRAR, browse to /res/drawable-hdpi-v4/ and drag and drop the menu popup images here replacing the old images. Job done!

2a. Changing statusbar clock colours.

You will need to have downloaded AVAbox and extracted it for this part. Changing most text colours is covered in section 1d. However the most painful text colour is the statusbar clock to change. 

First take your Services.jar from your current rom. (ADB Pull or from rom zip!) Open the services.jar using WinRAR and extract the classes.dex. Now drop the classes.dex into the /AVAbox/Smali/baksmali/ folder. Open a command prompt in this directory and type "java -jar baksmali-1.1.jar -o classout/ classes.dex" to decompile the classes.dex to a folder called classout.

Now browse to /classout/com/android/server/status/ and open the file "StatusBarIcon.smali" with Editpad Lite or another text editor. In Editpad Lite press ctrl+f to bring up search and put in "const/high16 v6, -0x100" if you have a stock services.jar it will take you to around line 60. The text we searched for was the black clock. Now you can change the line "const/high16 v6, -0x100" to "const v6, -0x1". This makes the black clock change to white text. Now you can simply save the file and go back to the main baksmali directory. Delete the old classes.dex and run this command from the baksmali directory. "java -jar smali-1.1.jar classout -o classes.dex". This will create a new classes.dex from your edited folder. 

Simply open your old services.jar with WinRAR and drag and drop the new classes.dex into it. Making sure the options are set as "update mode = add and replace files" and "compression method = normal".

If you want the clock colour anything other than black or white it's a bit more complicated as the colours are in what is known as 1's compliment hex codes. You take the hex colour you want then convert it using the following table.

So for example if you start with 8fce00, you take each character and convert it using the table. 8 becomes 7, f becomes 0, c becomes 3, e becomes 1, 0 becomes f and finally 0 becomes f. 8fce00 = 7031ff. So you would add "const v6, -0x7031ff" in at line 60 in "StatusBarIcon.smali" to make the clock the green colour i started with which was 8fce00.

2b. Statusbar Pulldown Transparency.

To make the background of the pulled down notification background transparent you will need to first make sure your status_bar_background.png from /framework-res/res/drawable-hdpi-v4/ (decompiled framework) is a transparent image. I have one in my "Elegant Steel" theme port. However you also need to edit the services.jar to support it. You can replace the image using the steps in 1b.

As with 2a. you need to open services.jar using WinRAR, extract the classes.dex and put it in the /AVAbox/Smali/baksmali/ folder. Open a command prompt in this directory and type "java -jar baksmali-1.1.jar -o classout/ classes.dex" to decompile the classes.dex to a folder called classout.

Now browse to /classout/com/android/server/status/ and open StatusBarService.smali with Editpad Lite or similar. Go to line .1536 in this file and you will see, "const/4 v5, 0x2" below it. This needs to be changed to "const/4 v5, -0x3" and then save the file. Now go back to the main baksmali directory. Delete the old classes.dex and run this command from the baksmali directory. "java -jar smali-1.1.jar classout -o classes.dex". This will create a new classes.dex from your edited folder. 

Simply open your old services.jar with WinRAR and drag and drop the new classes.dex into it. Making sure the options are set as "update mode = add and replace files" and "compression method = normal".

3a. Extended notification area text colour changes.

For the Music.apk you simply need to decompile the file with apktool as per 1a. Now go to /Music/res/layout/ and open statusbar.xml with editpad. Look for "?android:textAppearanceMediumInverse" and "?android:textAppearanceSmallInverse", simply remove the "Inverse" part from each line and save the file. Recompile, resign (not sure if it's needed but i do anyway) and push back to device. Music.apk would probably work across any rom as long as it is signed the same. (If it's even needed!)

For DownloadProvider.apk i did it slightly differently due to getting force closes after compiling with apktool. I simply opened the .apk and extracted the file, "status_bar_ongoing_event_progress_bar.xml" from /res/layout/. Now open this file with a hex editor and open a search box. Search for hex code "0800001C", there are 3 instances of this. After each one you need to change the following 6 characters. They all start as "0800001C 000000FF" where the six zeroes are black and need to be changed to "0800001C FFFFFFFF" where the six F's represent white. Now save and exit. Copy this file back into the correct location in DownloadProvider.apk. It will not need resigning. Push this file to your device. Done!

98. Creating an update.zip.

You can  download a blank update.zip here that will write any files you add to it to your framework folder. It has a very simple update-script that will only write any files you put in system to system on your device. So you can add your edited framework-res.apk, services.jar or both and flash it to see your changes. All you need to do is download the file, open it using WinRAR, browse to the /system/framework/ folder and drag and drop your changed files into here.

99. Credits.

It's impossible to remember where i got everything from to write this because it's mostly from memory and snippets i've saved form various sources. Big thanks however to The Ultimate Android Theming Guide (which is a bit outdated for us SF users), Modaco's forums and users, XDA's forums and users. 

Big thanks to Paul, kallt_kaffe, fibblesan, sebastian and anyone else who contributes the kind of stuff these guys do!

Also a big thanks to anyone downloading and using themes i have ported or created it's all for you!