Taking advantage of the translucent status bar in Android 4.4 KitKat

Amonstan picture Amonstan · Dec 14, 2013 · Viewed 24.4k times · Source

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

Answer

thunsaker picture thunsaker · Jan 15, 2014

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