Jump to content

[GUIDE] Theme editing and related things.

Guest Frankish

By Guest Frankish
in ZTE Blade / Libra Themes and Design customisation

 Share

Recommended Posts

Guest Frankish

Guest Frankish

Posted
Posted (edited)

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.

81054299.png

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.

fixedtext.png

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 "0800001C000000FF" where the six zeroes are black and need to be changed to "0800001CFFFFFFFF" 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!

Edited by Frankish
Link to comment
Share on other sites
  • Replies 117
  • Created
  • Last Reply

Popular Days

Popular Days

Posted Images

Guest Frankish

Guest Frankish

Posted
Posted

As you can see there is a lot of editing to do to clean it up. You can search the bits you need though using the index numbers. It is a little hard on the eyes at the minute.

Link to comment
Share on other sites
Guest -= 71baker =-

Guest -= 71baker =-

Posted
Posted

This is great stuff Frankish! Now that i know how to change the amount of images for battery i will try to find time for making a better circlebattery for Elegant Steel. 100 frames for the chargins feels way excessive and the roms i have looked at and wanted to try and port has never had that amount of frames.

Thanks a lot for the effort!

Link to comment
Share on other sites
Guest Frankish

Guest Frankish

Posted
Posted

Thanks. Like i said this is by no means an exhaustive list of modifications it's just a list of the things i have done in the past. I just want to give something to this forum it would be nice for this to be stickied but i'm not sure it's important enough to most users to warrant that.

Link to comment
Share on other sites
Guest Xenon0816

Guest Xenon0816

Posted
Posted

Wow! Thanks for your work Frankish!

I haven't read the whole first post yet, but I'm impressed by the effort you involved in this thing!

Great work!

Link to comment
Share on other sites
Guest Frankish

Guest Frankish

Posted
Posted
i love you man :unsure:

how about changing menu text colour, when you press menu soft key

Oops I forgot that part! Will update with that later today after work.

Link to comment
Share on other sites
Guest jtc42

Guest jtc42

Posted
Posted

Is the folder containing styles.xml the same on every theme? I'm looking at the theme files for the new FLB ROM and there is no folder called Values inside the res folder :/

Link to comment
Share on other sites
Guest Frankish

Guest Frankish

Posted
Posted
Is the folder containing styles.xml the same on every theme? I'm looking at the theme files for the new FLB ROM and there is no folder called Values inside the res folder :/

It only appears once decompiled.

Link to comment
Share on other sites
Guest Skillganon

Guest Skillganon

Posted
Posted (edited)

Having problem installing APK Tool. The box appears and disappears quickly. Other than that nothing happens.

Running Win7 64

Edited by Skillganon
Link to comment
Share on other sites
Guest Frankish

Guest Frankish

Posted
Posted
Having problem installing APK Tool. The box appears and disappears quickly. Other than that nothing happens.

Running Win7 64

It has probably worked. Try putting an .apk in the apktool directory then run decompile bat file. Select n for additional resources question.

Link to comment
Share on other sites
Guest Skillganon

Guest Skillganon

Posted
Posted

The Install batch is giving me access denied 0 files moved (3 times) press to continue than nothing.

I tried movin the Genie widget apk and running the decompile as you suggested and after it does nothing happens. Am I suppose to get additional file. Really confused.

p.s. without the apk file it reports there is no apk file when running the decompliler.

Soz to be a bother.

Link to comment
Share on other sites
Guest Lew247

Guest Lew247

Posted
Posted
I've installed everything properly but I get "'java' is not recognized as an internal or external command, operable program or batch file." whenever I try to run it :/

You need to install the Java virtual machine

search Google for jdk-6u22-windows-i586.exe

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.

  I accept