[Guide] Transparant status bar background and pull-down menu

majdinj · Jan 2, 2013

It is not only transparent, it could be any color as well that you can achieve by playing with hex color codes!!!

I am trying to help those who want to play with status bar background, text color and pull-down menu background (this will not include how to change status bar and pull-down menu icons)..
I will also try to show you how to get transparency up-to my knowledge

So here we go..

You will need:
1. Apktool or APK-Tool Manager for decompiling and recompiling
2. Backsmali/Smali program from here "use it to edit smali part in this tutorial"
3. Color hex code picker (like color picker, or photoshop).
4. ARGB hex converter to set transparency of alpha value.
5. Notepad++ for xml and smali editing.

First you need to decompile SystemUI.apk, and framwork-res.apk

Initially, you need to choose the color you want.. This is how RGB color hex code picker in photoshop..

Then change transparency with ARGB hex converter..

Where 00 = 100% transparency (i.e, completely transparent), 3F = 75% transparency, 7F = 50% transparency, BF = 25% transparency, FF = 0% transparency (i.e, completely opaque)

Now lets the chaos begins!!

1) For status bar:

- Go to SystemUI.apk\res\values and open drawables.xml and focus on this line:

Code:

    <item type="drawable" name="status_bar_background">#[B][COLOR="Red"]ff[/COLOR][/B]1e1e1e</item>

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

2) For pull-down menu:
This one has 6 parts..
First part: top bar of pull-menu

- Go to SystemUI.apk\res\layout and open tw_status_bar_expanded_header.xml, look for this line:

Code:

<LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:background="#[B][COLOR="Red"]ff000000[/COLOR][/B]" android:layout_width="fill_parent" android:layout_height="39.0dip" android:baselineAligned="false"

so change ff value to which value that represent the transparency you like as mentioned in section above (00 -> 100% transparency, 3f -> 75% transparency, 7f -> 50% transparency, bf -> 25% transparency)
- Also for Settings background in top bar of pull-menu, edit this line in tw_status_bar_expanded_header.xml (the red line):

Code:

    <RelativeLayout android:id="@id/settings_button" android:background="[B][COLOR="Red"]@drawable/tw_quick_panel_setting_button_bg[/COLOR][/B]" android:focusable="true" android:visibility="visible" android:layout_width="@dimen/status_bar_expanded_setting_width" android:layout_height="39.0dip">

Here you can put any ARGB color code that you like starting with hashtag sign "#" instead of red color line above. (credits to nokiamodeln91)

Second part: toggle slider

Well I didn't change it before. But I believe It is png file in drawable-xhdpi folder named [tw_quick_panel_quick_setting_button_bg_normal.9.png] and [tw_quick_panel_quick_setting_button_bg_pressed.9.png], just change it with any transparent image with same name.

Third part: brightness panel background

- Go to SystemUI.apk\res\layout folder and open tw_status_bar_expanded.xml and focus on this line:

Code:

                <LinearLayout android:orientation="vertical" android:id="@id/[B][COLOR="Blue"]brightness_controller[/COLOR][/B]" android:background="#[B][COLOR="Red"]ff000000[/COLOR][/B]" android:layout_width="fill_parent" android:layout_height="56.0dip">

This is black with 0 transparency.. so change to which color and transparency you want.

The fourth part: Notification panel background:
This one has different parts:
Part A: Ongoing header:

- Go to SystemUI.apk\res\layout and open tw_status_bar_expanded.xml. Here focus on the following line:

Code:

                <LinearLayout android:orientation="vertical" android:id="@i[B][COLOR="Blue"]d/onGoingCart[/COLOR][/B]" android:background="#[B][COLOR="Red"]ff293945[/COLOR][/B]" android:focusable="true" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="@dimen/status_bar_expanded_notification_category_height">

This is dark grey with 0 transparency.. Change to whatever you want

Part B: Notifications header:

- Go to SystemUI.apk\res\layout and open tw_status_bar_expanded.xml. Here focus on the following line:

Code:

                <LinearLayout android:orientation="vertical" android:id="@id/[B][COLOR="Blue"]notificationCart[/COLOR][/B]" android:background="#[B][COLOR="Red"]ff293945[/COLOR][/B]" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="@dimen/status_bar_expanded_notification_category_height">

This is dark grey with 0 transparency.. so change to which color and transparency you want.

Part C: Clear button:
Just go to SystemUI.apk\res\drawable-xhdpi folder and change these images [tw_quick_panel_clearbtn_focus.9.png], [tw_quick_panel_clearbtn_normal.9.png], [tw_quick_panel_clearbtn_press.9.png] and [tw_quick_panel_clearbtn_select.9.png]; don't forget that these are 9.png files, so need special way (you can search the forum for that)

Part D: Notifications panel itself:

- Go to SystemUI.apk\res\layout and open tw_status_bar_expanded.xml. Here focus on the following lines:

Code:

<FrameLayout android:id="@i[B][COLOR="Blue"]d/notification_panel[/COLOR][/B]" android:background="@drawable/[B][COLOR="Red"]notification_panel_bg[/COLOR][/B]" android:paddingTop="@dimen/notification_panel_padding_top" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginLeft="@dimen/notification_panel_margin_left"

This is for notification panel and it is not hex color code; it is notification_panel_bg.9.png file so go to drawable-xhdpi folder and replace it with another 9.png file which is transparent (see forum to know how to create 9.png file, there are a lot of tutorials!!)

Fifth part: the notifications themselves.

- Go to SystemUI/smali/com/android/systemui/statusbar/phone/ folder and open PhoneStatusBar.smali and search for "-0x100". There will be two lines; change them from:

Code:

    const/high16 v15, [B][COLOR="Red"]-0x100[/COLOR][/B]

to:

Code:

const/high16 v15, [B][COLOR="Blue"]0x0[/COLOR][/B]

Don't forget to change the second line as well.
Then decompile framework-res.apk and go to framework-res/res/values/ folder and open drawables.xml and look for this line:

Code:

<item type="drawable" name="notification_item_background_color">#[B][COLOR="Red"]ff000000[/COLOR][/B]</item>

change ff value to any transparency value you want.
then recompile framework-res.apk with compression level set to 0 (to not get boot-loop!!!)

Sixth part: the footer:

This is the simplest part, just go to SystemUI.apk\res\drawable-xhdpi folder and change these images [tw_status_bar_close_off.png] and [tw_status_bar_close_on.png] with any transparant image you create (just save with the same name).

3) For texts in status bar and pull-down menu:
Just search for any text color hex codes in the following files and change them to whatever you want:
SystemUI/res/values/drawables.xml

Code:

    <item type="drawable" name="[B][COLOR="Blue"]notification_number_text_color[/COLOR][/B]">#[B][COLOR="Red"]ffffffff[/COLOR][/B]</item>

SystemUI/res/layout/tw_quick_setting_button.xml

Code:

        <TextView android:textSize="@dimen/quick_setting_button_text_size" android:textColor="#[B][COLOR="Red"]ffafc5dc[/COLOR][/B]" android:gravity="center" android:id="@id/[B][COLOR="Blue"]btn_text[/COLOR][/B]" android:layout_width="fill_parent" android:layout_height="@dimen/quick_setting_button_text_height" android:includeFontPadding="false" />

SystemUI/res/layout/tw_status_bar_expanded_header.xml

Code:

    <com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/[B][COLOR="Blue"]TextAppearance.StatusBar.Expanded.Clock[/COLOR][/B]" android:textColor="#[B][COLOR="Red"]ffffffff[/COLOR][/B]" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="4.0dip" android:layout_marginTop="-3.0dip" android:singleLine="true" systemui:ampmSmall="true" />
    <com.android.systemui.statusbar.policy.DateView android:textAppearance="@style/[B][COLOR="Blue"]TextAppearance.StatusBar.Expanded.Date[/COLOR][/B]" android:textColor="#[B][COLOR="Red"]ffcbcbcb[/COLOR][/B]" android:ellipsize="none" android:id="@id/date" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8.0dip" android:layout_marginRight="4.0dip" android:maxLines="2" />

SystemUI/res/layout/tw_status_bar.xml

Code:

                <TextView android:textSize="12.0dip" android:textColor="#[B][COLOR="Red"]ffa6a6a6[/COLOR][/B]" android:layout_gravity="center" android:id="@id/[B][COLOR="Blue"]battery_text[/COLOR][/B]" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/status_bar_network_name_separator" />

            <com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_[B][COLOR="Blue"]clock_text[/COLOR][/B]_size" android:textColor="#[B][COLOR="Red"]ff959595[/COLOR][/B]" android:ellipsize="none" android:gravity="left|center" android:id="@id/clock" android:paddingLeft="3.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:includeFontPadding="false" />

and that is it all what I know

enjoy :good:

Extra steps:
- Remove lines in notification pull-down to be transparent, see post #103 (credits to bombaybadboy)
- Hide Statusbar or Transparent Statusbar on Lockscreen (a great tutorial by @xperiacle from here)
- Add shadow effect to status bar texts and icons, see post #205

nokiamodeln91 · Jan 2, 2013

Oh man great work. Just to write these tutorials you deserve a hi five.

Sent from my GT-N7000 using xda premium

coelho_ · Jan 3, 2013

Is my teacher, thanks

Send from my toilets with Tapatalk

sakunakia · Jan 7, 2013

ohh

hay i decompiled.... but in my res folder >values when i enter values and search for layout xml there is no such xml file plz help me in this.... :cyclops:

nokiamodeln91 · Jan 7, 2013

both are folders
\res\layout & \res\values

sepehrthegreat-iran · Jan 11, 2013

Any simple way???!!!directly on android

Sent from my GT-N7000 using xda premium

nokiamodeln91 · Jan 11, 2013

No. Other than using roms that incorporates these settings.

devilctk · Jan 12, 2013

thanks for the tutorial, I got some questions

by apk manager
after compiling, should I sign it or not?

step in 7 zip
i wanted to replace the amended xml to the original xml, but \res\values\drawables is missing

Warnahly · Jan 14, 2013

how can i decompile systemUI and framwork

nokiamodeln91 · Jan 14, 2013

devilctk said:
thanks for the tutorial, I got some questions

by apk manager
after compiling, should I sign it or not?

step in 7 zip
i wanted to replace the amended xml to the original xml, but \res\values\drawables is missing

no need to sign sys apps.
to get the values folder, you will first need to decompile the apk as its hidden in resources.asrc Use APK manager

sling · Jan 30, 2013

Excellent info thanks much OP.

I gave notification_panel_bg.9.png some transparency looks great except for transparent gap between toggle slider & brightness panel.
Ive tried for hours to fill that void with black having no luck.
Any recommendations?

Thanks

Phil-

Emothic_Reagan · Jan 30, 2013

Hi men, how to chance the status bar color in xxlsc..Pls help me, pls...

Sent from my GT-N7000 using xda premium

widokeren · Feb 10, 2013

devilctk said:
thanks for the tutorial, I got some questions

by apk manager
after compiling, should I sign it or not?

step in 7 zip
i wanted to replace the amended xml to the original xml, but \res\values\drawables is missing

if its system apk you must sign it,

for /res/values just drag and drop resources.arsc from your mod to your original

ttibbetts83 · Feb 25, 2013

Emothic_Reagan said:
Hi men, how to chance the status bar color in xxlsc..Pls help me, pls...

Sent from my GT-N7000 using xda premium

Have you tryed this guide it shiuld work on xxlsc as well

Sent from my GT-N7000 using XDA Premium HD app

wierzbik · Feb 25, 2013

I'm not able to decompile systemUI.apk
framework-res.apk is decompiling properly, but there are always problems with systemUI.apk.
I was trying to delete classes.dex but no difference.
Any help?

Evewon · Feb 25, 2013

wierzbik said:
I'm not able to decompile systemUI.apk
framework-res.apk is decompiling properly, but there are always problems with systemUI.apk.
I was trying to delete classes.dex but no difference.
Any help?

Make sure you have a completely stock unmodified systemUI.apk installed along with framework-res and in my case the twframework-res, in the apktool frameworks

Sent from my SAMSUNG-SGH-I747 using xda premium

wierzbik · Feb 25, 2013

I didn't tried with stock. I want only to change color of the statusbar in Ultimate rom, so I took apk's from this rom. So the problem is previously modifed apk? Is it possible to do something with this?

EDIT: Original, unmodifed systemUI.apk from S2 can not be decompiled too

Maybe I'm doing something wrong.
I was trying to decompile with this guide: http://xdaforums.com/showthread.php?t=1848458
and with others which have 'succeed' because there weren't any errors but on the beginning of drawables.xml I have a lot of lines:
<item type="drawable" name="APKTOOL_DUMMY_003f">false</item>
So I guess, that's not properly decompiled.

keeky · Feb 27, 2013

Thanks for great guide. Would you please also prepare an instruction for Center Clock for status bar also?

iXanza · Mar 5, 2013

I decompiled,made the transparency edits and compiled the apk. all the values are fine. But when I replace my System UI I get back the same look I had before I did all the transparency edits. When I decompile the new System UI all my edits are there. This is just weird...

KewalG · Mar 12, 2013

2) For pull-down menu:
This one has 6 parts..
First part: top bar of pull-menu

- Go to SystemUI.apk\res\layout and open tw_status_bar_expanded_header.xml, look for this line:
Code:

<LinearLayout android:gravity="center_vertical" androidrientation="horizontal" android:background="#ff000000" android:layout_width="fill_parent" android:layout_height="39.0dip" android:baselineAligned="false"

so change ff value to which value that represent the transparency you like as mentioned in section above (00 -> 100% transparency, 3f -> 75% transparency, 7f -> 50% transparency, bf -> 25% transparency)

How do i get rid of this on any other rom i want?

[Guide] Transparant status bar background and pull-down menu

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Member

Inactive Recognized Contributor

Senior Member

Similar threads

Top Liked Posts