[TUT][JB] HOW TO THEME SystemUI.apk for TOTALLY newbie!

Search This thread

joehanh88

Inactive Recognized Themer
Jan 12, 2013
720
1,512
Kuala Lumpur
hello community :)

i would like to share something i know about how to theme for most SystemUI.apk.

What in this TUT??

PAGE #1 :
1. Theme Tools that needed.
2. STEPS for making theme.
3. HOW TO CHANGE COLOR FOR TEXT.
4. HOW TO MAKE 1% BATTERY INCREMENT.
5. HOW TO MAKE CENTER CLOCK.
6. HOW TO REARRANGE THE TOGGLE.
7. HOW TO REMOVE THE BRIGHTNESS BAR.
8. HOW TO CHANGE STATUS BAR BACKGROUND.
9. HOW TO MAKE THE BUTTON AND NOTIFICATION TRANSPARENT.
10. HOW TO MAKE TRANSPARENT BACKGROUND.

PAGE #2 :
11. HOW TO REMOVE THE TEXT AND TOGGLES STATUS.
12. HINT HOW TO EDIT IMAGE WITHOUT GETTING ERROR!
13. sample_toggles for all! :)
14. HOW TO CHANGE ANY PART WITH IMAGE.
15. How To Sign Your Apk After Modding!




1. Theme Tools that needed :
- Apktool (download the Jar and aapt) [only for Windows] thanks to iBotPeaches for the tool.

- Android Utility [only for MAC/LINUX] thanks to tommytomatoe for the tool.

- Better Draw9Patch. (for editing .9patch png) thanks to AndroidGraphix for the tool.

- good .xml reader (i'd prefer Notepad ++).
- good image editor (i'd prefer GIMP).
- for color to html, go to this site (colorgenerator or colorhunter which is my reference for color :)

i dont know about Linux or Mac, so this TUT is just for Windows. But im sure the steps is just the same.

STEPS after download the tool (Apktool):
- extract both downloaded zip file. (the Jar and aapt)
- you'll get 3 files ( aapt.exe, apktool.bat, and apktool.jar), place it together in one folder.
- go to Home Menu, search for "cmd", copy the cmd to the apktool folder.​


STEPS for installing:
1) pull your framework-res.apk (in system/framework)
2) pull SystemUI.apk (in system/app)
3) install them with the command

Code:
apktool if framework-res.apk
Code:
apktool if SystemUI.apk
this will install the framework and the systemui for the current ROM.​


2. STEPS for making theme :
1) decompile SystemUI.apk with the command.

Code:
apktool d SystemUI.apk

2) then go to SystemUI/res/drawable-hdpi/ (to edit the images)
be careful of the .9.png . Use the Better Draw9Patch tool for editing .9patch pngs.

these are the list of the png and where it will display :

for background :
* notification_panel_bg.9 ------------------------------------------------| (status bar bg)
* tw_quick_panel_list_bg_f/n/p ----------------------------------------| (toggle bg)
* tw_quick_panel_quick_setting_button_bg_normal.9 ---------| (toggle button background)
* tw_status_bar_call_ongoing_#####.9 ----------------------------| (status bar display when call)

for icons :
* all tw_quick_panel_icon_###.png ----------------------------------| (toggle button)
togglenotmove.png


* stat_sys_battery_# , stat_sys_battery_charge_anim## ------| (for battery display)
* tw_quickpanel_icon_#.png -------------------------------------------| (for status bar expended quicksetting)
* tw_quick_panel_plnm_setting_dv ----------------------------------| (for divider between the quicksetting and clock)
* tw_status_bar_close_on/off ------------------------------------------| ( for the status bar bottom drag)

for recent tumbnail :
* look for all recents_thumbnail_#.png ------------------------------| (for thumbnail bg)
* tw_btn_default_normal_holo_recent_button.9 ------------------| (for btn bg)
* tw_recent_panel_icon_######_holo_dark ----------------------| (for btn icon)

thats all for the important images (other images you'll know just with its look and where it belong :p)​


3. HOW TO CHANGE TEXT COLOR.

res/layout :
1. tw_status bar.xml

battery text color.
Code:
<TextView android:textSize="12.0dip" android:textColor="#something"

clock text color.
Code:
 <com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_clock_text_size" android:textColor="#something"
change the "something" with your preferred color.

2. tw_status_bar_expanded_header.xml

for pull down clock color.
clockdateheader.png


Code:
<com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Clock" android:textColor="#something"
for date color.
Code:
"@style/TextAppearance.StatusBar.Expanded.Date" android:textColor="#something"

res/values :
1. colors.xml
for pull down Notification label color.
Code:
<color name="notification_category_color">
for clear button label text color.
Code:
<color name="tw_status_bar_clear_btn_text">
notification.png
clearbutton.png


2. styles.xml
Code:
<style name="TextAppearance.StatusBar.Expanded.Clock" parent="@style/TextAppearance.StatusBar.Expanded">
        <item name="android:textSize">32.0dip</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">#ff33b5e5</item>
        <item name="android:fontFamily">sans-serif-light</item>
Code:
<style name="TextAppearance.StatusBar.Expanded.Date" parent="@style/TextAppearance.StatusBar.Expanded">
        <item name="android:textSize">12.0dip</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">#FF9CE4FE</item>
        <item name="android:textAllCaps">true</item>
Code:
<style name="TextAppearance.StatusBar.Expanded.Network" parent="@style/TextAppearance.StatusBar.Expanded">
        <item name="android:textSize">14.0dip</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">#ff33b5e5</item>
clockdateheader.png


you can change the text size, color, style (bold or normal) in that xml.​


4. HOW TO MAKE 1% BATTERY INCREMENT :
res/drawable/
- edit the stat_sys_battery.xml and stat_sys_battery_charge.xml to be like this :
Code:
<?xml version="1.0" encoding="utf-8"?>
<level-list
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/stat_sys_battery_0" android:maxLevel="0" />
    <item android:drawable="@drawable/stat_sys_battery_1" android:maxLevel="1" />
    <item android:drawable="@drawable/stat_sys_battery_2" android:maxLevel="2" />
    <item android:drawable="@drawable/stat_sys_battery_3" android:maxLevel="3" />
    <item android:drawable="@drawable/stat_sys_battery_4" android:maxLevel="4" />
    <item android:drawable="@drawable/stat_sys_battery_5" android:maxLevel="5" />
.
.
.
.
until :
Code:
.
.
.
.
.
<item android:drawable="@drawable/stat_sys_battery_95" android:maxLevel="95" />
    <item android:drawable="@drawable/stat_sys_battery_96" android:maxLevel="96" />
    <item android:drawable="@drawable/stat_sys_battery_97" android:maxLevel="97" />
    <item android:drawable="@drawable/stat_sys_battery_98" android:maxLevel="98" />
    <item android:drawable="@drawable/stat_sys_battery_99" android:maxLevel="99" />
    <item android:drawable="@drawable/stat_sys_battery_100" android:maxLevel="100" />
</level-list>

animated battery charge display :
Code:
<?xml version="1.0" encoding="utf-8"?>
<level-list
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:maxLevel="0">
        <animation-list android:oneshot="false"
          xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:duration="1500" android:drawable="@drawable/stat_sys_battery_0" />
            <item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim0" />
        </animation-list>
    </item>
    <item android:maxLevel="1">
        <animation-list android:oneshot="false"
          xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:duration="1500" android:drawable="@drawable/stat_sys_battery_1" />
            <item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim1" />
        </animation-list>
    </item>
    <item android:maxLevel="2">
        <animation-list android:oneshot="false"
          xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:duration="1500" android:drawable="@drawable/stat_sys_battery_2" />
            <item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim2" />
        </animation-list>
.
.
.
.
until :
Code:
.
.
.
.
<item android:maxLevel="100">
        <animation-list android:oneshot="false"
          xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:duration="1500" android:drawable="@drawable/stat_sys_battery_100" />
            <item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim100" />
        </animation-list>
    </item>
    <item android:maxLevel="101">
        <animation-list android:oneshot="false"
          xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:duration="1000" android:drawable="@drawable/stat_sys_battery_100" />
            <item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_animfull" />
        </animation-list>
    </item>
</level-list>
then put the battery icons in res/drawable-hdpi, recompile.​


5. HOW TO MAKE CENTER CLOCK?
greencenter.jpg


res/layout

tw_status_bar.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:id="@id/status_bar" android:background="@drawable/status_bar_background" android:focusable="true" android:fitsSystemWindows="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:paddingLeft="6.0dip" 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" />
    <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:orientation="horizontal" android:id="@id/left_icons" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
            <TextView android:textSize="15.0dip" android:gravity="center_vertical" android:id="@id/carrierLabel" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
            <ImageView android:id="@id/doNotDisturbIcon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tw_dnd" android:alpha="0.7" android:scaleX="0.85" android:scaleY="0.85" />
            <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_alignParentLeft="true" />
        </LinearLayout>
        <LinearLayout android:gravity="center" android:orientation="horizontal" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="fill_parent">
            <com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_clock_text_size" android:textColor="#ff99FF00" android:gravity="center" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
        </LinearLayout>
        <LinearLayout android:gravity="right|center" android:orientation="horizontal" android:id="@id/right_icons" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0" android:layout_alignParentRight="true">
            <LinearLayout android:gravity="right|center" android:orientation="horizontal" android:id="@id/statusIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" />
            <LinearLayout android:gravity="right|center" android:orientation="horizontal" android:id="@id/signal_battery_cluster" android:paddingLeft="0.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent">
                <include android:id="@id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" layout="@layout/tw_signal_cluster_view" />
                <TextView android:textSize="9.0dip" android:textColor="#ff99FF00" android:layout_gravity="center" android:id="@id/battery_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/status_bar_network_name_separator" />
                <ImageView android:gravity="center" android:id="@id/battery" android:layout_width="wrap_content" android:layout_height="wrap_content" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
    <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">
        <ImageSwitcher android:id="@id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginRight="4.0dip">
            <com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="centerInside" />
            <com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="centerInside" />
        </ImageSwitcher>
        <com.android.systemui.statusbar.phone.TickerView android:id="@id/tickerText" android:paddingTop="2.0dip" android:paddingRight="10.0dip" android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="1.0">
            <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:id="@id/ticker_text_view_old" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />
            <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:id="@id/ticker_text_view_new" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />
        </com.android.systemui.statusbar.phone.TickerView>
    </LinearLayout>
</com.android.systemui.statusbar.phone.PhoneStatusBarView>
edit the xml just like mine :p


6. HOW TO REARRANGE THE TOGGLE :
before:
togglenotmove.png


res/values
arrays.xml
Code:
<string-array name="QuickSettingButtonAttribute">
        <item>Wifi</item> 
<item><string-array name="QuickSettingButtonAttribute">
        <item>Wifi</item>   
	<item>Location</item>
        <item>SilentMode</item>
        <item>AutoRotate</item>
        <item>Bluetooth</item>
        <item>MobileData</item>
        <item>DormantMode</item>
        <item>PowerSaving</item>
        <item>AllShareCast</item>
        <item>MultiWindow</item>
	<item>Sync</item>
    </string-array>

just arrange what ever you want it to be with replace the arrangement of that xml.
eg. you want to make the GPS toggle to the other side :
HTML:
<string-array name="QuickSettingButtonAttribute">
        <item>Wifi</item>        
        <item>SilentMode</item>
        <item>AutoRotate</item>
        <item>Bluetooth</item>
        <item>MobileData</item>
        <item>DormantMode</item>
        <item>PowerSaving</item>
        <item>AllShareCast</item>
        <item>MultiWindow</item>
	<item>Location</item>
        <item>Sync</item>
    </string-array>
after :
togglemoved.png


thats it, then recompile! :D


7. HOW TO REMOVE THE BRIGHTNESS BAR :
brightnessbar.png


res/layouts
tw_status_bar_expanded.xml
find :
Code:
<LinearLayout android:orientation="vertical" android:id="@id/brightness_controller" android:background="#00000000" android:layout_width="fill_parent" android:layout_height="56.0dip">
replace the
Code:
android:layout_height="56.0dip"
with
Code:
android:layout_height="0.0dip"

recompile :D


8. HOW TO CHANGE STATUS BAR BACKGROUND :


res/drawable-hdpi
this is the easiest way.
replace the notification_panel_bg.9.png with any of your preferred image with resolution of 480x800.

but before that dont forget to make all toggle background to be transparent.
well, these are several ways that you can make it done :

1) this is the step that i always use to make change the background.
- decompile the apk.
- go to the res/drawable-hdpi folder.
- find the notification_panel_bg.9.png.
- open it with any of your preferred photo editor.
- resize the image to 482x802 (so that the other 2x2 pixel will leave for .9patch).
- open the image that you want to make as background (copy it)
- paste it into the notification_panel_bg.9.png that you have resized.
- draw the whole 2x2 with black line #000000.
- save the image.
- recompile.​

2) this steps is much easier, but i dont recommend. sometimes it failed. :p
- decompile the apk.
- recompile the apk.
- go to build/apk/res/drawable-hdpi.
- find the notification_panel_bg.9.png
- replace with your preferred image. (but dont forget to name the image with the same name include .9)
- build the apk again.
- your finished apk will be in dist folder.​

3) this is the safest way i guess :p but always success.
- decompile the apk.
- go to res/layout folder.
- find tw_status_bar_expanded.xml
- in that xml, find android:background="@drawable/notification_panel_bg".
- change that notification_panel_bg with any name. example android:background="@drawable/mybackground".
- save the xml.
- then, go to res/drawable-hdpi folder.
- place your image named "mybackground".
- compile the apk.​


9. HOW TO MAKE THE BUTTON AND NOTIFICATION TRANSPARENT :
res/layouts
tw_status_bar_expanded.xml
find :
all
Code:
android:background="#something"
in the xml the change the "#something" with "#00000000".

change ff value to (00 -> 100% transparency, 3f -> 75% transparency, 7f -> 50% transparency, bf -> 25% transparency)
The other value (1e1e1e) is RBG for grey color, if you want it black it will be (000000).
So:
#00000000 - black with 100% transparency
#3F000000 - black with 75% transparency
#7F000000 - black with 50% transparency
#BF000000 - black with 25% transparency

this post originally posted at http://forum.xda-developers.com/showthread.php?t=2078585 by majdinj (hit thanks to him :D)

then go to SystemUI\smali\com\android\systemui\statusbar\phone

PhoneStatusBar.smali
- find -0x100 (there will be just two of it in that smali)
- change both to 0x0 (0=zero)
- save smali.
(that will make the notification bar transparent).​


10. HOW TO MAKE TRANSPARENT BACKGROUND :


res/layout
tw_status_bar_expanded.xml
find :
Code:
android:id="@id/notification_panel" android:background="@drawable/notification_panel_bg"
change the "@drawable/notification_panel_bg" to "#00000000" or your preferred transparent range. Then, recompile :)
 
Last edited:

joehanh88

Inactive Recognized Themer
Jan 12, 2013
720
1,512
Kuala Lumpur


11. HOW TO REMOVE THE TEXT AND TOGGLES STATUS :

res/layout

tw_quick_setting_button.xml

find :

Code:
<ImageView android:layout_gravity="center" android:id="@id/btn_image" android:layout_width="fill_parent" android:layout_height="60.0dip" android:layout_marginTop="4.0dip" />

1. change the android:layout_height="60.0dip" to android:layout_height="90.0dip".
2. change the android:layout_marginTop="4.0dip" to android:layout_marginTop="0.0dip"

then in the same xml.
find :
Code:
<TextView android:textSize="@dimen/quick_setting_button_text_size"
at the same line, you'll see android:textColor="blablabla", change it to android:textColor="#00000000".
and android:layout_height="blabla.bladip" to android:layout_height="0.0dip"

also at the same xml.
find :
Code:
<ImageView android:layout_gravity="center" android:id="@id/btn_status_image"
.
change all the padding to be like mine :

HTML:
<ImageView android:layout_gravity="center" android:id="@id/btn_status_image" android:paddingLeft="0.0dip" android:paddingTop="0.0dip" android:paddingRight="0.0dip" android:paddingBottom="0.0dip" android:layout_width="fill_parent" android:layout_height="0.0dip" android:scaleType="fitXY" android:drawable="@drawable/tw_quick_panel_off" />

all this steps will make the size of the toggle bigger, remove the toggles text, and remove the toggles status.

then go to :

res/values
dimens.xml

find :
Code:
<dimen name="quick_setting_button_

there will be 7 lines of it in that xml.
change the line to be just like mine :
HTML:
<dimen name="quick_setting_button_height">90.0dip</dimen>
    <dimen name="quick_setting_button_image_height">90.0dip</dimen>
    <dimen name="quick_setting_button_text_height">0.0dip</dimen>
    <dimen name="quick_setting_button_text_size">0.0dip</dimen>
    <dimen name="quick_setting_button_status_height">0.0dip</dimen>
    <dimen name="quick_setting_button_status_padding">2.0dip</dimen>
    <dimen name="quick_setting_button_margin_top">0.0dip</dimen>

next steps :
- make your own toggle images with resolution of 80x100 or 90x110 or mine is 90x150. ( just any resolution that fit your toggle when displayed).
- it doesn't matter because you already fix the dimension of the toggle display. The point of creating new big toggles is not to make the display stretched or narrowed.

final steps:

res/layout
tw_status_bar_expanded.xml

find :

Code:
<com.android.systemui.statusbar.policy.quicksetting.QuickSettingPanel android:orientation="horizontal" android:id="@id/quicksetting_container" android:layout_width="wrap_content" android:layout_height="wrap_content"

- in that line you'll see android:divider="@bla/blablabla" change it to android:divider="#00000000".

(that will remove the divider between the toggles)

then in the same xml, find :
HTML:
<HorizontalScrollView android:id="@id/quicksetting_scroller" android:scrollbars="none" android:layout_width="wrap_content"

edit the android:layout_height= to android:layout_height="90.0dip".

finish, recompile! :)

this is how it will look like :
blablablaho.png




12. HINT HOW TO EDIT IMAGE WITHOUT GETTING ERROR! :

1) ONLY EDIT the .9patch images before recompile the apk!

HOW TO EDIT IT??
- use the Better Draw9Patch to edit .9patch.
- there are many TUT for that..but i will put it in this TUT later.
- ONLY EDIT THE .9patch images in res/ (which folder it belong) before recompile!


dot9image.png
dot9image2.png



2) EDIT NON-.9patch images after you recompile the "HOW TO EDIT IT" above.
- you can edit all of the NON-.9patch images FREELY in build/res/apk/ (which folder it belong).
- the folder you'll get after you recompile the apk.
- BUT DO NOT TOUCH ANY .9patch images in there!



13. sample toggles for ALL!! :

want other cool toggles???
click this link!!

sample_toggles_1 :

sampletoggle1.png

sample_toggles_2 :

sampletoggle2.png

sample_toggles_3 :

sampletoggle3.png

sample_toggles_4 :

sampletoggle4.png

sample_toggles_5 :

sampletoggle5.png


link updated : 12 MAY 2013

and here is the base for all my icons :
just put the icon inside that toggle base :)

all_base.png

download link :

base_sample_toggle_1
base_sample_toggle_2

want other cool toggles???
click this link!!

just download it and try to mod yourself with my toggles :)
the toggles is able to use if you use all my dimension that i have modded in the tut. (TUT #11)
dont forget to hit thanks if you using this toggles for your mod. give me credits is good enough. :D





14. HOW TO CHANGE ANY BACKGROUND WITH OWN IMAGE :
In this TUT#14, you can change any part with any image by using the .9patch. png.
its easy, you just need to change the color code in the xml for example android:background="#colorcode" to android:background="@drawable/your_image".
And then you need to create an .9.png image then put it into res/drawable-****.
the **** means what is your device dpi.
the size of the image is depend with the part that you want to change, it is your creativity.


before : after :

15. How To Sign Your Apk After Modding! (IMPORTANT)
- recompile the apk, then the apktool will create new folder named "build".
- open the build/apk/ , copy and replace the original META-INF folder and AndroidManifest.xml into it. (for signing)
- recompile again by using command :
Code:
apktool b SystemUI
- your modded file will be in "dist" folder.

P.S : ALWAYS REPLACE THE ORIGINAL META-INF FOLDER AND AndroidManifest.xml from the ORIGINAL APK into the MODDED APK AFTER BUILD! or else you got bootloop.


references :
- http://forum.xda-developers.com/showthread.php?t=2078585 by majdinj.
- http://forum.xda-developers.com/showthread.php?t=1714481 by emompong.
- http://forum.xda-developers.com/showpost.php?t=35294425&postcount=172 by devabhishek.
credits to :
- Koulis2000 because teach me a lot of things especially for the xml and .9patch, thanks dude!
- bobfrantic also share what he knows to me :), thanks a lot!

let me know if i forgot place your name as credit, im just normal human being :fingers-crossed: and sorry for that.
hit thanks to them, their post really help me a lot :cowboy:
there will be more TUT after this..maybe how to theme framework-res.apk ;)
there must be something more i left, but i will put it later when i remember what it is.

if you got something more to ask, dont be shy to PM me.. i'll be happy to help..
(only if im able to!)

IF YOU HAVE SOMETHING THAT YOU KNOW FOR HOW TO MODDING SYSTEMUI.APK, AND IT IS NOT INCLUDED IN THIS TUT, PLEASE SHARE IT HERE :)
SO THAT MAYBE THIS TUT WILL HELP MANY PEOPLE WITH MANY VERSION OF DEVICES, I WISH THIS THREAD WILL BECOME THE PERFECT PLACE FOR PEOPLE WHO WANT TO LEARN ABOUT HOW TO THEME SYSTEMUI.APK :)
 
Last edited:

joehanh88

Inactive Recognized Themer
Jan 12, 2013
720
1,512
Kuala Lumpur
Nice thread, can you also add how to hide text in the toggles in the status pull down? Also here is a great little program people can use for determining color codes like #cecece to change colors. windows only though :)

View attachment 1826979
i put the site i refer already :)
anyway, thanks..
will update the thing you said for next update..
 

joehanh88

Inactive Recognized Themer
Jan 12, 2013
720
1,512
Kuala Lumpur
can i use apk multi tool to do this as it gives all xml and icon files easily..??
is both same ??

thx for tutorial.

yes..just the same..but for apkmulti tool always set compression level to 0..(option 21).
and dont forget to replace the original META folder and AndroidManifest to the modded apk after recompile.. :)

Great tutorial, all well explained. Thanks :)

Sent from my GT-I9070
hope this thread help a lot of people :)
 
Last edited:

sandrin0

Senior Member
Jul 25, 2011
134
16
Re: [TUT][JB] HOW TO THEME SystemUI.apk for newbie!

Thanks, after my exams this week I'm definitely going to theme some!

Sent from my GT-I9070 using xda app-developers app
 

joehanh88

Inactive Recognized Themer
Jan 12, 2013
720
1,512
Kuala Lumpur
Thanks, after my exams this week I'm definitely going to theme some!

Sent from my GT-I9070 using xda app-developers app

goodluck :)

hey guys
why the 'command' to be like this when i recompile the SystemUI?
i just "MAKE 1% BATTERY INCREMENT" , can you tell me where is my mistake? thks before

that is not the problem..scroll up more, the exact problem will shown at the several lines after you hit the the build command..
my guess is you forgot to put the battery set completely in the hdpi folder..
 
  • Like
Reactions: 3LvEn

droid_bazzline02

New member
Nov 17, 2012
3
0
SOLO
goodluck :)



that is not the problem..scroll up more, the exact problem will shown at the several lines after you hit the the build command..
my guess is you forgot to put the battery set completely in the hdpi folder..


I've checked it again, then after i try to recompile the SystemUI again, the dist folder was not out.
why guys? :(
 

Top Liked Posts

  • There are no posts matching your filters.
  • 256
    hello community :)

    i would like to share something i know about how to theme for most SystemUI.apk.

    What in this TUT??

    PAGE #1 :
    1. Theme Tools that needed.
    2. STEPS for making theme.
    3. HOW TO CHANGE COLOR FOR TEXT.
    4. HOW TO MAKE 1% BATTERY INCREMENT.
    5. HOW TO MAKE CENTER CLOCK.
    6. HOW TO REARRANGE THE TOGGLE.
    7. HOW TO REMOVE THE BRIGHTNESS BAR.
    8. HOW TO CHANGE STATUS BAR BACKGROUND.
    9. HOW TO MAKE THE BUTTON AND NOTIFICATION TRANSPARENT.
    10. HOW TO MAKE TRANSPARENT BACKGROUND.

    PAGE #2 :
    11. HOW TO REMOVE THE TEXT AND TOGGLES STATUS.
    12. HINT HOW TO EDIT IMAGE WITHOUT GETTING ERROR!
    13. sample_toggles for all! :)
    14. HOW TO CHANGE ANY PART WITH IMAGE.
    15. How To Sign Your Apk After Modding!




    1. Theme Tools that needed :
    - Apktool (download the Jar and aapt) [only for Windows] thanks to iBotPeaches for the tool.

    - Android Utility [only for MAC/LINUX] thanks to tommytomatoe for the tool.

    - Better Draw9Patch. (for editing .9patch png) thanks to AndroidGraphix for the tool.

    - good .xml reader (i'd prefer Notepad ++).
    - good image editor (i'd prefer GIMP).
    - for color to html, go to this site (colorgenerator or colorhunter which is my reference for color :)

    i dont know about Linux or Mac, so this TUT is just for Windows. But im sure the steps is just the same.

    STEPS after download the tool (Apktool):
    - extract both downloaded zip file. (the Jar and aapt)
    - you'll get 3 files ( aapt.exe, apktool.bat, and apktool.jar), place it together in one folder.
    - go to Home Menu, search for "cmd", copy the cmd to the apktool folder.​


    STEPS for installing:
    1) pull your framework-res.apk (in system/framework)
    2) pull SystemUI.apk (in system/app)
    3) install them with the command

    Code:
    apktool if framework-res.apk
    Code:
    apktool if SystemUI.apk
    this will install the framework and the systemui for the current ROM.​


    2. STEPS for making theme :
    1) decompile SystemUI.apk with the command.

    Code:
    apktool d SystemUI.apk

    2) then go to SystemUI/res/drawable-hdpi/ (to edit the images)
    be careful of the .9.png . Use the Better Draw9Patch tool for editing .9patch pngs.

    these are the list of the png and where it will display :

    for background :
    * notification_panel_bg.9 ------------------------------------------------| (status bar bg)
    * tw_quick_panel_list_bg_f/n/p ----------------------------------------| (toggle bg)
    * tw_quick_panel_quick_setting_button_bg_normal.9 ---------| (toggle button background)
    * tw_status_bar_call_ongoing_#####.9 ----------------------------| (status bar display when call)

    for icons :
    * all tw_quick_panel_icon_###.png ----------------------------------| (toggle button)
    togglenotmove.png


    * stat_sys_battery_# , stat_sys_battery_charge_anim## ------| (for battery display)
    * tw_quickpanel_icon_#.png -------------------------------------------| (for status bar expended quicksetting)
    * tw_quick_panel_plnm_setting_dv ----------------------------------| (for divider between the quicksetting and clock)
    * tw_status_bar_close_on/off ------------------------------------------| ( for the status bar bottom drag)

    for recent tumbnail :
    * look for all recents_thumbnail_#.png ------------------------------| (for thumbnail bg)
    * tw_btn_default_normal_holo_recent_button.9 ------------------| (for btn bg)
    * tw_recent_panel_icon_######_holo_dark ----------------------| (for btn icon)

    thats all for the important images (other images you'll know just with its look and where it belong :p)​


    3. HOW TO CHANGE TEXT COLOR.

    res/layout :
    1. tw_status bar.xml

    battery text color.
    Code:
    <TextView android:textSize="12.0dip" android:textColor="#something"

    clock text color.
    Code:
     <com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_clock_text_size" android:textColor="#something"
    change the "something" with your preferred color.

    2. tw_status_bar_expanded_header.xml

    for pull down clock color.
    clockdateheader.png


    Code:
    <com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Clock" android:textColor="#something"
    for date color.
    Code:
    "@style/TextAppearance.StatusBar.Expanded.Date" android:textColor="#something"

    res/values :
    1. colors.xml
    for pull down Notification label color.
    Code:
    <color name="notification_category_color">
    for clear button label text color.
    Code:
    <color name="tw_status_bar_clear_btn_text">
    notification.png
    clearbutton.png


    2. styles.xml
    Code:
    <style name="TextAppearance.StatusBar.Expanded.Clock" parent="@style/TextAppearance.StatusBar.Expanded">
            <item name="android:textSize">32.0dip</item>
            <item name="android:textStyle">normal</item>
            <item name="android:textColor">#ff33b5e5</item>
            <item name="android:fontFamily">sans-serif-light</item>
    Code:
    <style name="TextAppearance.StatusBar.Expanded.Date" parent="@style/TextAppearance.StatusBar.Expanded">
            <item name="android:textSize">12.0dip</item>
            <item name="android:textStyle">normal</item>
            <item name="android:textColor">#FF9CE4FE</item>
            <item name="android:textAllCaps">true</item>
    Code:
    <style name="TextAppearance.StatusBar.Expanded.Network" parent="@style/TextAppearance.StatusBar.Expanded">
            <item name="android:textSize">14.0dip</item>
            <item name="android:textStyle">normal</item>
            <item name="android:textColor">#ff33b5e5</item>
    clockdateheader.png


    you can change the text size, color, style (bold or normal) in that xml.​


    4. HOW TO MAKE 1% BATTERY INCREMENT :
    res/drawable/
    - edit the stat_sys_battery.xml and stat_sys_battery_charge.xml to be like this :
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <level-list
      xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/stat_sys_battery_0" android:maxLevel="0" />
        <item android:drawable="@drawable/stat_sys_battery_1" android:maxLevel="1" />
        <item android:drawable="@drawable/stat_sys_battery_2" android:maxLevel="2" />
        <item android:drawable="@drawable/stat_sys_battery_3" android:maxLevel="3" />
        <item android:drawable="@drawable/stat_sys_battery_4" android:maxLevel="4" />
        <item android:drawable="@drawable/stat_sys_battery_5" android:maxLevel="5" />
    .
    .
    .
    .
    until :
    Code:
    .
    .
    .
    .
    .
    <item android:drawable="@drawable/stat_sys_battery_95" android:maxLevel="95" />
        <item android:drawable="@drawable/stat_sys_battery_96" android:maxLevel="96" />
        <item android:drawable="@drawable/stat_sys_battery_97" android:maxLevel="97" />
        <item android:drawable="@drawable/stat_sys_battery_98" android:maxLevel="98" />
        <item android:drawable="@drawable/stat_sys_battery_99" android:maxLevel="99" />
        <item android:drawable="@drawable/stat_sys_battery_100" android:maxLevel="100" />
    </level-list>

    animated battery charge display :
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <level-list
      xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:maxLevel="0">
            <animation-list android:oneshot="false"
              xmlns:android="http://schemas.android.com/apk/res/android">
                <item android:duration="1500" android:drawable="@drawable/stat_sys_battery_0" />
                <item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim0" />
            </animation-list>
        </item>
        <item android:maxLevel="1">
            <animation-list android:oneshot="false"
              xmlns:android="http://schemas.android.com/apk/res/android">
                <item android:duration="1500" android:drawable="@drawable/stat_sys_battery_1" />
                <item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim1" />
            </animation-list>
        </item>
        <item android:maxLevel="2">
            <animation-list android:oneshot="false"
              xmlns:android="http://schemas.android.com/apk/res/android">
                <item android:duration="1500" android:drawable="@drawable/stat_sys_battery_2" />
                <item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim2" />
            </animation-list>
    .
    .
    .
    .
    until :
    Code:
    .
    .
    .
    .
    <item android:maxLevel="100">
            <animation-list android:oneshot="false"
              xmlns:android="http://schemas.android.com/apk/res/android">
                <item android:duration="1500" android:drawable="@drawable/stat_sys_battery_100" />
                <item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim100" />
            </animation-list>
        </item>
        <item android:maxLevel="101">
            <animation-list android:oneshot="false"
              xmlns:android="http://schemas.android.com/apk/res/android">
                <item android:duration="1000" android:drawable="@drawable/stat_sys_battery_100" />
                <item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_animfull" />
            </animation-list>
        </item>
    </level-list>
    then put the battery icons in res/drawable-hdpi, recompile.​


    5. HOW TO MAKE CENTER CLOCK?
    greencenter.jpg


    res/layout

    tw_status_bar.xml
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:id="@id/status_bar" android:background="@drawable/status_bar_background" android:focusable="true" android:fitsSystemWindows="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:paddingLeft="6.0dip" 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" />
        <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:orientation="horizontal" android:id="@id/left_icons" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
                <TextView android:textSize="15.0dip" android:gravity="center_vertical" android:id="@id/carrierLabel" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
                <ImageView android:id="@id/doNotDisturbIcon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tw_dnd" android:alpha="0.7" android:scaleX="0.85" android:scaleY="0.85" />
                <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_alignParentLeft="true" />
            </LinearLayout>
            <LinearLayout android:gravity="center" android:orientation="horizontal" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="fill_parent">
                <com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_clock_text_size" android:textColor="#ff99FF00" android:gravity="center" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
            </LinearLayout>
            <LinearLayout android:gravity="right|center" android:orientation="horizontal" android:id="@id/right_icons" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0" android:layout_alignParentRight="true">
                <LinearLayout android:gravity="right|center" android:orientation="horizontal" android:id="@id/statusIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" />
                <LinearLayout android:gravity="right|center" android:orientation="horizontal" android:id="@id/signal_battery_cluster" android:paddingLeft="0.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent">
                    <include android:id="@id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" layout="@layout/tw_signal_cluster_view" />
                    <TextView android:textSize="9.0dip" android:textColor="#ff99FF00" android:layout_gravity="center" android:id="@id/battery_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/status_bar_network_name_separator" />
                    <ImageView android:gravity="center" android:id="@id/battery" android:layout_width="wrap_content" android:layout_height="wrap_content" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
        <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">
            <ImageSwitcher android:id="@id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginRight="4.0dip">
                <com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="centerInside" />
                <com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="centerInside" />
            </ImageSwitcher>
            <com.android.systemui.statusbar.phone.TickerView android:id="@id/tickerText" android:paddingTop="2.0dip" android:paddingRight="10.0dip" android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="1.0">
                <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:id="@id/ticker_text_view_old" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />
                <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:id="@id/ticker_text_view_new" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />
            </com.android.systemui.statusbar.phone.TickerView>
        </LinearLayout>
    </com.android.systemui.statusbar.phone.PhoneStatusBarView>
    edit the xml just like mine :p


    6. HOW TO REARRANGE THE TOGGLE :
    before:
    togglenotmove.png


    res/values
    arrays.xml
    Code:
    <string-array name="QuickSettingButtonAttribute">
            <item>Wifi</item> 
    <item><string-array name="QuickSettingButtonAttribute">
            <item>Wifi</item>   
    	<item>Location</item>
            <item>SilentMode</item>
            <item>AutoRotate</item>
            <item>Bluetooth</item>
            <item>MobileData</item>
            <item>DormantMode</item>
            <item>PowerSaving</item>
            <item>AllShareCast</item>
            <item>MultiWindow</item>
    	<item>Sync</item>
        </string-array>

    just arrange what ever you want it to be with replace the arrangement of that xml.
    eg. you want to make the GPS toggle to the other side :
    HTML:
    <string-array name="QuickSettingButtonAttribute">
            <item>Wifi</item>        
            <item>SilentMode</item>
            <item>AutoRotate</item>
            <item>Bluetooth</item>
            <item>MobileData</item>
            <item>DormantMode</item>
            <item>PowerSaving</item>
            <item>AllShareCast</item>
            <item>MultiWindow</item>
    	<item>Location</item>
            <item>Sync</item>
        </string-array>
    after :
    togglemoved.png


    thats it, then recompile! :D


    7. HOW TO REMOVE THE BRIGHTNESS BAR :
    brightnessbar.png


    res/layouts
    tw_status_bar_expanded.xml
    find :
    Code:
    <LinearLayout android:orientation="vertical" android:id="@id/brightness_controller" android:background="#00000000" android:layout_width="fill_parent" android:layout_height="56.0dip">
    replace the
    Code:
    android:layout_height="56.0dip"
    with
    Code:
    android:layout_height="0.0dip"

    recompile :D


    8. HOW TO CHANGE STATUS BAR BACKGROUND :


    res/drawable-hdpi
    this is the easiest way.
    replace the notification_panel_bg.9.png with any of your preferred image with resolution of 480x800.

    but before that dont forget to make all toggle background to be transparent.
    well, these are several ways that you can make it done :

    1) this is the step that i always use to make change the background.
    - decompile the apk.
    - go to the res/drawable-hdpi folder.
    - find the notification_panel_bg.9.png.
    - open it with any of your preferred photo editor.
    - resize the image to 482x802 (so that the other 2x2 pixel will leave for .9patch).
    - open the image that you want to make as background (copy it)
    - paste it into the notification_panel_bg.9.png that you have resized.
    - draw the whole 2x2 with black line #000000.
    - save the image.
    - recompile.​

    2) this steps is much easier, but i dont recommend. sometimes it failed. :p
    - decompile the apk.
    - recompile the apk.
    - go to build/apk/res/drawable-hdpi.
    - find the notification_panel_bg.9.png
    - replace with your preferred image. (but dont forget to name the image with the same name include .9)
    - build the apk again.
    - your finished apk will be in dist folder.​

    3) this is the safest way i guess :p but always success.
    - decompile the apk.
    - go to res/layout folder.
    - find tw_status_bar_expanded.xml
    - in that xml, find android:background="@drawable/notification_panel_bg".
    - change that notification_panel_bg with any name. example android:background="@drawable/mybackground".
    - save the xml.
    - then, go to res/drawable-hdpi folder.
    - place your image named "mybackground".
    - compile the apk.​


    9. HOW TO MAKE THE BUTTON AND NOTIFICATION TRANSPARENT :
    res/layouts
    tw_status_bar_expanded.xml
    find :
    all
    Code:
    android:background="#something"
    in the xml the change the "#something" with "#00000000".

    change ff value to (00 -> 100% transparency, 3f -> 75% transparency, 7f -> 50% transparency, bf -> 25% transparency)
    The other value (1e1e1e) is RBG for grey color, if you want it black it will be (000000).
    So:
    #00000000 - black with 100% transparency
    #3F000000 - black with 75% transparency
    #7F000000 - black with 50% transparency
    #BF000000 - black with 25% transparency

    this post originally posted at http://forum.xda-developers.com/showthread.php?t=2078585 by majdinj (hit thanks to him :D)

    then go to SystemUI\smali\com\android\systemui\statusbar\phone

    PhoneStatusBar.smali
    - find -0x100 (there will be just two of it in that smali)
    - change both to 0x0 (0=zero)
    - save smali.
    (that will make the notification bar transparent).​


    10. HOW TO MAKE TRANSPARENT BACKGROUND :


    res/layout
    tw_status_bar_expanded.xml
    find :
    Code:
    android:id="@id/notification_panel" android:background="@drawable/notification_panel_bg"
    change the "@drawable/notification_panel_bg" to "#00000000" or your preferred transparent range. Then, recompile :)
    172


    11. HOW TO REMOVE THE TEXT AND TOGGLES STATUS :

    res/layout

    tw_quick_setting_button.xml

    find :

    Code:
    <ImageView android:layout_gravity="center" android:id="@id/btn_image" android:layout_width="fill_parent" android:layout_height="60.0dip" android:layout_marginTop="4.0dip" />

    1. change the android:layout_height="60.0dip" to android:layout_height="90.0dip".
    2. change the android:layout_marginTop="4.0dip" to android:layout_marginTop="0.0dip"

    then in the same xml.
    find :
    Code:
    <TextView android:textSize="@dimen/quick_setting_button_text_size"
    at the same line, you'll see android:textColor="blablabla", change it to android:textColor="#00000000".
    and android:layout_height="blabla.bladip" to android:layout_height="0.0dip"

    also at the same xml.
    find :
    Code:
    <ImageView android:layout_gravity="center" android:id="@id/btn_status_image"
    .
    change all the padding to be like mine :

    HTML:
    <ImageView android:layout_gravity="center" android:id="@id/btn_status_image" android:paddingLeft="0.0dip" android:paddingTop="0.0dip" android:paddingRight="0.0dip" android:paddingBottom="0.0dip" android:layout_width="fill_parent" android:layout_height="0.0dip" android:scaleType="fitXY" android:drawable="@drawable/tw_quick_panel_off" />

    all this steps will make the size of the toggle bigger, remove the toggles text, and remove the toggles status.

    then go to :

    res/values
    dimens.xml

    find :
    Code:
    <dimen name="quick_setting_button_

    there will be 7 lines of it in that xml.
    change the line to be just like mine :
    HTML:
    <dimen name="quick_setting_button_height">90.0dip</dimen>
        <dimen name="quick_setting_button_image_height">90.0dip</dimen>
        <dimen name="quick_setting_button_text_height">0.0dip</dimen>
        <dimen name="quick_setting_button_text_size">0.0dip</dimen>
        <dimen name="quick_setting_button_status_height">0.0dip</dimen>
        <dimen name="quick_setting_button_status_padding">2.0dip</dimen>
        <dimen name="quick_setting_button_margin_top">0.0dip</dimen>

    next steps :
    - make your own toggle images with resolution of 80x100 or 90x110 or mine is 90x150. ( just any resolution that fit your toggle when displayed).
    - it doesn't matter because you already fix the dimension of the toggle display. The point of creating new big toggles is not to make the display stretched or narrowed.

    final steps:

    res/layout
    tw_status_bar_expanded.xml

    find :

    Code:
    <com.android.systemui.statusbar.policy.quicksetting.QuickSettingPanel android:orientation="horizontal" android:id="@id/quicksetting_container" android:layout_width="wrap_content" android:layout_height="wrap_content"

    - in that line you'll see android:divider="@bla/blablabla" change it to android:divider="#00000000".

    (that will remove the divider between the toggles)

    then in the same xml, find :
    HTML:
    <HorizontalScrollView android:id="@id/quicksetting_scroller" android:scrollbars="none" android:layout_width="wrap_content"

    edit the android:layout_height= to android:layout_height="90.0dip".

    finish, recompile! :)

    this is how it will look like :
    blablablaho.png




    12. HINT HOW TO EDIT IMAGE WITHOUT GETTING ERROR! :

    1) ONLY EDIT the .9patch images before recompile the apk!

    HOW TO EDIT IT??
    - use the Better Draw9Patch to edit .9patch.
    - there are many TUT for that..but i will put it in this TUT later.
    - ONLY EDIT THE .9patch images in res/ (which folder it belong) before recompile!


    dot9image.png
    dot9image2.png



    2) EDIT NON-.9patch images after you recompile the "HOW TO EDIT IT" above.
    - you can edit all of the NON-.9patch images FREELY in build/res/apk/ (which folder it belong).
    - the folder you'll get after you recompile the apk.
    - BUT DO NOT TOUCH ANY .9patch images in there!



    13. sample toggles for ALL!! :

    want other cool toggles???
    click this link!!

    sample_toggles_1 :

    sampletoggle1.png

    sample_toggles_2 :

    sampletoggle2.png

    sample_toggles_3 :

    sampletoggle3.png

    sample_toggles_4 :

    sampletoggle4.png

    sample_toggles_5 :

    sampletoggle5.png


    link updated : 12 MAY 2013

    and here is the base for all my icons :
    just put the icon inside that toggle base :)

    all_base.png

    download link :

    base_sample_toggle_1
    base_sample_toggle_2

    want other cool toggles???
    click this link!!

    just download it and try to mod yourself with my toggles :)
    the toggles is able to use if you use all my dimension that i have modded in the tut. (TUT #11)
    dont forget to hit thanks if you using this toggles for your mod. give me credits is good enough. :D





    14. HOW TO CHANGE ANY BACKGROUND WITH OWN IMAGE :
    In this TUT#14, you can change any part with any image by using the .9patch. png.
    its easy, you just need to change the color code in the xml for example android:background="#colorcode" to android:background="@drawable/your_image".
    And then you need to create an .9.png image then put it into res/drawable-****.
    the **** means what is your device dpi.
    the size of the image is depend with the part that you want to change, it is your creativity.


    before : after :

    15. How To Sign Your Apk After Modding! (IMPORTANT)
    - recompile the apk, then the apktool will create new folder named "build".
    - open the build/apk/ , copy and replace the original META-INF folder and AndroidManifest.xml into it. (for signing)
    - recompile again by using command :
    Code:
    apktool b SystemUI
    - your modded file will be in "dist" folder.

    P.S : ALWAYS REPLACE THE ORIGINAL META-INF FOLDER AND AndroidManifest.xml from the ORIGINAL APK into the MODDED APK AFTER BUILD! or else you got bootloop.


    references :
    - http://forum.xda-developers.com/showthread.php?t=2078585 by majdinj.
    - http://forum.xda-developers.com/showthread.php?t=1714481 by emompong.
    - http://forum.xda-developers.com/showpost.php?t=35294425&postcount=172 by devabhishek.
    credits to :
    - Koulis2000 because teach me a lot of things especially for the xml and .9patch, thanks dude!
    - bobfrantic also share what he knows to me :), thanks a lot!

    let me know if i forgot place your name as credit, im just normal human being :fingers-crossed: and sorry for that.
    hit thanks to them, their post really help me a lot :cowboy:
    there will be more TUT after this..maybe how to theme framework-res.apk ;)
    there must be something more i left, but i will put it later when i remember what it is.

    if you got something more to ask, dont be shy to PM me.. i'll be happy to help..
    (only if im able to!)

    IF YOU HAVE SOMETHING THAT YOU KNOW FOR HOW TO MODDING SYSTEMUI.APK, AND IT IS NOT INCLUDED IN THIS TUT, PLEASE SHARE IT HERE :)
    SO THAT MAYBE THIS TUT WILL HELP MANY PEOPLE WITH MANY VERSION OF DEVICES, I WISH THIS THREAD WILL BECOME THE PERFECT PLACE FOR PEOPLE WHO WANT TO LEARN ABOUT HOW TO THEME SYSTEMUI.APK :)
    6
    Nice thread, can you also add how to hide text in the toggles in the status pull down? Also here is a great little program people can use for determining color codes like #cecece to change colors. windows only though :)

    View attachment 1826979
    i put the site i refer already :)
    anyway, thanks..
    will update the thing you said for next update..
    5
    Nice thread, can you also add how to hide text in the toggles in the status pull down? Also here is a great little program people can use for determining color codes like #cecece to change colors. windows only though :)

    View attachment color2html.zip
    5
    can i use apk multi tool to do this as it gives all xml and icon files easily..??
    is both same ??

    thx for tutorial.

    yes..just the same..but for apkmulti tool always set compression level to 0..(option 21).
    and dont forget to replace the original META folder and AndroidManifest to the modded apk after recompile.. :)

    Great tutorial, all well explained. Thanks :)

    Sent from my GT-I9070
    hope this thread help a lot of people :)