[GUIDE] Theme editing and related things.

[Guest IronDoc]

Really good guide. I hope for your sake that putting update.zip at 98 was just a precaution.

[Guest Bazza76]

Thanks for putting up the dark menu xml changes.

Thanks

B

[Guest Frankish]

Not sure

Thanks for putting up the dark menu xml changes.

Thanks

B

I don't think that sections up to date. Root explorer menus not fixed. Will post up to date changes later today which fully changes things.

[Guest Frankish]

Updated Black Menu's section now. It should if followed fully make all menus black including Root Explorer and other apps ;)

[Guest superkryo]

Updated Black Menu's section now. It should if followed fully make all menus black including Root Explorer and other apps ;)

Thanks Frankish. I have missed your update on making all menus black in the JJ thread. Very nice to have it on root explorer etc.

[Guest sharpie603]

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.

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

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!

This is the best set of instructions I've ever seen!!! However I cannot get ANYTHING TO COMPILE. Would someone be able to make some changes for me if i sent my framework-res.apk?

[Guest Frankish]

What exactly are you changing in your framework?

[Guest sharpie603]

What exactly are you changing in your framework?

I have the images for the black pop up menus but the text is still back and unreadable. I've tried the instructions but i cant recompile. I've also tried just pulling my framework, extracting it, decompiling it, CHANGE NOTHING ad recompile. still wont work.

[Guest Frankish]

What version of apktool? Newer one was causing issues.

[Guest sharpie603]

What version of apktool? Newer one was causing issues.

I don't know. heres my framework. I've been at this for days and feel like giving up on life. See if you are able to decompile then recompile my framework.

http://hotfile.com/dl/99199899/a95b4fd/fra...rk-res.apk.html

[Guest Frankish]

Decompiles with errors relating to the images. The framework is a butchered one, probably one of mine lol? What rom is the framework from? Are you only trying to add black menus?

[Guest sharpie603]

Decompiles with errors relating to the images. The framework is a butchered one, probably one of mine lol? What rom is the framework from? Are you only trying to add black menus?

t from Axura but I did do editing with the images to add some thing i wanted. Yes all i want it the black menus with reable text. are you able to achieve this?

[Guest Frankish]

t from Axura? What rom are you currently using?

I think it would be possible. Here is what i would do.

Take original theme file from before you edited it. Decompile. Make xml changes etc. Recompile. Drag and drop images from your edited apk to the newly compiled apk. Drag and drop my black menu files to the newly compiled apk.

The new apk should have all modifications and black menus.

[Guest sharpie603]

t from Axura? What rom are you currently using?

I think it would be possible. Here is what i would do.

Take original theme file from before you edited it. Decompile. Make xml changes etc. Recompile. Drag and drop images from your edited apk to the newly compiled apk. Drag and drop my black menu files to the newly compiled apk.

The new apk should have all modifications and black menus.

Tried that wont recompile. i took the stock ROM....Pulled the framework, extracted it, decompiled it, then tried to recompile without changing anything. still wont recompile.

[Guest sharpie603]

t from Axura? What rom are you currently using?

I think it would be possible. Here is what i would do.

Take original theme file from before you edited it. Decompile. Make xml changes etc. Recompile. Drag and drop images from your edited apk to the newly compiled apk. Drag and drop my black menu files to the newly compiled apk.

The new apk should have all modifications and black menus.

If you can get this working for me i'll make a donation to your paypal. I now have a headache and dont even want to bother with it. I've been trying for far to long

[Guest sharpie603]

t from Axura? What rom are you currently using?

I think it would be possible. Here is what i would do.

Take original theme file from before you edited it. Decompile. Make xml changes etc. Recompile. Drag and drop images from your edited apk to the newly compiled apk. Drag and drop my black menu files to the newly compiled apk.

The new apk should have all modifications and black menus.

Here is the stock theme. Please help

http://hotfile.com/dl/99215584/797889a/Sto...a_2271.zip.html

[Guest Phoenix Silver]

how do you create splash.img ?

[Guest Ghazkul]

Frankish, first of all, a big thank you for the guide and the wonderful themes that you have done!

Now over to a question, I am trying to add circle mod to one of your JJ themes, DesireSense-JJELLY.zip. The problem I am having is trying to compile the framework-res.apk file right after I decompiled it. I get a lot of errors and nothing is created. I also tried UOTKitchen and uploaded your apk file and all I got was the same errors, here is a log file: http://circle.glx.nl/viewlog.php?data=VU9U...TEtU0hURi50eHQ=

Any ideas on how to add circle mod to this theme ?

Edited January 25, 2011 by Ghazkul

[Guest sisterchick]

This is an extraordinarily awesome post! Thank you for all the time, expertise and energy this took. THANK YOU!

I was wondering if I could I trouble you for some technical advice. I am trying to port some of my themes to a CM 6.1 nightly build. I've made the needed xml changes to styles.xml and menu_selector.xml to get the black menus and recompiled with no problems. The theme installs and appears fine but I have FCs all over the place with Settings and CyanogenMod settings. What am I doing wrong? Any idea how to fix? I've tried five times now with no luck....

Again, thank you! I'm a designer and definitely not a dev. Just what I needed! :lol:

[Guest Frankish]

This is an extraordinarily awesome post! Thank you for all the time, expertise and energy this took. THANK YOU!

I was wondering if I could I trouble you for some technical advice. I am trying to port some of my themes to a CM 6.1 nightly build. I've made the needed xml changes to styles.xml and menu_selector.xml to get the black menus and recompiled with no problems. The theme installs and appears fine but I have FCs all over the place with Settings and CyanogenMod settings. What am I doing wrong? Any idea how to fix? I've tried five times now with no luck....

Again, thank you! I'm a designer and definitely not a dev. Just what I needed! :lol:

Look up signapk. What you need to do is make sure your modified framework-res.apk and any others are all signed with the same key. Best way of doing this is just to sign your full /system/app/ folder and framework-res.apk with the platform key or test key.

The force closes are 99% being caused by this i think.

[Guest sisterchick]

Look up signapk. What you need to do is make sure your modified framework-res.apk and any others are all signed with the same key. Best way of doing this is just to sign your full /system/app/ folder and framework-res.apk with the platform key or test key.

The force closes are 99% being caused by this i think.

I would have never thought of that. Thank you for such a quick answer and for pointing me in a direction. I was on an express train going nowhere!

[Guest sisterchick]

:lol: Waaaaahhhhh!!! I am still having trouble with my theme. I tried signing and that didn't seem to fix my issues with FC on CM settings. Any other ideas? Below is a link to my latest fail build if that helps. http://dl.dropbox.com/u/6409094/GreenREVO_307_Test7.zip This is for CM6.1 NB307 D/S.

I am using apktool to build/decompile on Win7 x64. Editpad Pro to make xml changes to styles.xml and menu_selector.xml. I made the xml changes to the stock build, recompiled and then ported the updated drawable-mdpi.

[Guest jt_mcg]

Hi Frankish, I didn't think that you were going to be supporting Seb's de-crossed so I did a GB theme and put it in his thread.

I have a couple of questions for you if you have a chance.

1. I'm seemingly failing at recompiling anything with circle battery mods, and getting far more errors than the normal default translation errors, any tips on that?

2. If I can get that figured out, I'll try to work on porting over some of your other themes if you have no objections, but before I release them into the wild what steps were necessary to make them compatible with clockwork 3.x.x.x? Is it as simple as taking one of the compatible .zips and just replacing framework-res.apk and services.jar?

Thanks a million for your guide and all the themes you've done so far, and I'll do what I can to lighten the demands on you with everything else you have going on!

[Guest Frankish]

Hi Frankish, I didn't think that you were going to be supporting Seb's de-crossed so I did a GB theme and put it in his thread.

I have a couple of questions for you if you have a chance.

1. I'm seemingly failing at recompiling anything with circle battery mods, and getting far more errors than the normal default translation errors, any tips on that?

2. If I can get that figured out, I'll try to work on porting over some of your other themes if you have no objections, but before I release them into the wild what steps were necessary to make them compatible with clockwork 3.x.x.x? Is it as simple as taking one of the compatible .zips and just replacing framework-res.apk and services.jar?

Thanks a million for your guide and all the themes you've done so far, and I'll do what I can to lighten the demands on you with everything else you have going on!

1. If there are images there that are not supposed to be there then you will get lots of errors. My themes are pretty butchered. My procedure for anything Circle Battery related is below.

Take fresh de-crossed framework-res.apk, decompile.

Make necessary changes to .xml.

If adding circle battery mod you need to add all battery images to drawable hdpi before recompile. (Ton of errors if images not there!)

Once recompiled open framework-res.apk and add the rest of your images from old framework.

That is my procedure. Like i said if you;re adding circle battery xml and trying to recompile you will get tons of errors unless every battery image is present. Some themes may still have a rogue stat_sys_battery10.png or something...don't copy this only the correct _10 file.

2. Yeah just use the meta-inf folder from one of my compatible zips or like you say, replace the services and framework in a compatible one.

Get in touch if you need any extra help.

[Guest jt_mcg]

1. If there are images there that are not supposed to be there then you will get lots of errors. My themes are pretty butchered. My procedure for anything Circle Battery related is below.

Take fresh de-crossed framework-res.apk, decompile.

Make necessary changes to .xml.

If adding circle battery mod you need to add all battery images to drawable hdpi before recompile. (Ton of errors if images not there!)

Once recompiled open framework-res.apk and add the rest of your images from old framework.

That is my procedure. Like i said if you;re adding circle battery xml and trying to recompile you will get tons of errors unless every battery image is present. Some themes may still have a rogue stat_sys_battery10.png or something...don't copy this only the correct _10 file.

2. Yeah just use the meta-inf folder from one of my compatible zips or like you say, replace the services and framework in a compatible one.

Get in touch if you need any extra help.

Thanks for the quick response!

I thought I was pretty careful on the circle battery but maybe not! They're certainly a bit of a pain. What I'm trying now is a stock decrossed apk ran through the uot kitchen with a circle battery and see if that will recompile cleanly with the other text colour xml changes and then add the theme specific images in after.

The one from uot worked when I flashed it so we'll see anyway! Again many thanks for everything.