FORUMS

Analysis & Opinion

Top Forum Discussions

[MOD][TUT] How to Change The Statusbar Clock Colour

4,816 posts
Thanks Meter: 5,025
 
By Ticklefish, Recognized Themer on 10th December 2012, 12:10 AM
Post Reply Subscribe to Thread Email Thread
This is a TICKLEFISH TUTORIAL!



I've had a few people recently ask me how to change the colour of various things on their statusbar and/or notifications screen so I thought I'd do a little tutorial.

This will show you how to change the colour of your statusbar clock. It's actually very simple but, once you know about it, you can apply this to all kinds of things.

This is my second tutorial here. If you want to learn how to center your clock, or move about various other items, check out my first one here: http://forum.xda-developers.com/show....php?t=1767593


So, to begin, you will need to edit your status_bar.xml. To get this, you'll need to decompile either your SystemUI.apk or framework-res.apk, depending on your rom. If it's not in either apk's, you'll need to decompile something else.

How do you decompile an apk file? Well, it wouldn't hurt to check out Tickle My Android, the link is in my signature.

This is the stock Timescape ICS status_bar.xml:

Code:
<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:background="@drawable/status_bar_background" android:focusable="true" android:descendantFocusability="afterDescendants"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
  <LinearLayout android:orientation="horizontal" android:id="@id/icons" android:paddingLeft="6.0dip" android:paddingRight="6.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
    <LinearLayout android:orientation="horizontal" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
      <com.android.systemui.statusbar.StatusBarIconView android:id="@id/moreIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:visibility="gone" android:src="@drawable/stat_notify_more" />
      <com.android.systemui.statusbar.phone.IconMerger android:orientation="horizontal" android:id="@id/notificationIcons" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_vertical" android:layout_alignParentLeft="true" />
    </LinearLayout>
    <LinearLayout android:orientation="horizontal" android:id="@id/statusIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center_vertical" />
    <ImageView android:id="@id/stat_no_sim" android:paddingLeft="4.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="gone" android:layout_gravity="center_vertical" />
    <LinearLayout android:orientation="horizontal" android:id="@id/signal_battery_cluster" android:paddingLeft="2.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center">
      <include android:id="@id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" layout="@layout/signal_cluster_view" />
      <ImageView android:id="@id/battery" android:paddingLeft="8.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    </LinearLayout>
    <com.android.systemui.statusbar.policy.Clock android:id="@id/clock" android:paddingLeft="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="left|center" android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:singleLine="true" />
  </LinearLayout>
  <LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:paddingLeft="6.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent" android:animationCache="false">
    <ImageSwitcher android:id="@id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginRight="4.0dip">
      <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:paddingRight="10.0dip" android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="1.0" android:paddingTop="2.0dip">
      <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:singleLine="true" />
      <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:singleLine="true" />
    </com.android.systemui.statusbar.phone.TickerView>
  </LinearLayout>
</com.android.systemui.statusbar.phone.PhoneStatusBarView>
This is long and complicated but we only care about one line:

Code:
    <com.android.systemui.statusbar.policy.Clock android:id="@id/clock" android:paddingLeft="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="left|center" android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:singleLine="true" />
That's the line that controls the appearance of the clock. We're going to edit it to change the clock from white to ICS-style blue...but there are two different ways of doing it..

The Quick Way

I'm not kidding when I say this is quick. We will need the ARGB code for the colour we want. ARGB stands for Alpha Red Green Blue and is a mix of eight hexadecimal characters. For opaque, ICS blue, we will want the code "ff278ab1". And we will want the parameter "textColor".

The new code we need will look like this:

Code:
    <com.android.systemui.statusbar.policy.Clock android:id="@id/clock" android:paddingLeft="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="left|center" android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:singleLine="true" android:textColor="#ff278ab1" />
Save, recompile and all the usual stuff and...that's it. Simple, no?

The Slightly Slower Way

Have a look at res\values\styles.xml

This file defines a few styles that can be used by pretty much anything. You may spot a style called TextAppearance.StatusBar.Clock being defined here. This is used by the clock in status_bar.xml but it could also be used by anything else. The date, carrier label (if you have it in your statusbar), anything at all.

So let's make a new style:

Code:
    <style name="ICSBlue">
        <item name="android:textSize">16.0dip</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">#ff278ab1</item>
    </style>
and add it to the file.

Now edit the clock line in status_bar.xml to:

Code:
    <com.android.systemui.statusbar.policy.Clock android:id="@id/clock" android:paddingLeft="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="left|center" android:textAppearance="@style/ICSBlue" android:singleLine="true" />
Save, recompile, blah-blah-blah..

The advantage of doing it this way is you only need to enter the ARGB code once and that new style can be used in any layout file to make anything that colour. Just remember that the style also defines the text size as well.

And here's the result:

And that's the tutorial done. Simple, but very handy to know how to do!

Now, remember "android:textColor" can be used for any text, not just the clock.

Enjoy!

Last edited by Ticklefish; 21st December 2012 at 12:10 AM.
The Following 74 Users Say Thank You to Ticklefish For This Useful Post: [ View ]
 
 
10th December 2012, 12:14 AM |#2  
Ticklefish's Avatar
OP Recognized Themer
Flag UK
Thanks Meter: 5,025
 
More
---reserved---
The Following 6 Users Say Thank You to Ticklefish For This Useful Post: [ View ]
16th December 2012, 07:06 AM |#4  
Senior Member
Flag Edmonton
Thanks Meter: 251
 
More
Awesome! Thanks man.
The Following User Says Thank You to AlwaysDroid For This Useful Post: [ View ]
16th December 2012, 07:24 AM |#5  
ickk's Avatar
Senior Member
Flag Tampa, FL
Thanks Meter: 113
 
More
it's about time someone wrote a decent guide on how to do this.

I've learned this on my own over time, but it would have been nice to start off with a resource like this one.
The Following User Says Thank You to ickk For This Useful Post: [ View ]
16th December 2012, 07:48 AM |#6  
Cyclosporine's Avatar
Senior Member
Flag Panama
Thanks Meter: 36
 
More
THANK YOU!!
Time for me to start going hard on decompiling apk
The Following User Says Thank You to Cyclosporine For This Useful Post: [ View ]
16th December 2012, 09:17 AM |#7  
p0isonra1n's Avatar
Member
Flag Gold Coast
Thanks Meter: 29
 
Donate to Me
More
Smile
Thanks for this great tutorial.
The Following User Says Thank You to p0isonra1n For This Useful Post: [ View ]
16th December 2012, 10:47 AM |#8  
Senior Member
Thanks Meter: 99
 
More
Does this work on any device?
16th December 2012, 10:50 AM |#9  
Sikac101's Avatar
Senior Member
Flag Windhoek
Thanks Meter: 48
 
More
Thanks for this, a very good TUT!
The Following User Says Thank You to Sikac101 For This Useful Post: [ View ]
16th December 2012, 12:27 PM |#10  
whalesplaho's Avatar
Senior Member
Flag Treasure Island
Thanks Meter: 1,453
 
More
bigups brov..... well done!!!

currently on mobile, will check it out well on PC!
The Following 2 Users Say Thank You to whalesplaho For This Useful Post: [ View ]
16th December 2012, 04:32 PM |#11  
Scary Guy's Avatar
Senior Member
Flag Detroit, Michigan
Thanks Meter: 32
 
Donate to Me
More
How advanced is this? Can I do something like the long dead "Reloaded ICS" with it? http://forum.xda-developers.com/show....php?t=1531222

Because this was awesome and seriously needs to be recreated.

Read More
Post Reply Subscribe to Thread

Tags
clock, color, colour, textcolor
Previous Thread Next Thread
Thread Tools
Display Modes