Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,742,966 Members 42,041 Now Online
XDA Developers Android and Mobile Development Forum

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

Tip us?
 
Ticklefish
Old
(Last edited by Ticklefish; 21st December 2012 at 12:10 AM.)
#1  
Ticklefish's Avatar
Recognized Themer - OP
Thanks Meter 3120
Posts: 3,586
Join Date: Oct 2011
Location: UK
Tutorial [MOD][TUT] How to Change The Statusbar Clock Colour

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:
Select 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:
Select 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:
Select 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:
Select 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:
Select 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!



- Tickle My Android 9.1 -

Making Theming Android Fun!


Decompile Files, Change Icons, Change Fonts,
Change Boot Animations, Create Flashable Zips, Deodex Roms
..And More!


http://forum.xda-developers.com/showthread.php?t=1633333
The Following 72 Users Say Thank You to Ticklefish For This Useful Post: [ Click to Expand ]
 
Ticklefish
Old
#2  
Ticklefish's Avatar
Recognized Themer - OP
Thanks Meter 3120
Posts: 3,586
Join Date: Oct 2011
Location: UK
---reserved---
The Following 6 Users Say Thank You to Ticklefish For This Useful Post: [ Click to Expand ]
 
A_U
Old
#3  
Recognized Contributor / Themer
Thanks Meter 4559
Posts: 3,223
Join Date: Jun 2012
thanx bro...
Samsung Galaxy Note 2 (GT-N7100)
Baseband : NE1
ROM : PA 4.42

 




My Facebook page | My XDA Contributions



Previous Devices -

Pandigital Supernova Tablet
Samsung Galaxy Ace
Samsung Galaxy Mini
The Following User Says Thank You to A_U For This Useful Post: [ Click to Expand ]
 
AlwaysDroid
Old
#4  
Senior Member
Thanks Meter 250
Posts: 963
Join Date: Mar 2012
Location: Edmonton
Awesome! Thanks man.
Phone Specs:
Phone: HTC One
ROM: Paranoid Android

Galaxy Gio, Galaxy S > Nexus 4 > HTC One
The Following User Says Thank You to AlwaysDroid For This Useful Post: [ Click to Expand ]
 
ickk
Old
#5  
ickk's Avatar
Senior Member
Thanks Meter 113
Posts: 482
Join Date: Nov 2011
Location: Tampa, FL
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.
TF101 16GB | 1.4Ghz | OMNI 4.4.2
TF201 32GB | 1.7Ghz | AOSPA 4.3.2
I9000 16GB | 1Ghz | AOSPA 4.4.2
Newest: EVGA Tegra Note 7
The Following User Says Thank You to ickk For This Useful Post: [ Click to Expand ]
 
Cyclosporine
Old
#6  
Cyclosporine's Avatar
Senior Member
Thanks Meter 36
Posts: 153
Join Date: Oct 2012
Location: Panama
THANK YOU!!
Time for me to start going hard on decompiling apk
Samsung Galaxy SIII GT-I9300 - WanamLite XXELLC + JKay Deluxe Framework v14.7.4 + Siyah Kernel 1.8.9 + ChristianC Multiview allapp control mod + Glassblack multiview theme

No need for anything else!
Trying out on Dual boot Cyanogenmod 10.1 = awesome
The Following User Says Thank You to Cyclosporine For This Useful Post: [ Click to Expand ]
 
p0isonra1n
Old
#7  
p0isonra1n's Avatar
Member
Thanks Meter 28
Posts: 66
Join Date: Jul 2012
Location: Gold Coast

 
DONATE TO ME
Thanks for this great tutorial.
The Following User Says Thank You to p0isonra1n For This Useful Post: [ Click to Expand ]
 
ross231
Old
#8  
Senior Member
Thanks Meter 91
Posts: 554
Join Date: Jan 2012
Does this work on any device?
Moto G
Stock 4.3
Sony tablet S
Stock 4.0.3 Release 1A not rooted
iPod Touch 1G
3.1.3
 
Sikac101
Old
#9  
Sikac101's Avatar
Senior Member
Thanks Meter 47
Posts: 187
Join Date: Jun 2012
Location: Windhoek
Thanks for this, a very good TUT!
Devices:
Samsung Galaxy S5 (SM-G900H), Rom:[KITKAT][4.4.2][XXU1ANE2] KOT49H ROM, Modem:G900HXXU1ANE2, Kernel: Stock.
Samsung Galaxy Note II (GT-N7100), Rom:[KITKAT][4.4] ParanoidAndroid ROM, Modem:N7100XXUFND3, Kernel: Stock.
The Following User Says Thank You to Sikac101 For This Useful Post: [ Click to Expand ]
 
whalesplaho
Old
#10  
whalesplaho's Avatar
Senior Member
Thanks Meter 1372
Posts: 5,968
Join Date: Feb 2012
Location: Treasure Island
bigups brov..... well done!!!

currently on mobile, will check it out well on PC!






...what's tha sense of workin' hard if you never get to play...

...Pac



The Following 2 Users Say Thank You to whalesplaho For This Useful Post: [ Click to Expand ]
Tags
clock, color, colour, textcolor
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes