WHAT ALL YOU NEED TO THEME??
- APK Manager 5.0.2/APK Multitool : – Will be used for decompiling/compiling frameworks.
- APKTool : – This you need to place in your \windows\ folder.
- Java SDK : – This is necessary for the decompiling/compiling process. Also required in many patches for frameworks.
- GIMP : – This is the image editing software which we are going to use to edit/resize PNGs.
- Android SDK : – Again not of much use in this guide if using APKManager 5.0.2 (necessary if you are using APKMultitool) but always good to have for learning.
- WinRAR : – This will be used for opening the APKs for adding PNGs after editing.
- Notepad++ : – This we will use for opening the various XML/smali files for editing code.
- Unedited base framework : – Its necessary that its unedited because it may lead to errors(like error compiling .9.PNGs)
- Hex Colours : – You’ ll need hex colour values for using them in various XMLs. This here is a nice website for that.
- Lots of patience : – Now this skill you have to develop on your own.
HOW TO SETUP EVERYTHING FOR MAKING/PORTING THEME??
1) Download APK Manager 5.0.2 from the above mentioned link. Extract the contents to any of your drives.
2) Download APKTool (Main program as well as the dependancies for you respective OS). Extract both the .tars contents to :\windows\.
3) Download the latest version (7u2 currently) of JDK(Java SDK) from the site mentioned above and install it.
4) GIMP, Notepad++ : – Download from above mentioned site and install them.
5) WinRAR : – I guess you should be able to get this on your own.
6) Unedited base framework : – Any framework that is compile-able (Stock frameworks are always compile-able).
7) Android SDK : – Download either the zip or .exe from above mentioned site and set it up accordingly. (Note : – This step can be skipped)
CHECK WHETHER THE FRAMEWORK YOU HAVE IS COMPILE-ABLE (UNEDITED) OR NOT.
Before starting, always check. For this, place the framework-res.apk in \apkmanager\place-apk-here-for-modding\. Now start the script. Select Option 22(Set current project)and then select the project. Then select Option 9(Decompile apk). Let it decompile. After that, select Option 11(Compile apk). Select “YES” for “Whether it is system app”. Select “YES” for “Whether you want to include original files”. Let it compile.
If the compilation process goes smoothly without any errors, then you have the correct(unedited) framework which can be used for theming.
Note : – If you are using APKMultitool, then the process is same, except that you will need the Android SDK for its installation and proper functioning.
APKManager Folders (Click to enlarge).
APKManager Screen (Click to enlarge).
EDITING VARIOUS XMLS : -
For information purpose, if you want to know what is an XML, then here is a nice read.Decompile first : -
Place your framework-res.apk(should not be renamed after decompiling, so please rename before only) in the folder place-apk-here-for-modding. Start up script and decompile it(option 9). After decompiling, goto Projects folder. You will find your decompiled framework there.
Similarly, using the above method, decompile your twframework-res.apk(should not be renamed after decompiling, so please rename before only).
If you are porting a theme, then decompile the framework-res.apk and twframeowrk-res.apk from the theme to be ported also.
1) Editing Notification colour in notification drawer.
Files to be edited : – status_bar_latest_content_event.xml in \projects\framework_name\res\layout\.
* Goto \projects\framework_name\res\layout\.
* Open status_bar_latest_content_event in Notepad++.
* You will find 3 lines for editing the colour of the notifications.
1) android:id=”@id/title”. This is the title of the notification
2) android:id=”@id/text”. This is the description of the notification.
3) android:id=”@id/time”. This is the time of the notification
*Edit HEX value for “android:textColor” instance for the 3 above lines as per your likings. Or if you are porting from a theme, then just open the same XML file(i.e. status_bar_latest_content_event) of theme which you are porting in Notepad++ and copy paste the various HEX values to XML in your framework.
2) Colour of horizontal progress bars : -
Progress Bars.
* Goto \projects\framework_name\res\drawables\.
* Open progress_horizontal in notepad++.
* The progress bar uses 3 colours to set the colour which goes from top to bottom. You have to set three colors: start, end and middle.
1) <item android:id=”@id/background”> is for the unused part of the progress bar.
2) <item android:id=”@id/progress”> is for the used part of the progress bar.
* Edit all the HEX values as per you linkings. Or if you are porting from another theme, then just open the same XML file(i.e. status_bar_latest_content_event) of theme which you are porting in Notepad++ and copy paste the various HEX values to XML in your framework.
3) Changing secondary font colour : -
Secondary Text Color.
* Goto \projects\framework_name\res\color\.
* Open zzz_tw_secondary_text_sub.xml in notepad++.
* Look for the following instance,
<item android:state_window_focused="false" android:color="#HEXCOLOR_VALUE" /> <item android:color="#HEXCOLOR_VALUE" />* Replace the HEXCOLOR_VALUE that is already there with the one of your choice.
* Note : – The default colour is blue in Samsung ROMs. Hex value #FF81BEE1.
4) Colour of the text when the text field is selected : -
Files to be edited : – styles.xml in \projects\framework_name\res\values\.
* Goto \projects\framework_name\res\values\.
* Open styles.xml in notepad++.
* Press CTRL+F and search for “<style name=”TextAppearance”>”. There you will find “textColorHighlight” attribute just below.
* Change the HEX value for the attribute as per your requirement.
5) Setting menu text colour to white in menus for black background : -
Menu and extended menu text.
* Goto \projects\framework_name\res\values.
* Open styles.xml in notepad++.
* Press CTRL+F and search for “TextAppearance.Widget.IconMenu.Item”.
* The searched part will be like as shown in the following : -
Code:
<style name="TextAppearance.Widget.IconMenu.Item" parent="@style/TextAppearance.Small">
<item name="textColor">?textColorPrimaryInverse</item>
</style>
Code:
<style name="TextAppearance.Widget.IconMenu.Item" parent="@style/TextAppearance.Small">
<item name="textColor">@color/bright_foreground_dark</item>
</style>
* The searched part will be as shown in the following : -
Code:
<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>
Code:
<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">?textAppearanceLarge</item>
<style>
6) Adding 1 percent battery mod to theme : -
Files to be edited : – stat_sys_battery.xml and stat_sys_batery_charge.xml in \projects\framework_name\res\drawable\.* Goto \projects\framework_name\res\deawable\.
* Open stat_sys_battery.xml in notepad++. If there are no drawable values for 1% batterymod PNGs then, delete everything in that XML and copy paste the following code : -
* Now open stat_sys_battery_charge.xml in notepad++. Check if there are drawable values for 1% battery mod. If there aren’ t, then delete everything in that XML and add the following code : -
7) Provider, Carrier, Ongoing-Title, Notifications-Title, Clear-Button, noNotificationsTitle : -
Files to be edited : – status_bar_expanded.xml in \projects\twframe_name\res\layout\, (FOR SAMSUNG ROMS ONLY). For normal ROMs, the XMLs are either present in framework-res.apk(Froyo) or SystemUI.apk (Gingerbread and above).* Goto \projects\twframe_name\res\layout\.
* Open status_bar_expanded.xml in notepad++.
* Search for the lines : -
1) android:id=”@id/plmnLabel”. This is the Carrier name.
2) android:id=”@id/spnLabel”. This is the Provider name.
3) android:id=”@id/ongoingTitle”. This is the Ongoing-Title.
4) android:id=”@id/latestTitle”. This is the Notifications-Title.
5) android:id=”@id/clear_all_button”. This is the text of the Clear-Button.
6) android:id=”@id/noNotificationsTitle”. This is the text when no notification is displayed.
* For each of the IDs above, there will be attribute android:textColor=”<HEX_VALUE>”. Edit the hex value as per your requirement. Or if you are porting from another theme, then just open the same XML file(i.e. status_bar_expanded) of theme which you are porting in Notepad++ and copy paste the various HEX values to XML in your framework.
8 ) Background of apps : -
Apps background.
* Navigate to /res/values/ and open styles.xml.
* Locate <style name=”Theme”>
* Replace,
Code:
<item name="colorBackground">@color/background_dark</item>
Code:
<item name="colorBackground">@color/transparent</item>
Code:
<item name="windowBackground">@drawable/screen_background_dark</item>
Code: (if u need an image as background)
<item name="windowBackground">@drawable/mybackground</item>
Code: (if u need a color as background)
<item name="windowBackground">@color/white</item>
* Replace,
Code:
<item name="colorBackground">@color/black</item>
Code:
<item name="colorBackground">@color/transparent</item>
Code:
<item name="windowBackground">@color/black</item>
Code: (if u need an image as background)
<item name="windowBackground">@drawable/mybackground</item>
Code: (if u need a color as background)
<item name="windowBackground">@color/white</item>
NOTE: You can give any color which is available in /res/values/color.xml.
9) Transparent status bar and center clock mod : -
Center clock and transparency.
*Decompile SystemUI.apk. Go to /projects/SystemUI.apk/smali/com/android/systemui. Open StatusBarService.smali in notepad++. Search for the line,
invoke-direct/range {v0 .. v5}, Landroid/view/WindowManager$LayoutParams;-><init>(IIIII)V
Directly above it you will find : -
const/4 v5, 0×2
Change this to : -
const/4 v5, -0×3
Now for the center clock. For this, go to projects/SystemUI.apk/res/layout/status_bar.xml.
In this, search for the line that says, <com.android.systemui.statusbar.Clock……..>. Delete this whole line. Then keep you cursor below the line that saysxmlns:android=”http://schemas.android.com/apk/res/android”>(I think its the third line). Just below this, copy the following,
Code:
<LinearLayout android:gravity="center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">
<com.android.systemui.statusbar.Clock android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="center" android:paddingRight="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
</LinearLayout>
Code:
<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.CmStatusBarView android:background="@drawable/statusbar_background" android:focusable="true" android:descendantFocusability="afterDescendants" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:gravity="center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">
<com.android.systemui.statusbar.Clock android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="center" android:paddingRight="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
</LinearLayout>
Code:
<LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:paddingLeft="6.0dip" android:animationCache="false" android:layout_width="fill_parent" android:layout_height="fill_parent">
*Also, add an extra parameter to the end of this as android:background=”@drawable/statusbar_background”. So finally, that line should look somewhat like the following,
Code:
<LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:paddingLeft="6.0dip" android:animationCache="false" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/statusbar_background">
Code:
com.android.systemui.statusbar.DateView android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="center" android:id="@id/date" android:background="@drawable/statusbar_background" android:paddingLeft="6.0px" android:paddingRight="6.0px" android:layout_width="fill_parent" android:layout_height="fill_parent" android:singleLine="true" />
10) Switching the icons around with the notification icons (Gingerbread Tested) : -
Icons and notifications switching mod.
Note : – There will be a gap to the right of the notification icons.
* Find the line that starts like this : -
Code:
<LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons"
Code:
<com.android.systemui.statusbar.IconMerger
Code:
<LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons"
Code:
android:layout_alignParentRight="true"
Code:
android:layout_alignParentLeft="true"
Code:
<com.android.systemui.statusbar.IconMerger
Code:
android:layout_alignParentLeft="true"
Code:
android:layout_alignParentRight="true"
11) Clock, date and notification ticker (Gingerbread only) : -
Files that have to be edited : – status_bar.xml in projects/SystemUI/res/layout/11.1) Clock : -
* Search for a line that begins with “<com.android.systemui.statusbar.Clock“. You now have two ways for changing the font-style and color : -
** Adding android:textColor=”TEXTCOLOR” and/or android:textStyle=”TEXTSTYLE“, where TEXTCOLOR can be a HTML color (#TTRRGGBB – TT means transparency) andTEXTSTYLE can be “bold”, “bold|italic”, “italic” or “”
** Changing the style of android:textAppearance. This can be easier but keep in mind that this style could be used somewhere else.
* A possible new line could be:
Code:
<com.android.systemui.statusbar.Clock android:textColor="#ffff0000" android:textStyle="italic" android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="left|center" androidaddingRight="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
11.2) Date : -
The date which you can see in the status bar can be modified by editing the line beginning with “<com.android.systemui.statusbar.DateView“. As with the clock, you can either add textColor and textStyle or change the android:textAppearance.
11.3) Notification ticker : -
Search for the line containing “@id/tickerText“. It is followed by two other lines which contain “android:textAppearance=”@android:style/TextAppearance.StatusBar.Ticker”". As with the clock, you can either add textColor and textStyle or change the android:textAppearance.
12) Seek bars : -
Seekbar and seekbar PNG.
* Seek bars are progress bar like components which enables you to change a value within a range (you will see some in the sound settings (Settings -> Sound -> Volume).
* The height of the seekbars can be edited as follows : -
* To modify it, open the styles.xml and search for <style name=”Widget.SeekBar” parent=”@style/Widget”>. Here you can change the height (<item name=”maxHeight”> and<item name=”minHeight”>), the appearance (<item name=”indeterminateDrawable”> and <item name=”progressDrawable”>) and the graphic of the thumb (<item name=”thumb”>).
EmoticonEmoticon