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

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:

The output should be something like this:

Yes, my name is Sam. Yes I named my PC Coruscant. Deal with it

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

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:

Output looks like this:

Now you need to set up APKTool to use your framework-res.apk:

Output:

Now you need to decompile SystemUI.apk:

Output:

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.):

Output:

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:

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:

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:

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:

So that you end up with something like this:

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:

and scroll across that line until you see this:

Change that bit to this:

Then scroll across a little more and change this:

to this:

.

That's the date centred!

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

Scroll right to the end of that line and add this

The whole line will look something like this:

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:

and move it to just above this:

Now scroll to the end of the line that starts like this

and change this:

to this

Then on the line that starts like this:

change this

to this

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:

Output:

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:

Output:

Then issue the following command to push your modified SystemUI.apk to your device:

Output:

Then reboot and enjoy:

Video


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


Further reading

To be completed

Other guides

• Nice short guide to centring the clock and making the status bar transparent by Fergie716: http://xdaforums.com/showpost.php?p=19470547&postcount=1061 || If you want to use my trick to avoid signing SystemUI after a smali edit you need to copy the new classes.dex file to SystemUI too.
• Fanstastic guide for all your theming needs: http://xdaforums.com/showpost.php?p=9978779&postcount=62

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:


To just above this line:


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:


Output:


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


All the lines that appear underneath that are the status bar icons (unsurprisingly) The section ends with

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:


To this:


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:


Output:


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


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:


Output:


Then navigate to res/values



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


You need to change the "false" to "true", like this:


Save and exit.

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


Output:


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:


then reboot


Done!

Requests

Any other popular theming mods? LEt me know, and I'll see if I can write a guide for it

Just shout if you need more help

VegasEvo4G said:

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!!)

Click to expand...

Click to collapse

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

Sent from my Legend using xda premium

lippol94 said:

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

Click to expand...

Click to collapse

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

spc_hicks09 said:

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?

Click to expand...

Click to collapse

I'd need to see the error and a copy of your XML to help there

Splitting the battery apart requires that you use CM. If you enable the battery percentage option in CMSetting the battery will go back over to the right hand side

creeve4 said:

Thanks for the great (and very detailed) guide!

I would definitely like a guide on how to Disable the system blur (behind power menu)

Click to expand...

Click to collapse

Cool, I'll have it done by next week ish. I'm currently 4 hours away from home visiting a friend

nobleskill said:

Epic write up mate.. cheers for your work on this and your execution and use of the English language is as eloquent as one has come to expect when noting you are the OP. Thank you.

Well done that man! B-)

Sent from my GT-P1000

Click to expand...

Click to collapse

Ha ha, cheers man. I did have to edit the post about 15 times to get rid of some of the stupid mistakes though