[TUT] How To Center The Clock On The Statusbar..And Move Other Icons As Well!

How To Center The Clock On The Statusbar

(***BEFORE YOU DO ANY MODDING, MAKE SURE YOU MAKE A NANDROID BACKUP!!***)

Centering the clock on the statusbar is easy. Stopping it from clashing with other things is a little bit harder.

I originally posted here with a long method of fixing this. The problem was, although it worked, it worked for my particular requirements and my particular resolution. Since then I've found a few different ways of doing it and doing it better.

Previously I posted here with four Methods to center the clock. Each one was slightly harder to do than the previous one but was slightly better. After working out the fourth Method, I realised that two of the others were a little redundant and were just causing confusion.

So I've rewritten this post again. Again. This is now the perfect way to center the clock in the statusbar and anybody can do it if they know how. So read on to find out how!

To begin, we need to decompile SystemUI.apk. I would suggest using Tickle My Android, a decompiling tool which has won international acclaim and which can be found at tinyurl.com/ticklemyandroid.

Once you've decompiled the apk, edit res\layout\status_bar.xml
I suggest using Notepad++ for this but you can even use just ordinary Notepad if you're feeling brave.

I'm going to show you to properly center the clock using the xml found in stock Sony Timescape ICS but the principles can be applied to pretty much any rom on any device.

This is the stock code:

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>

Busy, isn't it? It gets worse..the code for KitKat is even busier!

But don't worry. Most of the code we can leave untouched. All we care about is this bit:

Code:

<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">

This is the "@id/icons" LinearLayout, which contains all the icons we normally see on the statusbar, and the first line of the "@id/ticker" LinearLayout, which displays the notification texts.

This sort of setup will be on most, if not all roms. The id might be different, you might have "@id/status_bar_contents" or something similar instead, but it'll still be the same idea.

Found out where those bits are? Well, let's do this thing!

The Simple Method

This was first pointed out to me by @serajr, so big thanks to him.

The Simple Method is very simple, very quick and is very easy to do if you've never edited Android xml before.

First, we take the clock and put it in the first line before the "@id/icons" LinearLayout. We need to do this because centering anything in a LinearLayout is possible, but a little complicated..as you'll see in the next method!

We'll need to change the width of the space the clock goes into and the positioning within it. Or, in other words, we need to do this:

Code:

<com.android.systemui.statusbar.policy.Clock android:id="@id/clock" android:paddingLeft="6.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:singleLine="true" />
<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>
</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">

So far so good, but there is a problem.

All the contents of the "@id/icons" LinearLayout are pushed out of the top of the screen when a notification comes in..but the clock now isn't part of that, so it won't and we get overlapping.

To fix this, we need to add a background to the "@id/ticker" LinearLayout. This will cover up the clock when there's a new notification and we get no overlapping. We'll use the same background as the normal statusbar, defined at the top of the xml, but you could make it anything if you want to be artistic.

So the new code looks like this:

Code:

<com.android.systemui.statusbar.policy.Clock android:id="@id/clock" android:paddingLeft="6.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:singleLine="true" />
<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>
</LinearLayout>
<LinearLayout android:background="@drawable/status_bar_background" android:orientation="horizontal" android:id="@id/ticker" android:paddingLeft="6.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent" android:animationCache="false">

This is very quick to do but it doesn't work with a transparent statusbar, since the background would be then transparent and won't blank out the clock.

So it won't work for KitKat either...

Plus, if you want to be fussy, it's not quite a perfect fix as the clock doesn't actually move and the other icons do which can look a little strange.

So that's why there's a second Method we could use instead..

The Best Method

This is a bit more involved but is the very best way to center the clock. Or anything else. In fact, it's a brilliant way to arrange your statusbar so you can move anything anywhere.

The Best Method splits the icons LinearLayout into three unique areas, making it very easy to decide what you want where.

What we do is we use this basic layout:

Code:

<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:id="@+id/Status_Bar_Left_Side" android:orientation="horizontal" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">

   <!-- HERE ARE ALL THE CODES FOR THE ITEMS ON THE LEFT SIDE OF THE STATUSBAR -->

   </LinearLayout>

   <!-- HERE ARE ALL THE CODES FOR THE ITEMS IN THE CENTER OF THE STATUSBAR -->

   <RelativeLayout android:id="@+id/Status_Bar_Right_Side" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
      <LinearLayout android:id="@+id/Inside_Status_Bar_Right_Side" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentRight="true">

   <!-- HERE ARE ALL THE CODES FOR THE ITEMS ON THE RIGHT SIDE OF THE STATUSBAR -->

      </LinearLayout>
   </RelativeLayout>
</LinearLayout>

Make sense? No? Well, don't worry. There is a logic behind all this. Even if it's not obvious.

This Method basically divides the statusbar into just two individual areas. Because those areas have the same 'weight' as each other, they take up exactly the same amount of space as each other. Meaning that whatever goes between those two areas, as long as it doesn't have a weight of 1 or more, will be essentially pushed into the exact center of the statusbar.

So, what we do next is apply this Method to our code from above to create:

Code:

<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:id="@+id/Status_Bar_Left_Side" android:orientation="horizontal" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0"> 
      <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>
   <com.android.systemui.statusbar.policy.Clock android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center" android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:singleLine="true"/>
   <RelativeLayout android:id="@+id/Status_Bar_Right_Side" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
      <LinearLayout android:id="@+id/Inside_Status_Bar_Right_Side" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentRight="true">
         <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>
      </LinearLayout>
   </RelativeLayout>
</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">

You might need to adjust some of the attributes on some of the lines to get it all to work but otherwise it's actually all pretty simple.

And that's it. Those are the two methods. Hopefully this will give you a better understanding of what all this code actually means and put you on the road to creating your own mods.

Now you need to save the file and recompile the app. Depending on which tool you're using to recompile, you may need to do something else to let the app work on your phone (this is the "Recompile With Original Signature" option in Tickle My Android, by the way).

Push it or flash it back to your phone...and enjoy!

Download attcment via Google Drive here

Source : http://forum.xda-developers.com/showthread.php?t=1767593