[RESOURCES] - Theming the TF201: tools, processes, locations, etc. - Asus Eee Pad Transformer Prime

Ok, so we have a couple of threads in the Atrix Forums, that have helped us themers along, and with the custom Roms coming along for the Prime, I have started to see a need for this type of thread here.
The goal of this thread is to have a place for us to discus themeing questions, locations, problems, etc.; that way we are not cluttering up the individual theme or rom threads with questions or problems.
As we are unable to let successively recompile the stock Asus TF201 SystemUI.apk, this thread is primarily intended for custom roms like AOKP, CM9, etc.
If you are looking to theme your stock SyetemUI, you can simply copy the apk to your computer, open the .apk file with a zip program (like Winrar) pull out the following folder: /res/drawable-mdpi
Look through the folder, find .png files that you would like to replace, and then add your new .png files to the .apk (using Winrar or other) in the same location the original one is at. ---> Read the following rules first! <---
- Make sure to select "store" for the compression method, when replacing/adding the .png files.
- The new .png file you are using should roughly be the same dimensions as the original you are replacing.
- Leave .9.png files alone. .9.png files have to be decompiled/recompiled for them to work properly. Since, you can not successfully recompile the stock Asus systemui.apk, you can not replace .9.pngs!!!!
All that being said, lets move on to the Roms we can actually theme...
Below, I have quoted the OP from two Atrix threads that have always helped me.
*Note: These locations are for Gingerbread, however, there is some continuity between Gingerbread & ICS; although it seems a lot of the stuff that was in the framework-res for Gingerbread, it now in the systemui for ICS.
Also, if you change something in a xml file and it doesn't change, you may want to see if the same xml line is in the same file & folder in both the framework-res & systemui, and change both.
Things you should know before you get started:
- If you are replacing a 9.png or editing a xml, you will have to deompile your apk, edit, and then recompile it.
- Recompiling the camera.apk seems to break the camcorder function, and will result in a FC.
Besides the Post Below this one, here is another up-to-date guide on using APK Tools, specifically for ICS:
http://forum.xda-developers.com/showthread.php?t=1511752
Use this web page to get your custom Hex Colors:
http://www.colorpicker.com/
Main XDA General Theme Thread (get more exposure/help for your question):
http://forum.xda-developers.com/showthread.php?t=468254
***If you have any other helpful guides, webpages, etc. that you think will help us, post them, and I'll add them to the OP.***

---

(This quote is from: http://forum.xda-developers.com/showthread.php?t=1060199 and thanks should go to that OP).
jimbush3 said:
I know that there are a good number of Atrix users who are new to android, new to theming with android, or like me - both. It can take hours to find the right information to make the changes that you want to make, only to find out that those types of changes are phone specific and that guide that you finally found after hours of searching doesn't even apply. I ask that all Atrix themers contribute to this thread with their knowledge, processes, and best practices for theming the Atrix. This way, we can share knowledge amongst each other as well as set up some accurate guide for other Atrix themers just getting started.
Contents:
Post 1 of this thread:
apk Manager Guide
Framework Assistant - tool to push/pull framework-res.apk
Editing OR removing the status bar clock color in services.jar
Post 2 of this thread:
Setting the notification dropdown shade to transparent
I'll start off with a post that I made yesterday in response to someone's question about apk Manager.
1. apk Manager Atrix Guide
The file I am going to discuss here is /system/framework/framework-res.apk. This file contains most of the elements involved in theming your phone. There are many other smaller locations to edit, but this file contains the bulk.
Before we get started on using apk Manager, we should understand a few things about framework-res apk. This file consists of a few important elements:
regular png image files - these are standard png images and can be edited with your image editing program and saved without any problems.
draw-9 png image files - these are special types of png images denoted by a .9.png in the filename. The android system reads these filenames and recognizes the image as a stretchable image. The system knows how to stretch the image based on a 1px wide border that the image has. This border contains black dots/lines along each of the four edges that tell the system how to stretch it - if you mess with this border then the way the image stretches will changes and you may not be able to decompile/recompile the apk. The following link provides info on editing draw-9s, but I found it easiest to extract them with apk Manager, edit in gimp without touching the border, and then recompiling with apk M. More info on draw-9 pngs
xml files - these files are in binary code in the framework-res.apk. The apk needs to be decompiled in order to return these to human readable code. Also, many of your xml files are hidden within the resources.arsc file in the framework-res.apk and cannot be accessed unless you decompile.
In order to make any changes to the xml files or the draw-9 pngs within framework-res.apk you need to decompile it rather than extract it. Extracting the framework-res.apk with a program like winzip simply unzips the file and does not break the code back down to an editable format. Decompiling the framework-res.apk with a program like apk Manager will actually break down the resources.arsc file into the sepereate xmls folders (values, etc.) and also restore the instructions border to draw-9 pngs.
Draw-9 images not edited correctly will not stretch properly in the system and may cause decompilation/recompilation errors. XML files not edited correctly may also cause recompilation errors. It is very important to pay attention to the log.txt file for any errors that may be occurring during your decompilation/recompilation process.
Download apk Manager
Now here is what I've learned about apk Manager:
put framework-res.apk in the place-apk-here-for-modding folder
run the script
enter 22 to select an apk, then 1 to select your apk
press 9 to decompile the apk
go into the projects/framework-res.apk/res/drawable-hdpi folder and edit your pngs or xmls (maintain the border)
go back to the script once your done editing and enter 11 to compile
when asked if it is a system apk enter y
when asked if you want to extract other files too enter y Do not skip this step, apk Manager will seem to produce a working framework-res.apk if you skip this step but when I did it soft bricked my phone
go into the keep folder that was created and delete any pngs that you changed in the projects folder
if you change any xml files, you will also need to delete the resources.arsc file from the keep folder (this is because mane of the xml files are compiled into this resources.arsc, so to tell apk manager to rebuild it with the new xml, we need to delete the original)
go back to the script and press any key to continue
your recompiled framework-res will be in the place-apk-here-for-modding as unsigned-framework-res.apk
extract unsigned-framework-res.apk using winzip, or similar program (this is being it is compressed incorrectly)
go into the folder where you just unzipped the framework and zip it up with the compression mode set to Store - call it framework-res.apk
you are ready to go with a properly editing framework-res.apk, put it on your phone any way you like
Make sure that you have no errors when de-compiling or re-compiling. It might seem like everything is going ok, but you could end up soft bricking your phone if you don't check the log.txt in the apk Manager main folder. Check the log.txt after every decompile and recompile to ensure that you don't have a damaged framework-res.apk.
The output in log.txt should like like this for a proper decompile:
Code:
--------------------------------------------------------------------------
|Sun 05/01/2011 -- 20:11:47.57|
--------------------------------------------------------------------------
java version "1.6.0_25"
Java(TM) SE Runtime Environment (build 1.6.0_25-b06)
Java HotSpot(TM) 64-Bit Server VM (build 20.0-b11, mixed mode)
Could Not Find C:\Users\jbush\Documents\Custom Atrix\Programs\apk_manager_4.9\place-apk-here-for-modding\../place-apk-here-for-modding/signedframework-res.apk
I: Loading resource table...
I: Decoding resources...
I: Copying assets and libs...
And like this for a proper recompile:
Code:
W: Could not find sources
I: Checking whether resources has changed...
I: Building resources...
I: Building apk file...
(skipping index file 'C:\Users\jbush\Documents\Custom Atrix\Programs\apk_manager_4.9\other\..\projects\framework-res.apk\assets\images\Thumbs.db')
(skipping index file 'C:\Users\jbush\Documents\Custom Atrix\Programs\apk_manager_4.9\other\..\projects\framework-res.apk\assets\webkit\Thumbs.db')
The system cannot find the file specified.
If you get any errors about your images or xml then you need to fix them before you can recompile.
#framework-assistant2. Framework-res.apk Assistant
Here is a tool which I use regularly to pull the current framework-res.apk from my phone, as well as to push any updated framework-res.apk to my phone. To use this batch program you need to:
Download the View attachment 584667
Extract the zip to whereever you want the program to reside
To pull your current framework-res.apk - run the Framework-Assistant.bat and tell it to pull
To push an updated framework-res.apk - place the updated framework-res.apk in the bin/push folder, run the Framework-Assistant.bat and tell it to push the updated framework-res.apk
It is always a good idea to tell it to back up the current before pushing a new
As with any and all framework-res.apk pushes, this has the ability to soft brick your phone depending on the framework-res.apk you push, or anything else for that matter. Use at your own risk.
Here are my steps to edit framework-res.apk from start to finish which might help those unfamiliar with the process:
Run Framework-Assistant.bat and answer y to pull the current framework-res.apk from the phone, but n to push the latest version (this will simply retrieve the current framework-res.apk from your phone)
Copy that framework-res.apk from the Framework Assistant/bin/pull fodler into the place-apk-here-for-modding folder of apk Manager
rename framework-res.apk to something distinguishable, I add the current time (ex: framework-res-1016.apk). Trust me, things can get messy if you end up making a few passes with different edits, you need to keep your stuff straight.
Run Script.bat in the apk Manager folder, 22 to select which apk to use, then 9 to decompile
Go into the projects/framework-res-1016.apk folder and make any changes you wish. Most png changes will be in drawable-hdpi, xmls are pimarily located in the values and layout folders.
Once I've finished making updates, run Script.bat again, 22 to select the proper apk, then compile with 11 - follow all compilation steps above all the way through zipping it as store.
Place the new framework-res.apk in the Framework Assistant/bin/push folder and run Framework-Assistant.bat
Choose y to both pull and push the framework-res.apk (I find its always a good idea to pull your latest working framework-res.apk from the phone before dropping a new one in)
If you anticipate more edits, go back to apk Manager and paste the new framework-res.apk in the place-apk-here-for-modding fodler of apk Manager and rename it with the current time attached (ex: framework-res-1023.apk)
Delete the unsignedframework-res-1016.apk and the unsignedframework-res.apk fodler (just to keep things clean)
You now have an edited framework-res.apk on your phone and are set to fix this little issues you missed on this pass, just run the apk Manager Script.bat again, enter 22 to access your latest framework-res.apk (framework-res-1023.apk) and repeat the process.
#framework-assistant3. Editing OR removing the status bar clock in services.jar
You will need:
Some zip program, I use winrar
JDK - Java Development Kit Get the JDK
baksmali to decompile and recompile the classes.dex file - View attachment 587999
Notepad++ free editor for code editing (I recommend this program for any/all code editing, apart from hex)
Here is how to change the status bar clock color:
Install the JDK
Extract baksmali to your computer
Retrieve services.jar from the /system/framework folder
Extract services.jar using your zip program (right click on the file and choose to extract)
One of the extracted files is classes.dex, copy it into the baksmali folder
Run decompile.bat in the baksmali folder - this will decompile classes.dex and place the contents in a new folder called classout
Navigate to classout\com\android\server\status
The next step involves changing clock color:
open StatusBarIcon.smali with Notepadd++ and find this entry
Code:
.line 61
const v6, -0x1
invoke-virtual {v4, v6}, Landroid/widget/TextView;->setTextColor(I)V
const v6, -0x1 identifies the color of the status bar clock. I changed this value to "const v6, -0xff000000 to set my clock to black. Essentially the last 6 digits of this entry will determine the color of the clock. Set the last six to any html color code (google it) to set your clock color. I have only tried black here as it is all I needed, so I can't personally guarantee that anything else will work.
The next step involves removing the clock:
open StatusBarPolicy.smali with Notepadd++ and find this entry
Code:
invoke-direct {p0}, Lcom/android/server/status/StatusBarPolicy;->updateClock()V
It should be under ".line 592", now add this line underneath the line just mentioned:
Code:
invoke-virtual {p2, v3, v6}, Lcom/android/server/status/StatusBarService;->setIconVisibility(Landroid/os/IBinder;Z)V
Once your done editing, save the file
Navigate back to the baksmali folder and run recompile.bat - this will rename the original classes.dex file to orig-classes.dex, and the recompiled file is saved as classes.dex
Zip up the new classes.dex along with the META-INF folder that was extracted from services.jar as, you guessed it, services.jar Leave the compression setting on Normal
Put services.jar back in your system/framework folder
This is all that I know how to do with servies.jar right now, if anyone has some additional good info please post it to this thread and I will add it on.
Can't believe I forgot to thank all those who have contributed both directly and indirectly to my knowledge thus far: Nottach, NyugenHuu, KennethPenn, riral, tonecreationz, gera4eva, HFHimself, and many random threads I found on the wonderful xda forums.
Click to expand...
Click to collapse

---

(This quote is from: http://forum.xda-developers.com/newreply.php?do=newreply&p=16008460 and thanks should go to that OP).
*Again, these are from Gingerbread, but may be in the same xml/location as ICS (haven't checked them all yet).
Nottach said:
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.
/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
/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]
/res/values/drawable.xml -
Code:
<item type="drawable" name="shade_bgcolor">[color="Red"]#ff162939[/color]</item> [color="red"]///NOTIFICATION TITLE BACKGROUND (eg. Ongoing)[/color]
/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]
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.
Click to expand...
Click to collapse
Nottach said:
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.
/res/drawable/progress_horizontal.xml -
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>
/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>
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.
Click to expand...
Click to collapse
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

---

Reserved!!

---

Awesome. Thanks!

---

Great guides for the noobies Swiftks =) Also i think i might have a work around for the patch9 pngs, Ill msg you on GChat

---

great stuff, thanks for sharing mate.
Sent from my TF201