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://xdaforums.com/showthread.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" [COLOR="Red"]android:textColor="#ff278ab1"[/COLOR] />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" [COLOR="red"]android:textAppearance="@style/ICSBlue"[/COLOR] 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:
