[XDA-University] Ticklefish:
*** How To Center The Clock In The Status Bar...Part 2 ***​

So how do we fix this issue of the overlapping notifications with the Simple Method?

With the Best Method, of course!

*** 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 status bar so you can move anything anywhere.

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

What we do is we use this basic arrangement:

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

[COLOR="Red"]<!-- HERE ARE ALL THE CODES FOR THE ITEMS ON THE LEFT SIDE OF THE STATUSBAR -->[/COLOR]

</LinearLayout>

[COLOR="Red"]<!-- HERE ARE ALL THE CODES FOR THE ITEMS IN THE CENTER OF THE STATUSBAR -->[/COLOR]

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

[COLOR="red"]<!-- HERE ARE ALL THE CODES FOR THE ITEMS ON THE RIGHT SIDE OF THE STATUSBAR -->[/COLOR]

</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 status bar 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 status bar.

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

[color="red"]<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">[/color]
<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">
[color="red"]<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>[/color]
</LinearLayout>
[color="red"]<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"/>[/color]
<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">
[color="red"]<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>[/color]
</LinearLayout>
</RelativeLayout>
[color="red"]</LinearLayout>[/color]

The original code is in red. The only real challenge with this Method is knowing what lines to put in the @id/Status_Bar_Left_Side Layout and which lines to put in the @id/Status_Bar_Right_Side Layout. But take your time, look at the attributes (especially the @id attributes) and it should all become clear.

​

See? Doesn't that just look beautiful?

And so easy to do as well!

*** The Best Method...On KitKat And Lollipop ***​

When I came up with the Best Method, Google were only just getting ready to give the world Jelly Bean.

It's two years later and the XML has changed a bit. This is what the stock KitKat status_bar.xml looks like:

<com.android.systemui.statusbar.phone.PhoneStatusBarView android:id="@+id/status_bar" android:background="@drawable/system_bar_background" android:orientation="vertical" android:focusable="true" android:descendantFocusability="afterDescendants" android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
<ImageView android:id="@+id/notification_lights_out" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="match_parent" android:paddingStart="6dip" android:paddingBottom="2dip" android:src="@drawable/ic_sysbar_lights_out_dot_small" android:scaleType="center" android:visibility="gone" />
<LinearLayout android:id="@+id/status_bar_contents" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingStart="6dip" android:paddingEnd="6dip" android:orientation="horizontal" >
<LinearLayout android:id="@+id/notification_icon_area" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:orientation="horizontal" >
<com.android.systemui.statusbar.StatusBarIconView android:id="@+id/moreIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="match_parent" android:src="@drawable/stat_notify_more" android:visibility="gone" />
<com.android.systemui.statusbar.phone.IconMerger android:id="@+id/notificationIcons" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentStart="true" android:gravity="center_vertical" android:orientation="horizontal"/>
</LinearLayout>
<LinearLayout android:id="@+id/system_icon_area" android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal">
<LinearLayout android:id="@+id/statusIcons" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center_vertical" android:orientation="horizontal"/>
<LinearLayout android:id="@+id/signal_battery_cluster" android:layout_width="wrap_content" android:layout_height="match_parent" android:paddingStart="2dp" android:orientation="horizontal" android:gravity="center" >
<include layout="@layout/signal_cluster_view" android:id="@+id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<com.android.systemui.BatteryMeterView android:id="@+id/battery" android:layout_height="16dp" android:layout_width="10.5dp" android:layout_marginBottom="0.33dp" android:layout_marginStart="4dip" />
</LinearLayout>
<com.android.systemui.statusbar.policy.Clock android:id="@+id/clock" android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:layout_width="wrap_content" android:layout_height="match_parent" android:singleLine="true" android:paddingStart="6dip" android:gravity="center_vertical|start" />
</LinearLayout>
</LinearLayout>
<LinearLayout android:id="@+id/ticker" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingStart="6dip" android:animationCache="false" android:orientation="horizontal" >
<ImageSwitcher android:id="@+id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginEnd="4dip" >
<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:layout_width="0dip" android:layout_weight="1" android:layout_height="wrap_content" android:paddingTop="2dip" android:paddingEnd="10dip">
<TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" />
</com.android.systemui.statusbar.phone.TickerView>
</LinearLayout>
</com.android.systemui.statusbar.phone.PhoneStatusBarView>

It looks similar to the code at the top of this post but there are significant differences. The @id/icons Layout has been replaced with a @id/status_bar_contents Layout which looks a lot more complex.

But it isn't, really. We can still use the Best Method on it. And it's actually quite easy to do.

The Best Method splits the status bar into two individual areas. The @id/status_bar_contents Layout splits the status bar into two individual areas.

Half the work is done for us.

We just need to make four very simple changes..

<com.android.systemui.statusbar.phone.PhoneStatusBarView android:id="@+id/status_bar" android:background="@drawable/system_bar_background" android:orientation="vertical" android:focusable="true" android:descendantFocusability="afterDescendants" android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
<ImageView android:id="@+id/notification_lights_out" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="match_parent" android:paddingStart="6dip" android:paddingBottom="2dip" android:src="@drawable/ic_sysbar_lights_out_dot_small" android:scaleType="center" android:visibility="gone" />
<LinearLayout android:id="@+id/status_bar_contents" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingStart="6dip" android:paddingEnd="6dip" android:orientation="horizontal" >
<LinearLayout android:id="@+id/notification_icon_area" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:orientation="horizontal" >
<com.android.systemui.statusbar.StatusBarIconView android:id="@+id/moreIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="match_parent" android:src="@drawable/stat_notify_more" android:visibility="gone" />
<com.android.systemui.statusbar.phone.IconMerger android:id="@+id/notificationIcons" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentStart="true" android:gravity="center_vertical" android:orientation="horizontal"/>
</LinearLayout>
[color="red"] <com.android.systemui.statusbar.policy.Clock android:id="@+id/clock" android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:layout_width="wrap_content" android:layout_height="match_parent" android:singleLine="true" android:gravity="center_vertical|start" />[/color]
<LinearLayout android:id="@+id/system_icon_area" [color="red"]android:layout_width="0dip" android:layout_weight="1"[/color] android:layout_height="match_parent" android:orientation="horizontal">
[color="red"]<View android:visibility="invisible" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0" />[/color]
<LinearLayout android:id="@+id/statusIcons" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center_vertical" android:orientation="horizontal"/>
<LinearLayout android:id="@+id/signal_battery_cluster" android:layout_width="wrap_content" android:layout_height="match_parent" android:paddingStart="2dp" android:orientation="horizontal" android:gravity="center" >
<include layout="@layout/signal_cluster_view" android:id="@+id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<com.android.systemui.BatteryMeterView android:id="@+id/battery" android:layout_height="16dp" android:layout_width="10.5dp" android:layout_marginBottom="0.33dp" android:layout_marginStart="4dip" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout android:id="@+id/ticker" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingStart="6dip" android:animationCache="false" android:orientation="horizontal" >
<ImageSwitcher android:id="@+id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginEnd="4dip" >
<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:layout_width="0dip" android:layout_weight="1" android:layout_height="wrap_content" android:paddingTop="2dip" android:paddingEnd="10dip">
<TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" />
</com.android.systemui.statusbar.phone.TickerView>
</LinearLayout>
</com.android.systemui.statusbar.phone.PhoneStatusBarView>

I've highlighted three of those four changes in red. The fourth you can't see as I just deleted the android:paddingStart="6dip" attribute from the clock line, to keep the clock centered.

The View line pushes the contents of the @id/system_icon_area Layout to the far right of the screen. The contents of the other Layout are already on the far left of the screen. So what's between should be in the center..

(thanks to [MENTION=2855249]bobfrantic[/MENTION] for the picture)​

So that's KitKat, but what about Android 5.0? What about Lollipop?

Well, this is the stock Lollipop status_bar.xml:

<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:id="@id/status_bar" android:background="@drawable/system_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">
<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" />
<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="8.0dip">
<com.android.systemui.statusbar.AlphaOptimizedFrameLayout android:orientation="horizontal" android:id="@id/notification_icon_area" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
<com.android.keyguard.AlphaOptimizedLinearLayout android:id="@id/notification_icon_area_inner" android:layout_width="fill_parent" android:layout_height="fill_parent">
<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.IconMerger android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/notificationIcons" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentStart="true" />
</com.android.keyguard.AlphaOptimizedLinearLayout>
</com.android.systemui.statusbar.AlphaOptimizedFrameLayout>
<com.android.keyguard.AlphaOptimizedLinearLayout android:orientation="horizontal" android:id="@id/system_icon_area" android:layout_width="wrap_content" android:layout_height="fill_parent">
<include layout="@layout/system_icons" />
<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="7.0dip" />
</com.android.keyguard.AlphaOptimizedLinearLayout>
</LinearLayout>
<ViewStub android:id="@id/ticker_stub" android:layout="@layout/status_bar_ticker" android:inflatedId="@id/ticker" android:layout_width="fill_parent" android:layout_height="fill_parent" />
</com.android.systemui.statusbar.phone.PhoneStatusBarView>

Look closely and you'll notice that the @id/status_bar_contents Layout is still just divided into two areas: @id/notification_icon_area and @id/system_icon_area.

Adding the Best Method to that shouldn't be a problem at all...

<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:id="@id/status_bar" android:background="@drawable/system_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">
<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" />
<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="8.0dip">
<com.android.systemui.statusbar.AlphaOptimizedFrameLayout android:orientation="horizontal" android:id="@id/notification_icon_area" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
<com.android.keyguard.AlphaOptimizedLinearLayout android:id="@id/notification_icon_area_inner" android:layout_width="fill_parent" android:layout_height="fill_parent">
<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.IconMerger android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/notificationIcons" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentStart="true" />
</com.android.keyguard.AlphaOptimizedLinearLayout>
</com.android.systemui.statusbar.AlphaOptimizedFrameLayout>
<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" />
<com.android.keyguard.AlphaOptimizedLinearLayout android:orientation="horizontal" android:id="@id/system_icon_area" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0" >
<View android:visibility="invisible" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0" />
<include layout="@layout/system_icons" />
</com.android.keyguard.AlphaOptimizedLinearLayout>
</LinearLayout>
<ViewStub android:id="@id/ticker_stub" android:layout="@layout/status_bar_ticker" android:inflatedId="@id/ticker" android:layout_width="fill_parent" android:layout_height="fill_parent" />
</com.android.systemui.statusbar.phone.PhoneStatusBarView>

Now, we're nearly there but there's still work to be done.

In Lollipop, the clock on the status bar isn't shown when the device is locked. There's not much need for it when you have a bigger clock on the lockscreen anyway. But, when we move the clock to get it centered, the clock doesn't disappear. It's always visible.

To make the clock vanish when the device is locked, you'll need to do a smali mod. Have a look at this post by [MENTION=4413273]S0bes[/MENTION] to see what to do: http://xdaforums.com/showpost.php?p=58460343&postcount=172

*** Using The Best Method On Xperia KitKat ***​

For their KitKat ROM's, Sony have done something a bit different with their XML. There's not enough space here for me to say what to do about it, so have a look at my post here instead: http://xdaforums.com/showpost.php?p=59569708&postcount=297

*** Anything Else, Ticklefish? ***​

Nope, that's it. This is the longest post in this thread so far. And probably the hardest to follow.

So I'll let you take a break now so you can try some XML modding for yourself.

I'll be updating this thread in time with other fun mods to try. But, for now, have some fun and see what you can come up with.

If you have any questions, or need any help, feel free to ask. I'm always happy to help and I'm hoping that some of the people I've helped over the years will be prepared to help out as well.

One final thing...ALWAYS MAKE A BACKUP!!!