Welcome to XDA

Search to go directly to your device's forum

Register an account

Unlock full posting privileges

Ask a question

No registration required
Post Reply

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

OP Ticklefish

10th December 2012, 01:10 AM   |  #1  
Ticklefish's Avatar
OP Recognized Themer
Flag UK
Thanks Meter: 3,803
 
4,173 posts
Join Date:Joined: Oct 2011
More
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 01:10 AM.
The Following 73 Users Say Thank You to Ticklefish For This Useful Post: [ View ]
10th December 2012, 01:14 AM   |  #2  
Ticklefish's Avatar
OP Recognized Themer
Flag UK
Thanks Meter: 3,803
 
4,173 posts
Join Date:Joined: Oct 2011
More
---reserved---
The Following 6 Users Say Thank You to Ticklefish For This Useful Post: [ View ]
16th December 2012, 07:14 AM   |  #3  
Recognized Contributor / Themer
Flag Wichita
Thanks Meter: 4,595
 
3,223 posts
Join Date:Joined: Jun 2012
More
thanx bro...
The Following User Says Thank You to A_U For This Useful Post: [ View ]
16th December 2012, 08:06 AM   |  #4  
Senior Member
Flag Edmonton
Thanks Meter: 251
 
965 posts
Join Date:Joined: Mar 2012
More
Awesome! Thanks man.
The Following User Says Thank You to AlwaysDroid For This Useful Post: [ View ]
16th December 2012, 08:24 AM   |  #5  
ickk's Avatar
Senior Member
Flag Tampa, FL
Thanks Meter: 113
 
482 posts
Join Date:Joined: Nov 2011
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, 08:48 AM   |  #6  
Cyclosporine's Avatar
Senior Member
Flag Panama
Thanks Meter: 36
 
153 posts
Join Date:Joined: Oct 2012
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, 10:17 AM   |  #7  
p0isonra1n's Avatar
Member
Flag Gold Coast
Thanks Meter: 29
 
66 posts
Join Date:Joined: Jul 2012
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, 11:47 AM   |  #8  
Senior Member
Thanks Meter: 94
 
561 posts
Join Date:Joined: Jan 2012
More
Does this work on any device?
16th December 2012, 11:50 AM   |  #9  
Sikac101's Avatar
Senior Member
Flag Windhoek
Thanks Meter: 48
 
192 posts
Join Date:Joined: Jun 2012
More
Thanks for this, a very good TUT!
The Following User Says Thank You to Sikac101 For This Useful Post: [ View ]
16th December 2012, 01:27 PM   |  #10  
whalesplaho's Avatar
Senior Member
Flag Treasure Island
Thanks Meter: 1,373
 
5,975 posts
Join Date:Joined: Feb 2012
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 ]
Post Reply Subscribe to Thread

Tags
clock, color, colour, textcolor
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes