Android Theme Development Series #2

THIS IS THE SECOND INSTALLMENT OF THE THEME DEVELOPMENT SERIES. FOR THE FIRST ONE, CLICK HERE.

5) Setting menu text colour to white in menus for black background : –

Menu and extended menu text.

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 “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>

**Change the above code to as shown below : – Code:

<style name="TextAppearance.Widget.IconMenu.Item" parent="@style/TextAppearance.Small">
        <item name="textColor">@color/bright_foreground_dark</item>
</style>

* Then for text colour in “MORE” menu lists, press CTRL+F and search for “Theme.ExpandedMenu”.
* 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>

** Change the above code to as shown below : – 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 : – Code:

Click here for the pastebin data.

* 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 : – Code:

Click here for the pastebin data.

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.

Files to be edited : – styles.xml in \projects\framework_name\res\values\

* Navigate to /res/values/ and open styles.xml.
* Locate <style name=”Theme”>
* Replace, Code:

<item name="colorBackground">@color/background_dark</item>

with Code:

<item name="colorBackground">@color/transparent</item>

* Replace, Code:

<item name="windowBackground">@drawable/screen_background_dark</item>

with Code: (if u need an image as background)

<item name="windowBackground">@drawable/mybackground</item>

OR Code: (if u need a color as background)

<item name="windowBackground">@color/white</item>

* Locate <style name=”Theme.Black” parent=”@style/Theme”>
* Replace, Code:

<item name="colorBackground">@color/black</item>

with Code:

<item name="colorBackground">@color/transparent</item>

* Replace, Code:

<item name="windowBackground">@color/black</item>

with Code: (if u need an image as background)

<item name="windowBackground">@drawable/mybackground</item>

OR Code: (if u need a color as background)

<item name="windowBackground">@color/white</item>

* Create a 240×400 px (Dimensions equal to resolution of your phone) PNG to your liking, name it mybackground.png and place it in drawable, drawable-ldpi, drawable-mdpi folder.

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.

This has been tested by me for Gingerbread, CM7 ROMs. For Samsung Froyo ROMs, these steps must be done with twframework-res.apk. 

*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>

Finally, your starting part should look something like this, 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>

*After this, we need to rectify the background problem when the statusbar is expanded. For this, in the same XML, search for the this line, 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">

*Change “android:layout_width” and “android:layout_height” parameters to 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">

*Lastly, search for the line <com.android.systemui.statusbar.DateView….>. In this line, search for the parameter, “android:gravity” and change the value from “left|center” to “center“. The line should look somewhat like this, 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.

Files to be edited : – status_bar.xml in projects\SystemUI.apk\res\layout\

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"

and move it to just above this : –
Code:

<com.android.systemui.statusbar.IconMerger

* Now scroll to the end of the line that starts like this
Code:

<LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons"

and change this : –
Code:

android:layout_alignParentRight="true"

to this : –
Code:

android:layout_alignParentLeft="true"

* Then on the line that starts like this : –
Code:

<com.android.systemui.statusbar.IconMerger

change this : –
Code:

android:layout_alignParentLeft="true"

to this : –
Code:

android:layout_alignParentRight="true"

And that’s it done.

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" />

With this you would get an italic, red clock.

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.

Files that have to be edited: – styles.xml in \projects\framework_name\res\values\.

* 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”>).

Next up, how to compile the APK using APKManager/APKTool and all the theming related to PNGs. :)