[Sony Cross-Device General] anagramgenius:
Inspired by AndroPlus's True Quick Settings, in this thread, I'll show you how to mod your KitKat SystemUI to get JellyBean style Quick Settings.

Files you need to edit

res/layout/somc_quick_settings_tab.xml
res/layout/somc_notifications_tab.xml
res/layout/somc_tabs_status_bar_expanded.xml
res/layout/status_bar_notification_tools_button.xml
res/values/dimens.xml
res/values/integers.xml

Requirements:

- ApkTool (I use this)

- Notepad++

- Patience

1. Decompile your SystemUI.apk

2. We must move the quick settings tab to notifications tab. So, go to somc_quick_settings_tab.xml and copy the Linear layout

<LinearLayout android:orientation="vertical" android:id="@id/tools_rows" android:layout_width="fill_parent" android:layout_height="wrap_content" />

3. Next edit the somc_notifications_tab.xml and add the above code and now it looks something like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" android:id="@id/notifications_tab" android:layout_width="fill_parent" android:layout_height="wrap_content" android:animateLayoutChanges="false"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
[COLOR="Red"]<LinearLayout android:orientation="vertical" android:id="@id/tools_rows" android:layout_width="fill_parent" android:layout_height="wrap_content" />[/COLOR]

4. To add the divider line which divides the quick settings and the time, copy this and paste it in somc_notifications_tab.xml below the Linear layout we copied earlier

<View android:background="@drawable/status_bar_hr" android:layout_width="fill_parent" android:layout_height="@dimen/notification_panel_header_divider_height" />

It looks like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" android:id="@id/notifications_tab" android:layout_width="fill_parent" android:layout_height="wrap_content" android:animateLayoutChanges="false"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
<LinearLayout android:orientation="vertical" android:id="@id/tools_rows" android:layout_width="fill_parent" android:layout_height="wrap_content" />
[COLOR="Red"]<View android:background="@drawable/status_bar_hr" android:layout_width="fill_parent" android:layout_height="@dimen/notification_panel_header_divider_height" />[/COLOR]

5. Now to move the clock below the quick settings, go to somc_tabs_status_bar_expanded.xml and cut this line

<include layout="@layout/status_bar_expanded_header" />

Paste it to somc_notifications_tab.xml below the divider line code. Like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" android:id="@id/notifications_tab" android:layout_width="fill_parent" android:layout_height="wrap_content" android:animateLayoutChanges="false"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
<LinearLayout android:orientation="vertical" android:id="@id/tools_rows" android:layout_width="fill_parent" android:layout_height="wrap_content" />
<View android:background="@drawable/status_bar_hr" android:layout_width="fill_parent" android:layout_height="@dimen/notification_panel_header_divider_height" />
[COLOR="Red"]<include layout="@layout/status_bar_expanded_header" />[/COLOR]
<include layout="@layout/status_bar_expanded_stylus_actions" />
<ScrollView android:id="@id/scroll" android:fadingEdge="none" android:layout_width="fill_parent" android:layout_height="wrap_content" android:overScrollMode="ifContentScrolls">
<com.android.systemui.statusbar.policy.NotificationRowLayout android:id="@id/latestItems" android:layout_width="fill_parent" android:layout_height="wrap_content" systemui:rowHeight="@dimen/notification_row_min_height" />
</ScrollView>
</LinearLayout>

6. Make another copy of somc_notifications_tab.xml and rename it to somc_quick_settings_tab.xml and replace it with the original somc_quick_settings_tab.xml. So that both these files are the same.

7. To remove the top tabs [Notifications Quick settings], edit somc_tabs_status_bar_expanded.xml. Change this

<com.sonymobile.systemui.statusbar.tools.ToolsTabWidget android:orientation="horizontal" android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" />

to

<com.sonymobile.systemui.statusbar.tools.ToolsTabWidget android:orientation="horizontal" android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="[COLOR="Red"]0.0dip[/COLOR]" />

Also delete this line from somc_tabs_status_bar_expanded.xml

<include layout="@layout/somc_quick_settings_tab" />

8. To remove top space above quick settings icons, change these lines in status_bar_notification_tools_button.xml.

From

<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">

to

<FrameLayout [COLOR="Red"]android:layout_marginTop="@dimen/qs_tile_margin_above_icon"[/COLOR] android:layout_width="wrap_content" android:layout_height="wrap_content">

For single line text, change this

<TextView android:textSize="@dimen/status_bar_tools_button_label_text_size" android:gravity="top|center" android:id="@id/tools_button_text" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginBottom="@dimen/status_bar_tools_button_margin_bottom" android:lines="2" android:scrollHorizontally="false" android:includeFontPadding="false" />

to

<TextView [COLOR="Red"]android:layout_marginBottom="@dimen/qs_tile_margin_below_icon"[/COLOR] android:textSize="@dimen/status_bar_tools_button_label_text_size" android:gravity="top|center" android:id="@id/tools_button_text" android:layout_width="fill_parent" android:layout_height="fill_parent" android:lines="[COLOR="Red"]1[/COLOR]" android:scrollHorizontally="false" android:includeFontPadding="[COLOR="Red"]true[/COLOR]" [COLOR="Red"]android:singleLine="true"[/COLOR]/>

9. Edit dimens.xml.

From

<dimen name="notification_panel_tools_row_height">100.0dip</dimen>
<dimen name="status_bar_tools_button_label_text_size">12.0dip</dimen>
<dimen name="qs_tile_margin_above_icon">27.0dip</dimen>
<dimen name="qs_tile_margin_below_icon">17.0dip</dimen>

to

<dimen name="notification_panel_tools_row_height">[COLOR="Red"]57.0dip[/COLOR]</dimen>
<dimen name="status_bar_tools_button_label_text_size">[COLOR="Red"]10.0dip[/COLOR]</dimen>
<dimen name="qs_tile_margin_above_icon">[COLOR="Red"]-22.0dip[/COLOR]</dimen>
<dimen name="qs_tile_margin_below_icon">[COLOR="Red"]-12.0dip[/COLOR]</dimen>

10. Edit integers.xml

From

<integer name="config_maxToolItemsInARow">4</integer>
<integer name="config_maxToolItemsInGrid">16</integer>

to

<integer name="config_maxToolItemsInARow">[COLOR="Red"]5[/COLOR]</integer>
<integer name="config_maxToolItemsInGrid">[COLOR="Red"]15[/COLOR]</integer>

11. Recompile and Enjoy:p

About the top space above quick settings icons, niaboc79 said it was his code, hence I had removed that. Also it had some bugs (for me at least) that I could not edit the SystemUI again. Even if I did, it would force close. And I have changed it so that when you decompile SystemUI again, mod it, and recompile, it can be used without any force close.

So what's the difference between niaboc79's JB style SystemUI and my tutorial?

-With my tutorial, you can use "Clear" button if you swipe the statusbar with one finger, and you can use "Edit" button for editing quick settings if you swipe the statusbar with two fingers. And he uses other file (com.android.settings-res.apk) to achieve this JB style SystemUI.

And why this comparison?

-Because he asked me to close the thread saying I used his methods. So I deleted his method and changed it with my own.

This mod has been tested on Xperia Z and Xperia ZL KitKat firmwares. Should work on other Sony KitKat devices (I doubt if it works on Z3 and new Z2 firmware). Test and report.

Always take a backup of original files so that you can replace it when something goes wrong

Credits:

AndroPlus

anagramgenius(myself :p)