[Android Themes] joehanh88:
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!

TUT SHARED BY OTHERS :

- HOW TO MOVE TOGGLES TO BOTTOM, HOW TO MOVE BATTERY ICON TO LEFT, HOW TO ADD AM/PM AT STATUS BAR. by [MENTION=4987653]SuperDroid-BOND[/MENTION]

- HOW TO ADD SCREENSHOT BUTTON IN STATUSBAR. by [MENTION=5292754]remuntada78[/MENTION]​

​

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

- 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

apktool if framework-res.apk

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.

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.

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)

* 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)​

res/layout :

1. tw_status bar.xml

battery text color.

<TextView android:textSize="12.0dip" android:textColor="#something"

clock text color.

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

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

for date color.

"@style/TextAppearance.StatusBar.Expanded.Date" android:textColor="#something"

res/values :

1. colors.xml

for pull down Notification label color.

<color name="notification_category_color">

for clear button label text color.

<color name="tw_status_bar_clear_btn_text">

2. styles.xml

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

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

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

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

res/drawable/

- edit the stat_sys_battery.xml and stat_sys_battery_charge.xml to be like this :

<?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 :

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

<?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 :

.
.
.
.
<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.​

res/layout

tw_status_bar.xml

<?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​

before:

res/values

arrays.xml

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

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

thats it, then recompile! :D​

res/layouts

tw_status_bar_expanded.xml

find :

<LinearLayout android:orientation="vertical" android:id="@id/brightness_controller" android:background="#00000000" android:layout_width="fill_parent" android:layout_height="56.0dip">

replace the

android:layout_height="56.0dip"

with

android:layout_height="0.0dip"

recompile :D​

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.​

res/layouts

tw_status_bar_expanded.xml

find :

all

android:background="#something"

in the xml the change the "#something" with "#00000000".

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

res/layout

tw_status_bar_expanded.xml

find :

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