Taking advantage of the translucent status bar in Android 4.4 KitKat

Question

When I released my note taking application for Android 4.0 - 4.3 I used a custom action bar color with a custom action bar icon (instead of using the standard light and dark action bars). I would like to make it so on Android 4.4, the status bar will also take on the custom color I am using in my Action Bar (which is #FFD060). Is there a way to easily change my current styles.xml to allow 4.4 to take advantage of this?

My styles.xml under my values-v19 folder is as follows:

<resources>

<style name="AppBaseTheme" parent="@android:style/Theme.Holo.Light">
   <item name="android:actionBarStyle">@style/MyActionBarTheme</item>
</style>

 <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
     <item name="android:background">#ffd060</item>
     <item name="android:textColor">#fff</item>   
     <item name="android:icon">@drawable/action</item>
     <item name="android:titleTextStyle">@style/MyTextAppearance</item>
 </style>

 <style name="MyTextAppearance" parent="android:TextAppearance.Holo.Widget.ActionBar.Title">
     <item name="android:icon">@drawable/action</item>
     <item name="android:textColor">#ffffff</item>
 </style>
</resources>

I have tried to implement:

 <item name="android:windowTranslucentStatus">true</item>

It causes the contents of my application to move up, start in the status bar area and be covered by the Action Bar.

Without the translucent code

score 15 · Accepted Answer · edited May 23 '17 at 12:34

15

Update: Found this great article from Matt Gaunt (a Google Employee) on adding a Translucent theme to Android apps. It is very thorough and addresses some of the issues many people seem to be having while implementing this style: Translucent Theme in Android

Just add the following to your custom style. This prevents the shifting of the content behind the ActionBar and up to the top of the window, not sure about the bottom of the screen though.

<item name="android:fitsSystemWindows">true</item>

Credit: Transparent Status Bar System UI on Kit-Kat

edited May 23 '17 at 12:34

Community

1
1

answered Jan 15 '14 at 06:32

thunsaker

854
5
11

Also of note, this kind internet citizen from Reddit has a great explanation of how to put the color in the Status Bar. Basically you wrap your base layout in a FrameLayout with the background color you want. http://www.reddit.com/r/Android/comments/1ssgkt/any_android_apps_making_using_of_translucent/ce0y15d – thunsaker Jan 15 '14 at 06:55
10

This is a little dangerous if you use Toasts in your app, see https://code.google.com/p/android/issues/detail?id=63653 – Paito Feb 01 '14 at 03:05
The Answer is useful, Remove the non-related links, What this link refers to ? Translucent Theme in Android(https://gauntface.com/blog), Specify the link to the specific content (for -1) – Sackurise Sep 06 '16 at 13:30

score 2 · Answer 2 · answered Dec 14 '13 at 01:54

2

It looks like all you need to do is add this element to the themes you want a translucent status bar on:

<item name="android:windowTranslucentStatus">true</item>

answered Dec 14 '13 at 01:54

hichris123

10,145
15
56
70

I previously tried this within my Styles.xml, and I was wondering if there is a little more to it. When I just add this, it causes the contents of my applications to move up and start in the status bar and become hidden by the action bar. Here is an example image once I implement it: [Without the translucent code](http://i.imgur.com/3jvQQL4.png). [With the translucent code](http://i.imgur.com/XMgiO8h.png). – Amonstan Dec 14 '13 at 04:05

score 2 · Answer 3 · answered Apr 22 '15 at 07:54

Add these lines in your main theme

<style name="AppTheme" parent="android:Theme.Holo.Light">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:fitsSystemWindows">true</item>
</style>

score 0 · Answer 4 · answered Jan 31 '14 at 22:58

You're very close you just need to update your view background colors:

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffd060" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/background_light"

        <!-- your stuff here -->
    </LinearLayout>
</FrameLayout>

Specifying a global background color in your AppBaseTheme would also work but would likely cause a mess as it would end up been the default background color for everything.

But doesn't this produce additional overdraw? – FD_ Aug 22 '14 at 14:09 — FD_, Aug 22 '14 at 14:09

score 0 · Answer 5 · answered May 24 '15 at 15:31

To change the color of the status bar to windowBackground

 <item name="android:windowBackground">@color/window_bg</item>

To add the translucent effect to status and navigation bar

<item name="android:windowTranslucentStatus">true</item>

<item name="android:windowTranslucentNavigation">true</item>

Taking advantage of the translucent status bar in Android 4.4 KitKat

5 Answers5

Linked