36

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?

enter image description here

AxeEffect
  • 6,345
  • 4
  • 37
  • 33

3 Answers3

65

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.

CODE-REaD
  • 2,819
  • 3
  • 33
  • 60
suckgamony
  • 804
  • 7
  • 5
  • 1
    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. – AxeEffect Oct 26 '14 at 16:43
  • 1
    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. – easycheese Nov 15 '14 at 00:22
  • 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 – xXJJJasonMokXx Jan 04 '15 at 05:13
  • 1
    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. – AxeEffect Jan 12 '15 at 19:51
  • @AxeEffect how would you tell the view containing the gradient to start behind the status bar rather than below it? – JMRboosties Mar 17 '15 at 21:36
9

Add below line to your style:

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
Kuldeep Sakhiya
  • 3,172
  • 1
  • 18
  • 17
5

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.
Community
  • 1
  • 1
CODE-REaD
  • 2,819
  • 3
  • 33
  • 60