Why can't we use a Translucent system bars with and ActionBar

Waza_Be picture Waza_Be · Nov 2, 2013 · Viewed 54.3k times · Source

While updating my apps to Kitkat, I just wanted to give them a gorgeous look on KitKat using the Translucent property:

Translucent system bars

You can now make the system bars partially translucent with new themes, Theme.Holo.NoActionBar.TranslucentDecor and Theme.Holo.Light.NoActionBar.TranslucentDecor. By enabling translucent system bars, your layout will fill the area behind the system bars, so you must also enable [fitsSystemWindows][4] for the portion of your layout that should not be covered by the system bars.

My only concern is that I would like to use an ActionBar which sounds the opposite of what Google wants (both theme have NoActionBar:

Theme.Holo.NoActionBar.TranslucentDecor 
Theme.Holo.Light.NoActionBar.TranslucentDecor 

As I don't plan to use some hacks or tricks to make it work, I just wanted to know if there was some correct way to achieve this or if this would be against Google guidelines.

enter image description here

Answer

adneal picture adneal · Nov 3, 2013

You can create your own theme with android.R.attr#windowTranslucentStatus set to true to achieve the same effect without losing the ActionBar.

From the docs:

Flag indicating whether this window requests a translucent status bar. Corresponds to {@link android.view.WindowManager.LayoutParams#FLAG_TRANSLUCENT_STATUS}.

Styles - Remember, these would go in values-v19.

<style name="TranslucentStatusBar" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/TranslucentActionBar</item>
    <item name="android:windowTranslucentNavigation">false</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

<style name="TranslucentActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@android:color/transparent</item>
</style>

Layout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_dark"
    android:fitsSystemWindows="true" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_purple" />

</FrameLayout>

Results

enter image description here