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

Search This thread

vanitea

Senior Member
Jan 13, 2012
222
57
bandung
Help me to change position of net speed meter to the left side? This is my line on statusbar.xml

<com.android.systemui.statusbar.policy.Traffic android:textAppearance="@style/TextAppearance.StatusBar.Traffic" android:gravity="left|center" android:id="@id/traffic" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginRight="2.0dip" android:singleLine="true" />.
Any idea?
 

Ticklefish

Inactive Recognized Themer
Oct 27, 2011
6,773
8,633
Hampshire, UK
Help me to change position of net speed meter to the left side? This is my line on statusbar.xml

<com.android.systemui.statusbar.policy.Traffic android:textAppearance="@style/TextAppearance.StatusBar.Traffic" android:gravity="left|center" android:id="@id/traffic" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginRight="2.0dip" android:singleLine="true" />.
Any idea?

Should be pretty simple...but I'll need your whole xml to show you how. ;)
 

vanitea

Senior Member
Jan 13, 2012
222
57
bandung

Attachments

  • 1391085515036.jpg
    1391085515036.jpg
    40.9 KB · Views: 144

Ticklefish

Inactive Recognized Themer
Oct 27, 2011
6,773
8,633
Hampshire, UK

So this is your current xml:

Code:
<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:id="@id/status_bar" android:focusable="true" android:fitsSystemWindows="true" android:descendantFocusability="afterDescendants"
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
    <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
        <ImageView android:id="@id/opaque_bg" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/status_bar_opaque_background" android:scaleType="fitXY" />
        <ImageView android:id="@id/transparent_bg" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/status_bar_transparent_background" android:scaleType="fitXY" />
        <ImageView android:id="@id/light_bg" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/status_bar_light_background" android:scaleType="fitXY" />
        <ImageView android:id="@id/lights_out_bg" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/status_bar_lights_out_background" android:scaleType="fitXY" />
    </FrameLayout>
    <ImageView android:id="@id/notification_lights_out" android:paddingBottom="2.0dip" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/ic_sysbar_lights_out_dot_small" android:scaleType="center" android:paddingStart="6.0dip" />
    <com.sonymobile.systemui.statusbar.operator.OperatorLabel android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:ellipsize="marquee" android:gravity="start|center" android:id="@id/operator" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:paddingStart="6.0dip" android:paddingEnd="4.0dip" />
    <LinearLayout android:orientation="horizontal" android:id="@id/status_bar_contents" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingStart="6.0dip" android:paddingEnd="6.0dip">
        <com.android.systemui.statusbar.StatusBarIconView android:id="@id/moreIcon" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/stat_notify_more" />
        <com.android.systemui.statusbar.phone.IconPartitioner android:id="@id/notification_icon_area" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
            <com.android.systemui.statusbar.phone.IconMerger android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/notificationIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" />
            <LinearLayout android:orientation="horizontal" android:id="@id/system_icon_area" android:layout_width="wrap_content" android:layout_height="fill_parent">
                <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" />
            </LinearLayout>
        </com.android.systemui.statusbar.phone.IconPartitioner>
        <com.android.systemui.statusbar.policy.Traffic android:textAppearance="@style/TextAppearance.StatusBar.Traffic" android:gravity="left|center" android:id="@id/traffic" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginLeft="0.0dip" android:singleLine="true" />
        <LinearLayout android:gravity="center" android:orientation="horizontal" android:id="@id/signal_battery_cluster" android:layout_width="wrap_content" android:layout_height="fill_parent" android:paddingStart="2.0dip">
            <include android:id="@id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" layout="@layout/signal_cluster_view" />
            <TextView android:layout_gravity="start|center" android:id="@id/battery_text" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/status_bar_settings_settings_button" android:singleLine="true" android:paddingStart="4.0dip" style="@style/SystemBarNotificationText" />
            <ImageView android:id="@id/battery" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingStart="4.0dip" />
        </LinearLayout>
        <com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="start|center" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:paddingStart="6.0dip" />
    </LinearLayout>
    <LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:animationCache="false" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingStart="6.0dip">
        <ImageSwitcher android:id="@id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginEnd="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:paddingTop="2.0dip" android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="1.0" android:paddingEnd="10.0dip">
            <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" android:textAlignment="viewStart" />
            <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" android:textAlignment="viewStart" />
        </com.android.systemui.statusbar.phone.TickerView>
    </LinearLayout>
    <ImageView android:layout_gravity="top|left|center" android:id="@id/rounded_corner_ul" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/rounded_corner_ul" />
    <ImageView android:layout_gravity="top|right|center" android:id="@id/rounded_corner_ur" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/rounded_corner_ur" />
</com.android.systemui.statusbar.phone.PhoneStatusBarView>

All you need to do is change it to this:

Code:
<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:id="@id/status_bar" android:focusable="true" android:fitsSystemWindows="true" android:descendantFocusability="afterDescendants"
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
    <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
        <ImageView android:id="@id/opaque_bg" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/status_bar_opaque_background" android:scaleType="fitXY" />
        <ImageView android:id="@id/transparent_bg" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/status_bar_transparent_background" android:scaleType="fitXY" />
        <ImageView android:id="@id/light_bg" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/status_bar_light_background" android:scaleType="fitXY" />
        <ImageView android:id="@id/lights_out_bg" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/status_bar_lights_out_background" android:scaleType="fitXY" />
    </FrameLayout>
    <ImageView android:id="@id/notification_lights_out" android:paddingBottom="2.0dip" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/ic_sysbar_lights_out_dot_small" android:scaleType="center" android:paddingStart="6.0dip" />
    <com.sonymobile.systemui.statusbar.operator.OperatorLabel android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:ellipsize="marquee" android:gravity="start|center" android:id="@id/operator" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:paddingStart="6.0dip" android:paddingEnd="4.0dip" />
    <LinearLayout android:orientation="horizontal" android:id="@id/status_bar_contents" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingStart="6.0dip" android:paddingEnd="6.0dip">
        <com.android.systemui.statusbar.policy.Traffic android:textAppearance="@style/TextAppearance.StatusBar.Traffic" android:gravity="left|center" android:id="@id/traffic" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginLeft="0.0dip" android:singleLine="true" />
        <com.android.systemui.statusbar.StatusBarIconView android:id="@id/moreIcon" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/stat_notify_more" />
        <com.android.systemui.statusbar.phone.IconPartitioner android:id="@id/notification_icon_area" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
            <com.android.systemui.statusbar.phone.IconMerger android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/notificationIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" />
            <LinearLayout android:orientation="horizontal" android:id="@id/system_icon_area" android:layout_width="wrap_content" android:layout_height="fill_parent">
                <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" />
            </LinearLayout>
        </com.android.systemui.statusbar.phone.IconPartitioner>
        <LinearLayout android:gravity="center" android:orientation="horizontal" android:id="@id/signal_battery_cluster" android:layout_width="wrap_content" android:layout_height="fill_parent" android:paddingStart="2.0dip">
            <include android:id="@id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" layout="@layout/signal_cluster_view" />
            <TextView android:layout_gravity="start|center" android:id="@id/battery_text" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/status_bar_settings_settings_button" android:singleLine="true" android:paddingStart="4.0dip" style="@style/SystemBarNotificationText" />
            <ImageView android:id="@id/battery" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingStart="4.0dip" />
        </LinearLayout>
        <com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="start|center" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:paddingStart="6.0dip" />
    </LinearLayout>
    <LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:animationCache="false" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingStart="6.0dip">
        <ImageSwitcher android:id="@id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginEnd="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:paddingTop="2.0dip" android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="1.0" android:paddingEnd="10.0dip">
            <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" android:textAlignment="viewStart" />
            <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" android:textAlignment="viewStart" />
        </com.android.systemui.statusbar.phone.TickerView>
    </LinearLayout>
    <ImageView android:layout_gravity="top|left|center" android:id="@id/rounded_corner_ul" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/rounded_corner_ul" />
    <ImageView android:layout_gravity="top|right|center" android:id="@id/rounded_corner_ur" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/rounded_corner_ur" />
</com.android.systemui.statusbar.phone.PhoneStatusBarView>

:good:
 
  • Like
Reactions: vanitea

vanitea

Senior Member
Jan 13, 2012
222
57
bandung
Woow thanks mate... i'll try it now and report the result soon

---------- Post added at 04:35 PM ---------- Previous post was at 03:51 PM ----------

Big thanks for you @Ticklefish, it's positioned like i wish.
 
  • Like
Reactions: Ticklefish

Ticklefish

Inactive Recognized Themer
Oct 27, 2011
6,773
8,633
Hampshire, UK
  • Like
Reactions: vanitea

Top Liked Posts

  • There are no posts matching your filters.
  • 75
    This is a TICKLEFISH TUTORIAL!
    picture.php


    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:
    picture.php

    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!

    picture.php
    6
    ---reserved---​
    4
    Is that the code? Odd..well, thanks. I'll update the op when I'm next at a computer.
    And that's when I'll be able to tell you what line to edit for the notifications text!

    Sent from my SK17i using xda premium

    Thanks Ticklefish:)
    Yes that the hex code for original ICS color. Here the other hex color code you may interest:
    ICS blue bright > ff38c0f4
    ICS blue dark > ff0099cc
    ICS blue light (default) > ff33b5e5
    ICS green dark > ff669900
    ICS green light > ff99cc00
    ICS orange dark > ffff8800
    ICS orange light > ffffbb33
    ICS purple dark > ff9933cc
    ICS purple light > ffaa66cc
    ICS red dark > ffcc0000
    ICS red light > ffff4444

    For those who interest in theming:)

    Tapatalk 2 addict user.
    4
    i dont know how to use pixelformer, i would appreciate if yhu can help me with tha code please!

    you can use, photo editor, free from play store, put it in drawing mode and it will show the colour and transparency value you can use .
    5etepuhu.jpg


    ⓐⓝⓓⓡⓞⓢⓘⓓⓔ ⓘⓢ ⓝⓞⓣ ⓐ ⓢⓘⓝ
    3
    The original ICS code colour is ff33b5e5

    @Ticklefish
    How about this?

    Screenshot_2012-12-18-23-51-01.png


    Which line should be edit to change the notification text colour?

    Tapatalk 2 addict user.