[HOW TO] Port a Theme: By Nottach - Atrix 4G Themes and Apps

How To Port a Theme: The Nottach Way
This first draft will probably have confusing parts so if you get stuck let me know and I'll make it clearer.
Backing Up:
The first thing you're going to want to do is backup the files you will be editing. I recommend making a CWM zip of the backed up files. That way if you bootloop you can easily flash back.
Steps To Backup:
You will most likely be theming framework-res.apk and systemui.apk at first. I will show you how to back them up. If you theme other files in the future be sure to add the original to your backup CWM update by repeating these steps. *note* this installer will only install files to the /system directory.
Pull /system/framework/framework-res.apk and /system/app/SystemUI.apk from your device using either adb or root explorer.
Download this pre-scripted zip and extract it to a folder of your choosing.
Place your original framework-res and systemui in their repective folders (framework;app).
Next zip the system and META-INF folders at the root of the extracted folder and be sure to choose a compression of "store" or "none".
Copy the new zip to your SD and try to flash it. Just to make sure it works.
File Structure of the New Zip should be:
Code:
META-INF
-(unchanged contents)
system
-app
--systemui.apk
-framework
--framework-res.apk
If it doesn't flash the most common mistake would be not choosing "store" or "none" for compression.
Once you've got your back-up working you can begin theming.
Basic Theming:
These are my steps. They may seem backwards to some but I can get a quality port out in under an hour this way.
Getting the needed files.
Find a hdpi theme of your choosing.
Using winRAR extract the themes framework-res.apk and systemui.apk (if present).
Extract each apk to its own folder.
You should now have all the icons you should need inside each drawable-hdpi folder you just extracted, one for framework-res and one for systemui.
Have a look through the drawable-hdpi folders. These are the only two folders you'll need so you can delete the others if you wish.
Prepping.
Extract your back-up Zip to a new folder and name that folder after the theme you are working on.
First open framwork-res.apk with winrar.
Navigate to /res/drawable-hdpi
Copying Images.
You'll want to set both your winRAR window and the themes drawable folder side by side.
Next overwrite the icons/images in winRAR with the icons/images in the themes folder. Make sure to only choose the icons/images that are in the /res/drawable-hdpi winRAR. Dont just drag them all in, this will undoubtly leave you with unused icons that will bloat your framework.
Once youve copied over all the images you need, overwriting the originals.
Close the archive (winRAR).
Do the same for systemui.apk, only choosing the needed files.
Tips: If porting a CM7 theme a lot of file renaming will be required. First, sort all the files based on their prefixes (eg. framework-res_; com_android_systemui_; etc). Then, use all file renamer to easily delete XX characters from the left side. You'll need to have a look at what I mean to really get it.
Tips: Some themes lack a systemui.apk but will instead have the images needed for systemui.apk inside their framework-res.apk.
Tips: If a theme doesnt have enough battery icons you will have to make more to suit your framework-res. Do this by spanning the gaps with copies. For instance, if there are only 20 icons and you need 100, make 5 copies of each and name appropriately. This is the biggest pain about a 1% battery.
Once you've overwriten all the images in framework-res and sytemui go ahead and zip up your package following the same steps as the backup, naming the zip appropriately. Don't forget the "store" or "none" compression.
Now try to flash it. If it works it most likely won't be perfect, this is a first draft.
If it doesn't work, again check your compression and zip file structure.
Now take notes of things that are wrong or need fixing, text colors particularly. We will fix them in the next steps.

---

Editing the status bar.
Now that you can see what needs fixing in the status bar we will decompile your original (backup) systemui.apk and edit the xmls. I will assume you have apkmanager and know how to use it. There are other guides for that so I won't go to deep into it. Look here for a video tutorial on apkmanager.
Decompile systemui.apk
Make edits to XMLs.
These are the edits I make most often.
/res/layout/status_bar.xml -
Code:
<TextView android:textSize="16.0sp" android:textStyle="bold" android:gravity="left|center" android:id="@id/onsText" android:paddingLeft="6.0px" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:maxLength="[COLOR="Red"]0[/COLOR]" /> [COLOR="red"]///HIDES CARRIER TEXT[/COLOR]
Click to expand...
Click to collapse
/res/layout/status_bar_expanded.xml -
Code:
<com.android.systemui.statusbar.DateView android:textAppearance="?android:textAppearanceLarge" android:textColor="[COLOR="Red"]#ffffffff[/COLOR]" android:layout_gravity="center_vertical" android:id="@id/dateLabel" android:paddingLeft="4.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" /> [COLOR="red"]///DATE TEXT COLOR[/COLOR]
Click to expand...
Click to collapse
/res/values/drawable.xml -
Code:
<item type="drawable" name="shade_bgcolor">[COLOR="Red"]#ff162939[/COLOR]</item> [COLOR="red"]///NOTIFICATION TITLE BACKGROUND (eg. Ongoing)[/COLOR]
Click to expand...
Click to collapse
/res/values/style.xml -
Code:
<style name="TextAppearance.StatusBar.Title" parent="@android:style/TextAppearance.StatusBar">
<item name="android:textAppearance">?android:textAppearanceSmall</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">[COLOR="red"]#ffffffff[/COLOR]</item> [COLOR="red"]///NOTIFICATION TITLE TEXT (eg. No Notifications)[/COLOR]
</style>
Click to expand...
Click to collapse
After making your xml edits recompile, be sure to delete the edited files and resources.arsc from the keep folder during recompiling. If you don't you won't see any changes.
If you compiled with no errors you're good to go. If you have errors then you have a mistake in your code. You can check the apkmanager log for line number errors.
Once recompiled you will have unsignedSystemUI.apk in your place_here_for_modding folder. Open it in winRAR along with your previous version of SystemUI.apk from the first draft and drag the images from the first draft drawable-hdpi folder into the new unsignedSysemUI.apk's corresponding folder, overwriting the images there. Now rename unsignedSystemUI.apk to SystemUI.apk and overwrite your first draft version. This is your second draft SystemUI.apk and we will create a second draft framework-res.apk in the next step using these same steps.

---

Editing the framework.
We will now decompile your original (backup) framework-res.apk and edit the xmls. Again using apkmanager.
Decompile systemui.apk
Make edits to XMLs.
These are the edits I make most often.
/res/drawable/progress_horizontal.xml - sliders & volume bars
Code:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@id/background">
<shape>
<corners android:radius="5.0dip" />
<gradient android:startColor="#ff262223" android:endColor="#ff414042" android:angle="270.0" android:centerY="0.13" android:centerColor="#ff262223" />
<stroke android:width="2.0px" android:color="#ff999999" />
</shape>
</item>
<item android:id="@id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5.0dip" />
<gradient android:startColor="#80[COLOR="red"]547f8c[/COLOR]" android:endColor="#a0[COLOR="red"]87cce2[/COLOR]" android:angle="-90.0" android:centerY="0.13" android:centerColor="#80[COLOR="red"]547f8c[/COLOR]" />
<stroke android:width="2.0px" android:color="#ff999999" />
</shape>
</clip>
</item>
<item android:id="@id/progress">
<clip>
<shape>
<corners android:radius="5.0dip" />
<gradient android:startColor="#ff[COLOR="red"]547f8c[/COLOR]" android:endColor="#ff[COLOR="red"]87cce2[/COLOR]" android:angle="-90.0" android:centerY="0.13" android:centerColor="#ff[COLOR="Red"]547f8c[/COLOR]" />
<stroke android:width="2.0px" android:color="#ff999999" />
</shape>
</clip>
</item>
</layer-list>
Click to expand...
Click to collapse
/res/values/styles.xml - text colors
Code:
<style name="TextAppearance.Widget.IconMenu.Item" parent="@style/TextAppearance.Small">
<item name="textColor">[COLOR="red"]#ff555555[/COLOR]</item> [COLOR="red"]///POP UP MENU TEXT COLOR[/COLOR]
</style>
Code:
<style name="Theme.ExpandedMenu" parent="@style/Theme">
<item name="listViewStyle">@style/Widget.ListView.Menu</item>
<item name="textColor">[COLOR="red"]#ff555555[/COLOR]</item> [COLOR="red"]///SECONDARY MENU TEXT COLOR[/COLOR]
<item name="windowAnimationStyle">@style/Animation.OptionsPanel</item>
<item name="background">@null</item>
[COLOR="red"]///DELETED LINE[/COLOR]
</style>
Code:
<style name="TextAppearance.WindowTitle" parent="@style/TextAppearance">
<item name="textSize">14.0sp</item>
<item name="textStyle">bold</item>
<item name="textColor">[COLOR="Red"]#ffffffff[/COLOR]</item> [COLOR="red"]///WINDOW TITLE TEXT (App Title Bar)[/COLOR]
</style>
Code:
<style name="TextAppearance.StatusBar.Title" parent="@style/TextAppearance.StatusBar">
<item name="textStyle">bold</item>
<item name="textColor">[COLOR="red"]#ffffffff[/COLOR]</item> [COLOR="red"]///STATUS BAR TITLE (May be same as SystemUI?)[/COLOR]
</style>
Code:
<style name="TextAppearance.StatusBar.EventContent.Title" parent="@style/TextAppearance.StatusBar.EventContent">
<item name="textSize">16.0sp</item>
<item name="textStyle">bold</item>
<item name="textColor">[COLOR="red"]#ffffffff[/COLOR]</item> [COLOR="red"]///FIRST LINE OF NOTIFICATION[/COLOR]
</style>
Code:
<style name="TextAppearance.StatusBar.EventContent" parent="@style/TextAppearance.StatusBar">
<item name="textColor">[COLOR="red"]#ffffffff[/COLOR]</item> [COLOR="red"]///2ND LINE OF NOTIFICATION[/COLOR]
</style>
Code:
<style name="Widget.Button" parent="@style/Widget">
<item name="textAppearance">?textAppearanceSmallInverse</item>
<item name="textColor">[COLOR="red"]#ffffffff[/COLOR]</item> [COLOR="red"]///BUTTON TEXT COLOR[/COLOR]
<item name="gravity">center</item>
<item name="background">@drawable/btn_default</item>
<item name="focusable">true</item>
<item name="clickable">true</item>
</style>
Click to expand...
Click to collapse
After making your xml edits recompile, be sure to delete the edited files and resources.arsc from the keep folder during recompiling. If you don't you won't see any changes.
If you compiled with no errors you're good to go. If you have errors then you have a mistake in your code. You can check the apkmanager log for line number errors.
Now following the same steps as we did for SystemUI we will overwrite the images in the new unsignedframework-res.apk with those from the first draft framework-res.apk. By dragging from one winRAR window to the other. Once you've done that rename the new apk and overwrite the first draft version. Create a new update zip, using "store" or "none", and flash it. You should now see the text edits you just made.

---

Advanced Tips
.9 Images.
--If a .9.png is all (every pixel) one color then the .9 patch does not matter.
Hex editing.
--It is not always necessary to decompile to make text color or slider edits. Instead if know what color you're looking for you can use a hex editor to make the edits.
--For instance, to change text colors without decompiling you would.
Open framework-res.apk in winRAR.
Extract resources.arsc
Open resources.arsc in a hex editor.
Search for the color in this format BB GG RR AA, as opposed to usual aarrggbb. (Red = ffff0000 = 00 00 FF FF)
Replace with desired color following same format.
Save and overwrite original by dragging new version into winRAR.
--To change slider colors without decompiling you would.
Open framework-res.apk in winRAR.
Extract /res/drawable/progress_horizontal.xml
Open progress_horizontal.xml in a hex editor.
Search for 08 00 00 1C.
After each instance examine the next four pairs.
The first few will be grey but eventually youll come to a color.
That's where you start editing. (6 total)
Replace with desired color following same format.
Save and overwrite original by dragging new version into winRAR.
Undoing Moto's Status Bar Edits.
Post #15
Adding an Animated PullDown Shade.
[RESOURCES] - Theming the Atrix 4G: tools, processes, locations, etc.

---

Spot on work! Thanks a lot! I am planning to see if I can make a clean minimalistic theme once I can figure out how to do theming correctly
Motorola Atrix 2.3.4 bl unlocked full debian weptop and themed

---

Small donation on it's way to you for all your hard work!
Confirmation number: 3W612387P3801853H.

---

Awesome work! Hopefully I will get some time to understand this and port a theme or two

---

Nottach said:
Advanced Tips
.9 Images.
--If a .9.png is all (every pixel) one color then the .9 patch does not matter.
Hex editing.
--It is not always necessary to decompile to make text color or slider edits. Instead if know what color you're looking for you can use a hex editor to make the edits.
--For instance, to change text colors without decompiling you would.
Open framework-res.apk in winRAR.
Extract resources.arsc
Open resources.arsc in a hex editor.
Search for the color in this format BB GG RR AA, as opposed to usual aarrggbb. (Red = ffff0000 = 00 00 FF FF)
Replace with desired color following same format.
Save and overwrite original by dragging new version into winRAR.
--To change slider colors without decompiling you would.
Open framework-res.apk in winRAR.
Extract /res/drawable/progress_horizontal.xml
Open progress_horizontal.xml in a hex editor.
Search for 08 00 00 1C.
After each instance examine the next four pairs.
The first few will be grey but eventually youll come to a color.
That's where you start editing. (6 total)
Replace with desired color following same format.
Save and overwrite original by dragging new version into winRAR.
Click to expand...
Click to collapse
Can i ask you a question seeing though you know abit about framework modding can you see were i have gone wrong here - http://forum.xda-developers.com/showthread.php?t=1195549
I can live with it but i would rather change it to a light gray or a different color? Or if not how would i be able to change the text in these pop up windows so i can see them properly? Any help would be very nice & not had a reply about this yet? Can you help? you can private message me if you would prefer
Thanks in advance

---

Png sizes
Okay do the PNG/.9.png from the ported theme have to be the same size as the ones in the Atrix drawable-hdpi?
Thanks a lot on the tutorial it helped me figure out how to edit the XMl files.

---

D$G said:
Okay do the PNG/.9.png from the ported theme have to be the same size as the ones in the Atrix drawable-hdpi?
Thanks a lot on the tutorial it helped me figure out how to edit the XMl files.
Click to expand...
Click to collapse
Not necessarily. As long as the .9 patch is ok then it should work. though it may look weird if theres a themed background. such as a aosp buuton on motoblur background. trial and error is your best bet there.

---

I'm guessing that this is a generic tutorial for most, if not all android devices?

---

XCellPhoneSalesRep said:
I'm guessing that this is a generic tutorial for most, if not all android devices?
Click to expand...
Click to collapse
You are correct.

---

If I change some icons in other .apks like the blur-res.apk, will the updater script you posted include that when it updates?

---

redz22 said:
If I change some icons in other .apks like the blur-res.apk, will the updater script you posted include that when it updates?
Click to expand...
Click to collapse
Yes, those are in the /system directory so it will work. Just make sure to put them in the right folder (framework). That disclaimer is more for those editing something in /data.

---

How to "undo" MotoBlurs Status Bar
As many of you themers out there have mostly likely noticed, Moto has screwed with the Status Bar layout in GingerBread which makes theming difficult. I will show you how to revert to the way it was in Froyo.
I will show you you how to perform these edits:
Change the Date Background back to status_bar_header_background.
Change the Title Background back to title_bar_portrait.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
1. Decompile SystemUI.apk
2. Open /res/layout/status_bar_expanded.xml
---First we'll change the Date Background.
---Out of the box it calls the drawable title_bar_portrait. In Froyo its called status_bar_header_background. So in order to go back to that we will change:
Code:
<LinearLayout android:orientation="horizontal" android:background="@drawable/title_bar_portrait" android:paddingTop="3.0dip" android:paddingRight="3.0dip" android:paddingBottom="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content">
---to:
Code:
<LinearLayout android:orientation="horizontal" [COLOR=Red]android:background="@drawable/status_bar_header_background"[/COLOR] android:paddingTop="3.0dip" android:paddingRight="3.0dip" android:paddingBottom="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content">
Click to expand...
Click to collapse
---And add your status_bar_header_background png to drawables-hdpi. It can be either .png or .9.png. If it's a .9.png make sure it's in decompiled form, with the 1 pixel border, or else you will get an error during recompiling.
Click to expand...
Click to collapse
---Next we'll have the title background use the existing title_bar_portrait image instead of the shade_bgcolor.
---So we change:
Code:
<com.android.systemui.statusbar.NotificationLinearLayout android:orientation="vertical" android:id="@id/notificationLinearLayout" android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:textAppearance="@style/TextAppearance.StatusBar.Title" android:id="@id/noNotificationsTitle" android:background="@drawable/shade_bgcolor" android:paddingLeft="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/status_bar_no_notifications_title" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.Title" android:id="@id/ongoingTitle" android:background="@drawable/shade_bgcolor" android:paddingLeft="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/status_bar_ongoing_events_title" />
<LinearLayout android:orientation="vertical" android:id="@id/ongoingItems" android:layout_width="fill_parent" android:layout_height="wrap_content" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.Title" android:id="@id/priorityTitle" android:background="@drawable/shade_bgcolor" android:paddingLeft="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/status_bar_priority_events_title" />
<LinearLayout android:orientation="vertical" android:id="@id/priorityItems" android:layout_width="fill_parent" android:layout_height="wrap_content" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.Title" android:id="@id/latestTitle" android:background="@drawable/shade_bgcolor" android:paddingLeft="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/status_bar_latest_events_title" />
<LinearLayout android:orientation="vertical" android:id="@id/latestItems" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</com.android.systemui.statusbar.NotificationLinearLayout>
---To:
Code:
<com.android.systemui.statusbar.NotificationLinearLayout android:orientation="vertical" android:id="@id/notificationLinearLayout" android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:textAppearance="@style/TextAppearance.StatusBar.Title" android:id="@id/noNotificationsTitle" [COLOR=Red]android:background="@drawable/title_bar_portrait"[/COLOR] android:paddingLeft="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/status_bar_no_notifications_title" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.Title" android:id="@id/ongoingTitle" [COLOR=Red]android:background="@drawable/title_bar_portrait"[/COLOR] android:paddingLeft="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/status_bar_ongoing_events_title" />
<LinearLayout android:orientation="vertical" android:id="@id/ongoingItems" android:layout_width="fill_parent" android:layout_height="wrap_content" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.Title" android:id="@id/priorityTitle" [COLOR=Red]android:background="@drawable/title_bar_portrait"[/COLOR] android:paddingLeft="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/status_bar_priority_events_title" />
<LinearLayout android:orientation="vertical" android:id="@id/priorityItems" android:layout_width="fill_parent" android:layout_height="wrap_content" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.Title" android:id="@id/latestTitle" [COLOR=Red]android:background="@drawable/title_bar_portrait"[/COLOR] android:paddingLeft="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/status_bar_latest_events_title" />
<LinearLayout android:orientation="vertical" android:id="@id/latestItems" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</com.android.systemui.statusbar.NotificationLinearLayout>
Click to expand...
Click to collapse
---No need to add an image as it already exists.
Click to expand...
Click to collapse
3. Compile SystemUI.apk, be sure to delete the old status_bar_expanded.xml from the keep folder.
4. Done.

---

Hi,
Very cool to see someone documenting what they are doing! Keep up the good work.
Cheers!

---

I've been waiting for this! Love you so much...in brotherly way

---

I came into this android world with guns.blazing. a fresh newb and learnt to flash/root/oc etc. At one point I had stayed up 4 days in a row (using a different,but similar guide) trying to tweak a theme. Hell I was only trying to change the battery icon! I never got it,till this day. In gonna give it another shot (havent tried in months) using this guide. If finally get it,ill post a very detailed step by step video on youtube. One question though,when adding the icon I want to the framework folder,do I delete the one already there,or just let it overwrite? Thats one thing I never understood fully
Sent from my MB860 using XDA Premium App

---

brd912 said:
I came into this android world with guns.blazing. a fresh newb and learnt to flash/root/oc etc. At one point I had stayed up 4 days in a row (using a different,but similar guide) trying to tweak a theme. Hell I was only trying to change the battery icon! I never got it,till this day. In gonna give it another shot (havent tried in months) using this guide. If finally get it,ill post a very detailed step by step video on youtube. One question though,when adding the icon I want to the framework folder,do I delete the one already there,or just let it overwrite? Thats one thing I never understood fully
Sent from my MB860 using XDA Premium App
Click to expand...
Click to collapse
Im thinking you mean in the decompiled projects folder. you overwrite the image in that folder but during recompiling when given the prompt, you delete the old one from the keep folder. if you delete it from keep it will replace it with the one from the project.

---

When I decompile systemui.apk, it gave me 'an error occured'. Is it normal?