FORUMS
Remove All Ads from XDA

[HOW TO] Centre clock and icon switch. Update: bottom power control widget!

2,820 posts
Thanks Meter: 691
 
Post Reply Email Thread
About

A while ago Taine0 posted this thread. He's since vanished from XDA, and I have, at the request of several users, posted this here so that we have an active member in control of the first post. My goal is to write an in-depth guide into how to perform this modification, as well as a few other tidbits that could be of use. I also intend to maintain a list of links to other good guides, as written by other people. That is in the second post. I may well add a few, shorter, guides to some other popular tweaks to the third post if people want

Credits
Taine0 made this first, to the best of my knowledge. I can't stress enough how this thread is just to give coherent support.
ZduneX25: worked out how to stop new notifications from overlapping the clock, as well as re-order the status icons
Randomchars: worked out how to stop new notifications from overlapping the clock, as well as re-order the status icons

If there are others who I've forgotten about, please tell me! It's been a long time since I saw those posts

Contents
Post one:
-> Set up
-> Centring the clock
-> Switching the notification icons with the status icons

Post 2:
-> Other people's guides

Post 3:
-> Power control widget at the bottom of the notification shade (we need a short name for that mod )
-> Re-ordering the status icons
-> Removing power menu blur

A word of warning
If any of you quote this entire post, EVER, I will not help you. At all. I'll even go so far as to try and get a moderator to edit your post. This is a HUGE post, the last thing we need is multiple copies of this post littered throughout the thread. Quote only the bit you're struggling with.

The guide

This guide is written to be as cross compatible as possible. It's worth noting that my operating system of choice is Ubuntu, so thinks like apkmanager don't work too well for me.

Tools used
  • APKTool
  • A text editor. In my case it's gedit. On windows I suggest you use Notepad++. Mac users: the default text editor should work fine, but I've not tested it. I rarely, if ever, use macs.
  • An archiving tool. On Ubuntu the built in archive manager works perfectly. For windows users I'd suggest you get 7Zip, but winrar works too.
  • ADB. To set it up on Linux see here. If you're using windows see the next section for a quick guide. Mac users: for reasons mentioned above, you're on your own here. Sorry

ADB on windows
Download and extract this to a known location, such as C:\ADB. Now you need to add that to your PATH. See here for info on that. I believe you can also download the Android SDK and it has an automated installer for Windows now, but I'm not 100% sure on that.

Preparation

Set up ADB and APKTool. A guide for setting up APKTool can be found here

Now that you have ADB set up you can plug your phone into your computer, ensuring that you have "USB debugging enabled" (Settings --> Applications --> Development --> USB Debugging on 2.3 || Settings --> Developer options -->USB Debugging on 4.0)

Open up a terminal (CMD on Windows) by doing the following:
  • Linux: CTRL+ALT+T
  • Windows: Windows key+R, then type "CMD" (without quotes) and hit ENTER
  • Mac: No idea. If someone tells me I'll put it here

Now enter the following command to verify that your device is detected:

Code:
adb devices
The output should be something like this:

Code:
sam@Coruscant:~$ adb devices
List of devices attached 
3735698AA76400EC    device
Yes, my name is Sam. Yes I named my PC Coruscant. Deal with it

Now, change directory to a useful working directory. For example:

Code:
cd ~/Android/Legend/StatusBarMod/Working/
On Windows you can just navigate to your chosen directory in Windows Explorer (the file manager) then hold SHIFT while right clicking, and choose "Open CMD here" (or something like that, I forget. Please confirm)

Next you need to pull SystemUI.apk and framework-res.apk from the device:

Code:
adb pull /system/app/SystemUI.apk
adb pull /system/framework/framework-res.apk
Output looks like this:

Code:
sam@Coruscant:~/Android/Legend/StatusBarMod/Working$ adb pull /system/app/SystemUI.apk
3592 KB/s (1423910 bytes in 0.387s)
sam@Coruscant:~/Android/Legend/StatusBarMod/Working$ adb pull /system/framework/framework-res.apk
4649 KB/s (9245621 bytes in 1.941s)
Now you need to set up APKTool to use your framework-res.apk:

Code:
apktool if framework-res.apk
Output:

Code:
sam@Coruscant:~/Android/Legend/StatusBarMod/Working$ apktool if framework-res.apk
I: Framework installed to: /home/sam/apktool/framework/1.apk
Now you need to decompile SystemUI.apk:

Code:
apktool d SystemUI.apk
Output:

Code:
sam@Coruscant:~/Android/Legend/StatusBarMod/Working$ apktool d SystemUI.apk 
I: Baksmaling...
I: Loading resource table...
I: Loaded.
I: Loading resource table from file: /home/sam/apktool/framework/1.apk
I: Loaded.
I: Decoding file-resources...
I: Decoding values*/* XMLs...
I: Done.
I: Copying assets and libs...
It might also be an idea to decompile framework-res.apk if you want to change the order of the status icons (signal, wifi etc.):

Code:
apktool d framework-res.apk
Output:

Code:
sam@Coruscant:~/Android/Legend/StatusBarMod/Working$ apktool d framework-res.apk 
I: Loading resource table...
I: Loaded.
I: Decoding file-resources...
I: Decoding values*/* XMLs...
I: Done.
I: Copying assets and libs...
Open a file manager and navigate to you working directory. You'll see something like this:



Navigate to SystemUI/res/layout

If your ROM is CM, or CM based, you'll see this:



If your ROM is different, don't worry. The only file we're using here is status_bar.xml.

Open status_bar.xml in your text editor (gedit for me, notepad++ for most of you) and try to get familiar with the XML layout. I can't go into all the ins and outs here, but "<" starts a line, and ">" finishes a line. Regardless of whether your text editor wraps the text, that's how it works. A line is NOT finished until you see this: ">". If possible, set your text editor up to NOT wrap text around. You'll end up scrolling left and right a lot, but it's much easier to track what you're doing this way.

Centring the clock

Open a new tab in your text editor (yes, you can do that) and paste this into it:

Code:
<LinearLayout android:gravity="center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">


</LinearLayout>
That's the section that puts the clock in the centre of the status bar, but it currently doesn't hold the clock element in it. Go back to your status_bar.xml and look for a line that starts like this:

Code:
<com.android.systemui.statusbar.Clock
Remember, that clock line doesn't finish until you find the closing ">". Copy that entire line, then delete it (or just cut it, if you're feeling swish), then go back to your new tab and paste it into the middle of the code snippet above. It should look something like this:

Code:
<LinearLayout android:gravity="center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">

<com.android.systemui.statusbar.Clock android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="center" android:paddingRight="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />

</LinearLayout>
See the bit that's highlighted in red? It's highlighted because I've changed "right" to "center". You need to do that too. Copy that whole block of code and paste it just below the line that ends like this:

Code:
xmlns:android="http://schemas.android.com/apk/res/android">
So that you end up with something like this:

Code:
<com.android.systemui.statusbar.CmStatusBarView android:background="@drawable/statusbar_background" android:focusable="true" android:descendantFocusability="afterDescendants" android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout android:gravity="center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">
           <com.android.systemui.statusbar.Clock android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="center" android:paddingRight="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
    </LinearLayout>
Now we need to fix a few things, like centring the date (to make it look nice) and making it so the date and new notifications don't overlap the clock.

To centre the date:

Find the line that starts like this:

Code:
<com.android.systemui.statusbar.DateView
and scroll across that line until you see this:

Code:
android:gravity="left|center"
Change that bit to this:

Code:
android:gravity="center"
Then scroll across a little more and change this:

Code:
android:layout_width="wrap_content"
to this:

Code:
android:layout_width="fill_parent"
.

That's the date centred!

To fix the notification overlap you need to add a little to this line:

Code:
<LinearLayout android:orientation="horizontal" android:id="@id/ticker"
Scroll right to the end of that line and add this

Code:
android:background="@drawable/statusbar_background"
The whole line will look something like this:

Code:
<LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:paddingLeft="6.0dip" android:animationCache="false" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/statusbar_background">
Clock centred, no overlap!

Switching the icons around with the notification icons (optional)
It's worth noting that there will be a gap to the right of the notification icons. There's very little we can do that I'm afraid.

First you need to find the line that starts like this:

Code:
<LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons"
and move it to just above this:

Code:
<com.android.systemui.statusbar.IconMerger
Now scroll to the end of the line that starts like this

Code:
<LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons"
and change this:

Code:
android:layout_alignParentRight="true"
to this

Code:
android:layout_alignParentLeft="true"
Then on the line that starts like this:

Code:
<com.android.systemui.statusbar.IconMerger
change this

Code:
android:layout_alignParentLeft="true"
to this

Code:
android:layout_alignParentRight="true"
Now you can save and exit, because we're done there.

Recompiling SystemUI.apk

Go back to your terminal/cmd and enter the following command:

Code:
apktool b SystemUI
Output:

Code:
sam@Coruscant:~/Android/Legend/StatusBarMod/Working$ apktool b SystemUI
I: Checking whether sources has changed...
I: Smaling...
I: Checking whether resources has changed...
I: Building resources...
I: Building apk file...
Now go back to your file manager and go up a few levels, until you end up back in your working directory. Open, but don't extract, SystemUI.apk and navigate to res/layout. Put the window to one side and go back to your file manager, then navigate to SystemUI/build/apk/res/layout. You'll see those same XML files, only this time they're binary XML, because they've been compiled.



Simply drag status_bar.xml from the file manager to the archive manager, and it will be copied across. No need to sign or anything.

Go back to CMD, and issue the following command to get rw access on /system:

Code:
adb remount
Output:

Code:
sam@Coruscant:~/Android/Legend/StatusBarMod/Working$ adb remount
remount succeeded
Then issue the following command to push your modified SystemUI.apk to your device:

Code:
adb push SystemUI.apk /system/app/SystemUI.apk
Output:

Code:
sam@Coruscant:~/Android/Legend/StatusBarMod/Working$ adb push SystemUI.apk /system/app/SystemUI.apk
3943 KB/s (1423910 bytes in 0.352s)
Then reboot and enjoy:

Code:
adb reboot
Video



I'll make one that mirrors this guide more accurately over the coming weeks


Further reading

To be completed
The Following 98 Users Say Thank You to TheGrammarFreak For This Useful Post: [ View ] Gift TheGrammarFreak Ad-Free
 
 
25th November 2011, 12:37 AM |#2  
TheGrammarFreak's Avatar
OP Senior Member
Thanks Meter: 691
 
More
Other guides
The Following 24 Users Say Thank You to TheGrammarFreak For This Useful Post: [ View ] Gift TheGrammarFreak Ad-Free
25th November 2011, 12:38 AM |#3  
TheGrammarFreak's Avatar
OP Senior Member
Thanks Meter: 691
 
More
Other tweaks
Things to write here (in no particular order)
  • Re-organise status icons in notification bar
  • Remove blur behind power menu
  • Enable tablet tweaks
  • Re-organise lockscreen

Power control widget at bottom
The way Taine0 did it is really messy, so I came up with a new way to move the power control widget. Instead of trying to force it to the bottom of the notification shade (this is done by editing status_bar_expanded.xml) realised I could attach it to the grab handle at the bottom, by editing status_bar_tracking.xml:

To apply the mod yourself decompile SystemUI the usual way, then paste this line:

Code:
<com.android.systemui.statusbar.powerwidget.PowerWidget android:id="@id/exp_power_stat" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/title_bar_portrait" />
To just above this line:

Code:
<ImageView android:layout_gravity="bottom" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/status_bar_close_on" android:scaleType="fitXY" />
Now recompile and do the usual trick to avoid signing (copy the compile status_bar_tracking/xml into your old SystemUI.apk).

No further edits are required

Re-organising the status icons
So, these icons are things like signal strength, data connection type etc... If you have your status icons on the left you might find the order they're in mildly irritating. Fear not, my padwans! This section will enlighten you with regard to putting them in the order that you desire.

First things first, decompile framework-res if you haven't already:

Code:
apktool d framework-res.apk
Output:

Code:
sam@Coruscant:~/Android/SGSII/Tweaks/StatusIconTut$ apktool d framework-res.apk I: Loading resource table...
I: Loaded.
I: Decoding file-resources...
I: Decoding values*/* XMLs...
I: Done.
I: Copying assets and libs...
Then navigate to res/values in the newly created framework-res folder and open up "arrays.xml"



Now you'll want to scroll down until you find the following line

Code:
<string-array name="config_statusBarIcons">
All the lines that appear underneath that are the status bar icons (unsurprisingly) The section ends with
Code:
</string-array>
The order the appear in that list is the order (from left to right) that they appear in the status bar. So to reverse the order of the icons you need to go from this:

Code:
        <item>ime</item>
        <item>sync_failing</item>
        <item>sync_active</item>
        <item>gps</item>
        <item>bluetooth</item>
        <item>nfc</item>
        <item>tty</item>
        <item>speakerphone</item>
        <item>mute</item>
        <item>volume</item>
        <item>headset</item>
        <item>wifi</item>
        <item>wimax</item>
        <item>cdma_eri</item>
        <item>data_connection</item>
        <item>phone_evdo_signal</item>
        <item>phone_signal</item>
        <item>battery</item>
        <item>alarm_clock</item>
        <item>secure</item>
        <item>clock</item>
To this:

Code:
        <item>clock</item>
        <item>secure</item>
        <item>alarm_clock</item>
        <item>battery</item>
        <item>phone_signal</item>
        <item>phone_evdo_signal</item>
        <item>data_connection</item>
        <item>cdma_eri</item>
        <item>wimax</item>
        <item>wifi</item>
        <item>headset</item>
        <item>volume</item>
        <item>mute</item>
        <item>speakerphone</item>
        <item>tty</item>
        <item>nfc</item>
        <item>bluetooth</item>
        <item>gps</item>
        <item>sync_active</item>
        <item>sync_failing</item>
        <item>ime</item>
Pretty simple, eh? I'll leave you to choose the best order for those. Once you've done that you need to save your work, then recompile framework-res:

Code:
apktool b framework-res
Output:

Code:
sam@Coruscant:~/Android/SGSII/Tweaks/StatusIconTut$ apktool b framework-res
W: Could not find sources
I: Checking whether resources has changed...
I: Building resources...
I: Building apk file...
Now, the usual trick to avoid signing the file again. Go back to the framework-res folder, navigate to build/apk. In there you'll see a file called "resources.arsc". Copy that into your original framework-res.apk (make a backup first!) then push it back using adb:


Notice that I have opened framework-res using my archiving tool, I've not extracted it

Code:
adb push framework-res.apk /system/framework/framework-res.apk
Reboot (and probably re-log into your Google account) and you're done. To avoid being singed out of all your accounts do all the pushing when your phone is in recovery.

Disable power menu blur

As we all know, Android has this nasty habit of putting a live blur behind the power menu, and rendering it with the CPU instead of the GPU. This leads to lags when opening that menu, as well as accessing the more advanced features put in by the CM team. So! To remove it we do the following:

Decompile framework-res.apk:

Code:
apktool d framework-res.apk
Output:

Code:
sam@Coruscant:~/Android/Legend/StatusBarMod/CM-28-11-11$ apktool d framework-res.apk 
I: Loading resource table...
I: Loaded.
I: Decoding file-resources...
I: Decoding values*/* XMLs...
I: Done.
I: Copying assets and libs...
Then navigate to res/values



Open up bools.xml and look (near the top) for this line:

Code:
<bool name="config_sf_slowBlur">false</bool>
You need to change the "false" to "true", like this:

Code:
<bool name="config_sf_slowBlur">true</bool>
Save and exit.

Go back to your command window, and recompile framework-res:

Code:
apktool b framework-res
Output:

Code:
sam@Coruscant:~/Android/Legend/StatusBarMod/CM-28-11-11$ apktool b framework-resW: Could not find sources
I: Checking whether resources has changed...
I: Building resources...
I: Building apk file...
Now, to avoid signing issues we do the same trick as before, only this time it's the file "resources.arsc" we're copying across (build/apk/). Copy it across to the root of the original framework-res.apk:



Use adb to push it back:

Code:
adb push framework-res.apk /system/framework/framework-res.apk
then reboot

Code:
adb reboot
Done!

Requests

Any other popular theming mods? LEt me know, and I'll see if I can write a guide for it
The Following 32 Users Say Thank You to TheGrammarFreak For This Useful Post: [ View ] Gift TheGrammarFreak Ad-Free
25th November 2011, 12:44 AM |#4  
KingRedHot's Avatar
Recognized Themer
Flag Baton Rouge
Thanks Meter: 808
 
Donate to Me
More
Cool! Man I've been trying to make some understanding out of this mod for a while now. Thanks for the in-depth explanation of what all the changes do
25th November 2011, 04:24 AM |#5  
suprano's Avatar
Senior Member
Thanks Meter: 2,636
 
More
this is really indepth mann,,thanks mucho now gotta go work this bad boy out.
25th November 2011, 12:19 PM |#6  
TheGrammarFreak's Avatar
OP Senior Member
Thanks Meter: 691
 
More
Just shout if you need more help
The Following 2 Users Say Thank You to TheGrammarFreak For This Useful Post: [ View ] Gift TheGrammarFreak Ad-Free
25th November 2011, 12:44 PM |#7  
spc_hicks09's Avatar
Recognized Contributor
Flag Marion, OH
Thanks Meter: 1,868
 
Donate to Me
More
Clicked "Thanks." Really appreciate the new write up man! Very nice job!

EDIT: I can't get my notifications to stop overlapping because whenever I try to add this line:

Code:
android:background="@drawable/statusbar_background"
I get an error when I compile. If I take that line out, it compiles fine. Any suggestions? Also, I've seen people have all the statusbar icons on the left except for battery. How do I get JUST my battery to the right hand side?
25th November 2011, 02:29 PM |#8  
VegasEvo4G's Avatar
Senior Member
Las Vegas
Thanks Meter: 91
 
More
GrammarFreak-

Thank you so much for putting this guide together!! I have been reaching out to multiple people trying to get a few basic questions regarding theming answered. Though I can already do most of this with the rom I'm running, your guide answered several of my general questions that I can now apply to other mods I want to make.

Just to clarify though- system apps such as framework-res, mms, contacts, etc DO NOT need to be signed and therefore can me modified (replace pngs/edit xml's) without decompiling and then pushed or copied straight back into the rom, correct??? (When I say 'without decompiling', I know they have to be decompiled to make the edits. I'm talking about how you copied the modded xml back into the compiled apk overwriting the old...) I assume this works the same for png's and .9 png's.

Thanks again!! (Thanks button hit a few times!!)
25th November 2011, 06:25 PM |#9  
TheGrammarFreak's Avatar
OP Senior Member
Thanks Meter: 691
 
More
Quote:
Originally Posted by VegasEvo4G

GrammarFreak-

Thank you so much for putting this guide together!! I have been reaching out to multiple people trying to get a few basic questions regarding theming answered. Though I can already do most of this with the rom I'm running, your guide answered several of my general questions that I can now apply to other mods I want to make.

Just to clarify though- system apps such as framework-res, mms, contacts, etc DO NOT need to be signed and therefore can me modified (replace pngs/edit xml's) without decompiling and then pushed or copied straight back into the rom, correct??? (When I say 'without decompiling', I know they have to be decompiled to make the edits. I'm talking about how you copied the modded xml back into the compiled apk overwriting the old...) I assume this works the same for png's and .9 png's.

Thanks again!! (Thanks button hit a few times!!)

As far as I'm aware, that should work. I can't test myself right now though.

Sent from my Legend using xda premium
The Following User Says Thank You to TheGrammarFreak For This Useful Post: [ View ] Gift TheGrammarFreak Ad-Free
25th November 2011, 07:42 PM |#10  
lippol94's Avatar
Retired Recognized Developer
Flag Cremona
Thanks Meter: 2,659
 
Donate to Me
More
Dude I'm not running CM but congratulations!

Really an amazing guide.

Hope n00bs won't flood this thread with *****y questions

Bravo!

Greetings
lippol94
25th November 2011, 07:54 PM |#11  
TheGrammarFreak's Avatar
OP Senior Member
Thanks Meter: 691
 
More
Quote:
Originally Posted by lippol94

Dude I'm not running CM but congratulations!

Really an amazing guide.

Hope n00bs won't flood this thread with *****y questions

Bravo!

Greetings
lippol94

Lol. The guide and techniques I go through should work for any 2.3 rom. In my limited testing it would appear that apktool doesn't work with ICS files. Confirmation would be appreciated.

Sent from my Legend using xda premium
Post Reply Subscribe to Thread

Tags
statusbar

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes