FORUMS

[HOW TO] Port a Theme: By Nottach

1,587 posts
Thanks Meter: 3,955
 
By Nottach, Account currently disabled on 26th July 2011, 04:04 PM
Post Reply Email Thread
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.
  1. Pull /system/framework/framework-res.apk and /system/app/SystemUI.apk from your device using either adb or root explorer.
  2. Download this pre-scripted zip and extract it to a folder of your choosing.
  3. Place your original framework-res and systemui in their repective folders (framework;app).
  4. 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".
  5. 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.
  1. Find a hdpi theme of your choosing.
  2. Using winRAR extract the themes framework-res.apk and systemui.apk (if present).
  3. Extract each apk to its own folder.
  4. 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.
  5. 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.
  1. Extract your back-up Zip to a new folder and name that folder after the theme you are working on.
  2. First open framwork-res.apk with winrar.
  3. Navigate to /res/drawable-hdpi

Copying Images.
  1. You'll want to set both your winRAR window and the themes drawable folder side by side.
  2. 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.
  3. Once youve copied over all the images you need, overwriting the originals.
  4. 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.
Attached Files
File Type: zip PreScriptedSystemInstaller.zip - [Click for QR Code] (251.1 KB, 300 views)
The Following 23 Users Say Thank You to Nottach For This Useful Post: [ View ] Gift Nottach Ad-Free
26th July 2011, 04:04 PM |#2  
OP Account currently disabled
Flag New York
Thanks Meter: 3,955
 
More
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.
  1. Decompile systemui.apk
  2. Make edits to XMLs.

    These are the edits I make most often.

    Quote:

    /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="0" /> ///HIDES CARRIER TEXT

    Quote:

    /res/layout/status_bar_expanded.xml -

    Code:
    <com.android.systemui.statusbar.DateView android:textAppearance="?android:textAppearanceLarge" android:textColor="#ffffffff" android:layout_gravity="center_vertical" android:id="@id/dateLabel" android:paddingLeft="4.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" /> ///DATE TEXT COLOR

    Quote:

    /res/values/drawable.xml -

    Code:
    <item type="drawable" name="shade_bgcolor">#ff162939</item> ///NOTIFICATION TITLE BACKGROUND (eg. Ongoing)

    Quote:

    /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">#ffffffff</item> ///NOTIFICATION TITLE TEXT (eg. No Notifications)
        </style>


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.
The Following 10 Users Say Thank You to Nottach For This Useful Post: [ View ] Gift Nottach Ad-Free
26th July 2011, 04:05 PM |#3  
OP Account currently disabled
Flag New York
Thanks Meter: 3,955
 
More
Editing the framework.
We will now decompile your original (backup) framework-res.apk and edit the xmls. Again using apkmanager.
  1. Decompile systemui.apk
  2. Make edits to XMLs.

    These are the edits I make most often.

    Quote:

    /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="#80547f8c" android:endColor="#a087cce2" android:angle="-90.0" android:centerY="0.13" android:centerColor="#80547f8c" />
                    <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="#ff547f8c" android:endColor="#ff87cce2" android:angle="-90.0" android:centerY="0.13" android:centerColor="#ff547f8c" />
                    <stroke android:width="2.0px" android:color="#ff999999" />
                </shape>
            </clip>
        </item>
    </layer-list>

    Quote:

    /res/values/styles.xml - text colors

    Code:
    <style name="TextAppearance.Widget.IconMenu.Item" parent="@style/TextAppearance.Small">
            <item name="textColor">#ff555555</item> ///POP UP MENU TEXT COLOR
        </style>
    Code:
    <style name="Theme.ExpandedMenu" parent="@style/Theme">
            <item name="listViewStyle">@style/Widget.ListView.Menu</item>
            <item name="textColor">#ff555555</item> ///SECONDARY MENU TEXT COLOR
            <item name="windowAnimationStyle">@style/Animation.OptionsPanel</item>
            <item name="background">@null</item>
            ///DELETED LINE
        </style>
    Code:
    <style name="TextAppearance.WindowTitle" parent="@style/TextAppearance">
            <item name="textSize">14.0sp</item>
            <item name="textStyle">bold</item>
            <item name="textColor">#ffffffff</item> ///WINDOW TITLE TEXT (App Title Bar)
        </style>
    Code:
    <style name="TextAppearance.StatusBar.Title" parent="@style/TextAppearance.StatusBar">
            <item name="textStyle">bold</item>
            <item name="textColor">#ffffffff</item> ///STATUS BAR TITLE (May be same as SystemUI?)
        </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">#ffffffff</item> ///FIRST LINE OF NOTIFICATION
        </style>
    Code:
    <style name="TextAppearance.StatusBar.EventContent" parent="@style/TextAppearance.StatusBar">
            <item name="textColor">#ffffffff</item> ///2ND LINE OF NOTIFICATION
        </style>
    Code:
    <style name="Widget.Button" parent="@style/Widget">
            <item name="textAppearance">?textAppearanceSmallInverse</item>
            <item name="textColor">#ffffffff</item> ///BUTTON TEXT COLOR
            <item name="gravity">center</item>
            <item name="background">@drawable/btn_default</item>
            <item name="focusable">true</item>
            <item name="clickable">true</item>
        </style>


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.
The Following 8 Users Say Thank You to Nottach For This Useful Post: [ View ] Gift Nottach Ad-Free
26th July 2011, 04:05 PM |#4  
OP Account currently disabled
Flag New York
Thanks Meter: 3,955
 
More
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.
  1. Open framework-res.apk in winRAR.
  2. Extract resources.arsc
  3. Open resources.arsc in a hex editor.
  4. Search for the color in this format BB GG RR AA, as opposed to usual aarrggbb. (Red = ffff0000 = 00 00 FF FF)
  5. Replace with desired color following same format.
  6. Save and overwrite original by dragging new version into winRAR.
--To change slider colors without decompiling you would.
  1. Open framework-res.apk in winRAR.
  2. Extract /res/drawable/progress_horizontal.xml
  3. Open progress_horizontal.xml in a hex editor.
  4. Search for 08 00 00 1C.
  5. After each instance examine the next four pairs.
  6. The first few will be grey but eventually youll come to a color.
  7. That's where you start editing. (6 total)
  8. Replace with desired color following same format.
  9. 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.
The Following 7 Users Say Thank You to Nottach For This Useful Post: [ View ] Gift Nottach Ad-Free
26th July 2011, 04:21 PM |#5  
jarstelfox's Avatar
Member
Flag San Luis Obispo
Thanks Meter: 4
 
More
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
26th July 2011, 05:25 PM |#6  
CaelanT's Avatar
Senior Member
Flag Sheffield
Thanks Meter: 760
 
Donate to Me
More
Small donation on it's way to you for all your hard work!

Confirmation number: 3W612387P3801853H.
The Following User Says Thank You to CaelanT For This Useful Post: [ View ] Gift CaelanT Ad-Free
26th July 2011, 05:34 PM |#7  
Senior Member
Flag Mumbai
Thanks Meter: 195
 
Donate to Me
More
Awesome work! Hopefully I will get some time to understand this and port a theme or two
1st August 2011, 09:19 PM |#8  
deanr1977's Avatar
Senior Member
Flag lost somewhere.... Help
Thanks Meter: 316
 
More
Quote:
Originally Posted by Nottach

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.

  1. Open framework-res.apk in winRAR.
  2. Extract resources.arsc
  3. Open resources.arsc in a hex editor.
  4. Search for the color in this format BB GG RR AA, as opposed to usual aarrggbb. (Red = ffff0000 = 00 00 FF FF)
  5. Replace with desired color following same format.
  6. Save and overwrite original by dragging new version into winRAR.
--To change slider colors without decompiling you would.
  1. Open framework-res.apk in winRAR.
  2. Extract /res/drawable/progress_horizontal.xml
  3. Open progress_horizontal.xml in a hex editor.
  4. Search for 08 00 00 1C.
  5. After each instance examine the next four pairs.
  6. The first few will be grey but eventually youll come to a color.
  7. That's where you start editing. (6 total)
  8. Replace with desired color following same format.
  9. Save and overwrite original by dragging new version into winRAR.

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/show....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
2nd August 2011, 03:26 AM |#9  
D$G's Avatar
Junior Member
Flag Austin, Texas
Thanks Meter: 9
 
More
Question 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.
2nd August 2011, 03:29 AM |#10  
OP Account currently disabled
Flag New York
Thanks Meter: 3,955
 
More
Quote:
Originally Posted by D$G

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.

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.
2nd August 2011, 04:28 PM |#11  
XCellPhoneSalesRep's Avatar
Senior Member
Flag The Joisey Shore, Nu Joisey
Thanks Meter: 294
 
Donate to Me
More
I'm guessing that this is a generic tutorial for most, if not all android devices?
Post Reply Subscribe to Thread

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes