Android 4.4 translucent Status and Navigation bars style on Android 5.0

Question

On Android 4.4 KitKat you can set the Status and Navigation bars transparent with the android:windowTranslucentStatus and android:windowTranslucentNavigation theme elements, and then below the bars the app window is extended and a gradient is added. However on Android 5.0 Lollipop this has been changed and now instead of the gradient a solid transparent color is added. Android 5.0 offers the new android:statusBarColor and android:navigationBarColor elements under the new Material theme, but when you try to set these elements to @android:color/transparent the app window is not extended, and if you use android:windowTranslucentStatus and android:windowTranslucentNavigation then android:statusBarColor and android:navigationBarColor are ignored.

Am I missing something described on http://developer.android.com/training/material/theme.html#StatusBar?

Solution 1

Set android:windowTranslucentStatus to false and set android:statusBarColor to @android:color/transparent.

Then add code below:

getWindow().getDecorView().setSystemUiVisibility(
        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

If you also want the navigation bar to be translucent, set android:navigationBarColor to @android:color/transparent and combine the flag View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION as well.

I didn't experiment on the navigation bar but it will work.

Solution 2

Add below line to your style:

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

Solution 3

To clarify @suckgamony's answer to this question:

• Under Lollipop and above, setting android:statusBarColor or android:navigationBarColor to @android:color/transparent will make the Status Bar or Navigation Bar (respectively) completely transparent, unless:
• android:windowTranslucentStatus or android:windowTranslucentNavigation is set to true, in which case the Status Bar or Navigation Bar (respectively) is set to the solid transparent color @AxeEffect describes (again, under Lollipop and above);
• android:statusBarColor and android:navigationBarColor may only be used with Android version 21 (Lollipop 5.0) or higher. As described in the referred to answer, android:windowTranslucentStatus or android:windowTranslucentNavigation when used with Kitkat provide transparent gradients rather than full transparency.

Comments

[AxeEffect]

Great! This works for both the System and the Navigation bar. I don't understand why this isn't explained anywhere on the official documentation. Thanks.

[easycheese]

I'm not sure why but getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); makes it fail in my code. I have to ensure this is NOT in the code to make it work.

[xXJJJasonMokXx]

Thanks this works but the bars go full transparent instead of a soft gradient like they were in KitKat. Should I add a custom soft gradient in order to achieve such effect? Thanks

[AxeEffect]

Yes, bars will be totally transparent. Then it will be very advisable to add a gradient (as a FrameLayout at the bottom of another FrameLayout or RelativeLayout) like the one shown on Android 4.4, above all for the navigation bar.

[JMRboosties]

@AxeEffect how would you tell the view containing the gradient to start behind the status bar rather than below it?