[XDA-University] Ticklefish:
*** How To Change The Colour Of The Status Bar Clock ***​

For our first mod, we're going to do something fairly simple. We're going to change the colour of something.

​

Changing the colour of the clock on the status bar may be an easy mod but it's one that can make a dramatic difference to the look of your Android device. And it serves as a nice introduction to how easy it is to mod XML.

To do this, we'll need to edit status_bar.xml inside SystemUI.apk.

If you're using a multi-sim phone, you might need to edit msim_status_bar.xml.

If you're using a non-stock rom, you might need to decompile a different apk to get the relevant XML file.

This is what the status_bar.xml looks like in stock KitKat:

<com.android.systemui.statusbar.phone.PhoneStatusBarView android:id="@+id/status_bar" android:background="@drawable/system_bar_background" android:orientation="vertical" android:focusable="true" android:descendantFocusability="afterDescendants" android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
<ImageView android:id="@+id/notification_lights_out" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="match_parent" android:paddingStart="6dip" android:paddingBottom="2dip" android:src="@drawable/ic_sysbar_lights_out_dot_small" android:scaleType="center" android:visibility="gone" />
<LinearLayout android:id="@+id/status_bar_contents" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingStart="6dip" android:paddingEnd="6dip" android:orientation="horizontal" >
<LinearLayout android:id="@+id/notification_icon_area" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:orientation="horizontal" >
<com.android.systemui.statusbar.StatusBarIconView android:id="@+id/moreIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="match_parent" android:src="@drawable/stat_notify_more" android:visibility="gone" />
<com.android.systemui.statusbar.phone.IconMerger android:id="@+id/notificationIcons" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentStart="true" android:gravity="center_vertical" android:orientation="horizontal"/>
</LinearLayout>
<LinearLayout android:id="@+id/system_icon_area" android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal">
<LinearLayout android:id="@+id/statusIcons" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center_vertical" android:orientation="horizontal"/>
<LinearLayout android:id="@+id/signal_battery_cluster" android:layout_width="wrap_content" android:layout_height="match_parent" android:paddingStart="2dp" android:orientation="horizontal" android:gravity="center" >
<include layout="@layout/signal_cluster_view" android:id="@+id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<com.android.systemui.BatteryMeterView android:id="@+id/battery" android:layout_height="16dp" android:layout_width="10.5dp" android:layout_marginBottom="0.33dp" android:layout_marginStart="4dip" />
</LinearLayout>
<com.android.systemui.statusbar.policy.Clock android:id="@+id/clock" android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:layout_width="wrap_content" android:layout_height="match_parent" android:singleLine="true" android:paddingStart="6dip" android:gravity="center_vertical|start" />
</LinearLayout>
</LinearLayout>
<LinearLayout android:id="@+id/ticker" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingStart="6dip" android:animationCache="false" android:orientation="horizontal" >
<ImageSwitcher android:id="@+id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginEnd="4dip" >
<com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="center" />
<com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="center" />
</ImageSwitcher>
<com.android.systemui.statusbar.phone.TickerView android:id="@+id/tickerText" android:layout_width="0dip" android:layout_weight="1" android:layout_height="wrap_content" android:paddingTop="2dip" android:paddingEnd="10dip">
<TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" />
</com.android.systemui.statusbar.phone.TickerView>
</LinearLayout>
</com.android.systemui.statusbar.phone.PhoneStatusBarView>

Here's the Gingerbread status_bar.xml:

<com.android.systemui.statusbar.StatusBarView android:orientation="vertical" android:background="@drawable/gradient" android:focusable="true" android:descendantFocusability="afterDescendants"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:orientation="horizontal" android:id="@id/icons" android:layout_width="fill_parent" android:layout_height="fill_parent">
<com.android.systemui.statusbar.IconMerger android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/notificationIcons" android:paddingLeft="6.0dip" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0" android:layout_alignParentLeft="true" />
<LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons" android:paddingRight="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentRight="true" />
<com.android.systemui.statusbar.Clock android:textAppearance="@*android:style/TextAppearance.StatusBar.Icon" android:textSize="16.0sp" android:gravity="center_vertical" android:id="@id/clock" android:paddingRight="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
</LinearLayout>
<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">
<ImageSwitcher android:id="@id/tickerIcon" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginRight="8.0dip">
<com.android.systemui.statusbar.AnimatedImageView android:layout_width="25.0dip" android:layout_height="25.0dip" />
<com.android.systemui.statusbar.AnimatedImageView android:layout_width="25.0dip" android:layout_height="25.0dip" />
</ImageSwitcher>
<com.android.systemui.statusbar.TickerView android:id="@id/tickerText" android:paddingTop="2.0dip" android:paddingRight="10.0dip" android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="1.0">
<TextView android:textAppearance="@*android:style/TextAppearance.StatusBar.Ticker" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />
<TextView android:textAppearance="@*android:style/TextAppearance.StatusBar.Ticker" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />
</com.android.systemui.statusbar.TickerView>
</LinearLayout>
<com.android.systemui.statusbar.DateView android:textAppearance="@*android:style/TextAppearance.StatusBar.Icon" android:gravity="left|center" android:id="@id/date" android:background="#ff000000" android:paddingLeft="6.0px" android:paddingRight="6.0px" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
</com.android.systemui.statusbar.StatusBarView>

Android XML has changed a lot over the years but one thing has always stayed the same. There's always been a clock. And it's always been a piece of text.

Here's the KitKat clock line:

<com.android.systemui.statusbar.policy.Clock
android:id="@+id/clock"
android:textAppearance="@style/TextAppearance.StatusBar.Clock"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:singleLine="true"
android:paddingStart="6dip"
android:gravity="center_vertical|start"
/>

As far as Android is concerned, the clock is just a piece of text that changes every minute. And because it's text, you can use text attributes on it. One such attribute is 'android:textColor'.

Let's say we want to change our clock from the normal, boring white to a rich green. Here's what the code needs to look like:

<com.android.systemui.statusbar.policy.Clock
[color="red"] android:textColor="#ff00ff00"[/color]
android:id="@+id/clock"
android:textAppearance="@style/TextAppearance.StatusBar.Clock"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:singleLine="true"
android:paddingStart="6dip"
android:gravity="center_vertical|start"
/>

See that new attribute I've put in? This changes the colour of the text in this tag to 'ff00ff00'. Which is an ARGB code for completely opaque green.

"ARGB" is short for "Alpha Red Green Blue" and uses hexadecimal codes. Alpha, for those who might not know, is a transparency value.

So the colour I've set the clock to is "not transparent at all" - "not red at all" - "completely green" - "not blue at all".

You can use an RGB code instead, which would give us a colour '00ff00, but I prefer sticking to ARGB at all times to keep it simple. You never know when you might want to mess around with transparency!

Save, recompile, flash and your clock is now a lovely shade of green. Simple!

This attribute can be used on any text in your apk, not just the clock. You can change the colour of the date, the carrier label, your notification text...anything at all as long it's regarded as text by Android!

*** How To Change The Colour Of The Status Bar Clock - The Advanced Method ***​

Okay, so this is where it starts to get a bit more complicated.

What if there was a particular colour that you really liked, that you wanted to use for a lot of the text in your app, but which had an ARGB code that wasn't easy to remember? What if you wanted to use 'ffdb7093' (picked at random from www.color-hex.com)?

I can't remember that code and I've only just written it!

Well, the good news is that I don't have to remember it. Inside your decompiled app will be a folder called "values". Inside that, have a look at "colors.xml"

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="system_bar_background_opaque">#ff000000</color>

...and so on for a few lines..

<color name="battery_text_color_critical">#ffcb2026</color>
</resources>

These are predefined colours that our app can use. So let's add a new one..

<?xml version="1.0" encoding="utf-8"?>
<resources>
[color="red"] <color name="my_colour">#ffdb7093</color>[/color]
<color name="system_bar_background_opaque">#ff000000</color>

...and so on for a few lines..

<color name="battery_text_color_critical">#ffcb2026</color>
</resources>

...change our clock XML....

<com.android.systemui.statusbar.policy.Clock
[color="red"] android:textColor="@color/my_colour"[/color]
android:id="@+id/clock"
android:textAppearance="@style/TextAppearance.StatusBar.Clock"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:singleLine="true"
android:paddingStart="6dip"
android:gravity="center_vertical|start"
/>

...add that attribute to any other text lines we want to change...

<TextView
[color="red"] android:textColor="@color/my_colour"[/color]
android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
/>

...save, recompile, flash and suddenly the clock and the notification text have changed to what color-hex.com describes as "Pale Violet Red". Nice!

Don't like it? Then you can just change the one line in colors.xml without having to worry about any other lines of XML.

*** How To Change The Colour Of The Status Bar Clock - The Even More Advanced Method ***​

When you decompiled SystemUI.apk, you may have noticed that you needed to install framework-res.apk to your PC first.

This is because SystemUI.apk uses certain resources that are contained within framework-res.apk and you need to make those available for the apk to be decompiled fully. Amongst those resources are some colours that are accessible by SystemUI.apk, as well as any other app that can access framework-res.apk.

In other words, we can add our colour to framework-res.apk and it can be used by SystemUI.apk, Phone.apk, settings.apk...and lots of other apps!

Add your colour to 'framework-res.apk/res/values/colors.xml':

<?xml version="1.0" encoding="utf-8"?>
<resources>
[color="red"] <color name="my_colour">#ffdb7093</color>[/color]
<color name="darker_gray">#ffaaaaaa</color>

...and so on for several lines..

<color name="webviewchromium_autofill_dark_divider_color">#ffc0c0c0</color>
</resources>

Then add a textColour attribute to the lines you want to change in the apk files you want to change. But use a slightly different format than before..

<com.android.systemui.statusbar.policy.Clock
[color="red"] android:textColor="@[i]android:[/i]color/my_colour"[/color]
android:id="@+id/clock"
android:textAppearance="@style/TextAppearance.StatusBar.Clock"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:singleLine="true"
android:paddingStart="6dip"
android:gravity="center_vertical|start"
/>

It'll take a while but the result is that you'll change the colour of lots of pieces of text in your rom. And, should you decide to change that colour again, all you need to do is edit one line. Very nice!

Hopefully this all makes sense. It does to me but I've been experimenting with Android XML for about three years now.. If it doesn't make any sense, feel free to ask for help. This is probably the simplest XML mod you can do and it's only going to get more complicated from here!