[GUIDE][4.4.x][4.2.x]Theming Android SystemUI

This is a simple guide to understand how to theme systemui.apk on 4.4.x OR 4.2.x, this guide will work for any rom having aosp like user interface. Before you start reading this, you have to set up apktool correctly. Just to check if your apktool is correctly installed, you can decompile my DarkL rom's systemui.apk and then recompile it without making any changes, if it compiles successfully then you are ready to try this tutorial.

Also, you need notepad++ to edit xml or smali line by line and you need gimp to edit transparent pngs.

Now we will learn easy things first then move to more advanced things, so lets start with statusbar icons first, I'll add more things in this tutorial in coming days, Sorry, I'm lazy to type :o

1.Changing statusbar icons (Signal, wifi, alarm, vibration or silent icons etc.)-

First decompile your systemui and go to "/systemui/res/" folder.

Changing the statusbar icons is easiest, these are pngs located in /res/drawable-hdpi/ OR /res/drawable-xhdpi/ depending on your device resolution, if it's 480*800 then your device is hdpi else if your resolution is 1280*720 then your device is xhdpi. You need to make changes in the correct folder.

Now open your folder /res/drawable-hdpi/ OR /res/drawable-xhdpi/ and look for pngs starting with name "stat_sys_.....png"

For wifi icon, we have "stat_sys_wifi_signal_1_fully.png" , "stat_sys_wifi_signal_2_fully.png" and so on, till "stat_sys_wifi_signal_4_fully.png".
For signal icons, we have "stat_sys_gemini_signal_1_orange.png" , 2_orange , 3_orange and so on, If your device is dual sim, you have multi colored signals, orange, purple, green, blue, look for the appropriate png and edit/replace it.
Attachment 3208547
Similarly, all the icons appearing in your statusbar are present here, all start with "stat_sys_.....png" you can edit these pngs or replace them from an existing theme or rom.

Warning - Ask permissions from the developer of that rom/theme !!
Just to learn things, you can use my DarkL rom's systemui.apk and take pngs from it :)

2.Changing notification drawer background-

The semi transparent background of your notification drawer is a png located in /res/drawable-hdpi/ or /res/drawable-xhdpi/ according to your device resolution. You need to make changes in the correct folder for your device.

Now find "notification_panel_bg.9.png" in your folder, this is the notification background, I recommend you to rename it to "notification_panel_bg.png" because .9 pngs have a border and are tricky to edit.

Now right click on this png and edit it with gimp, erase it and fill any color you want to.
Attachment 3208550

3.Customizing quicksettings tiles (icons, background and gaps)-

Firstly, to change quicksettings icons like wifi, data, rotation, bluetooth etc. Go to correct folder according to your device /res/drawable-xhdpi/ OR /res/drawable-hdpi/ now you need to replace/edit the pngs starting with "ic_qs_....png" , all of them are for quicksettings.

Attachment 3208555

Similarly, all the icons appearing in your statusbar are present here, all start with "ic_qs_.....png" you can edit these pngs or replace them from an existing theme or rom.

Warning - Ask permissions from the developer of that rom/theme !!

Just to learn things, you can use my DarkL rom's systemui.apk and take pngs from it :)

Now, to change background of tiles, you have to edit "/res/drawable/qs_tile_background.xml", you need to know the hex codes of your desired color to edit them, use this website to convert RGB to hex or reverse.

Now open "/res/drawable/qs_tile_background.xml" and look for the two hex codes, first one is for pressed tile, second one is for normal tile. Erase the last 6 characters here and Put your own 6 character hex code of any color.

Attachment 3208558

Now to edit dimensions in systemui like gaps between quicksettings tiles and size of recent apps, open "/res/values/dimens.xml"

This file contains the size of various things, you can play with the values and maybe discover something awesome, below are few things you can try, just alter the blue colored value.

These two lines are for changing the size of recent apps-

Code:

    <dimen name="status_bar_recents_thumbnail_width">164.0dip</dimen> 

    <dimen name="status_bar_recents_thumbnail_height">145.0dip</dimen>

This line for changing gap between two notifications-

Code:

<dimen name="notification_divider_height">3.0dip</dimen>

(To remove gap, put 0.0dip)

This line for changing gap between quicksettings tiles-

Code:

<dimen name="quick_settings_cell_gap">3.0dip</dimen>

Similarly, you can try changing anything here to resize various things in your notifications and quicksettings, It's time consuming but interesting.

4.Changing layout of clock in notification header-

Usually, the notification header of stock rom's systemui has clock in this format-

Attachment 3208560

I feel that It's a bit too long, So I'll tell a method to make it double line-

Attachment 3208574

To do this, firstly you need to increase the height of notification header, go to "res/values/dimens.xml" and find this line-

Code:

<dimen name="notification_panel_header_height">40.0dip</dimen>

Change the value here to 56dpi

Now, to make the clock double line, open "/res/layout/status_bar_expanded_header.xml" and find this code-

Code:

 <LinearLayout android:enabled="false" android:gravity="center_vertical" android:orientation="vertical" android:id="@id/datetime" android:paddingLeft="3.0dip" android:paddingRight="0.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent">

        <com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Clock" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="2.0dip" android:singleLine="true" />

        <com.android.systemui.statusbar.policy.DateView android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Date" android:id="@id/date" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="2.0dip" android:singleLine="true" />

 </LinearLayout>

See the tags LinearLayout, Just change it to RelativeLayout both above and below.

Code:

 <RelativeLayout android:enabled="false" android:gravity="center_vertical" android:orientation="vertical" android:id="@id/datetime" android:paddingLeft="3.0dip" android:paddingRight="0.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent">

        <com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Clock" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="2.0dip" android:singleLine="true" />

        <com.android.systemui.statusbar.policy.DateView android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Date" android:id="@id/date" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="2.0dip" android:singleLine="true" />

 </RelativeLayout>

Thank you for reading, more things I'll add later, too tired to type more.

Attached Thumbnails