Status bar turns white and does not show content behind it

Question

I am trying out AppCompat on Marshmallow. And I want to have a transparent status bar however it turns white. I've tried a couple solutions but they didn't work for me (Transparent status bar not working with windowTranslucentNavigation="false", Lollipop : draw behind statusBar with its color set to transparent). Here's related code.

My styles.xml

<style name="Bacon" parent="Theme.Bacon"/>

<style name="Theme.Bacon" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/theme_primary</item>
    <item name="colorPrimaryDark">@color/theme_primary_dark</item>
    <item name="colorAccent">@color/theme_accent</item>
    <item name="windowActionBar">false</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowBackground">@color/background_material_light</item>  
</style>

<style name="Theme.Bacon.Detail" parent="Bacon"/>

v21

<style name="Bacon" parent="Theme.Bacon">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

<style name="Theme.Bacon.Detail" parent="Bacon">
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

Activity

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

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" />

</FrameLayout>

Fragment

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginBottom="32dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:statusBarScrim="@color/black_trans80">

        <ImageView
            android:id="@+id/photo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/photo"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/anim_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Are you able to solve this issue? I am having the same issue. In one of my activity having white status bar — kirtan403, Nov 23 '15 at 21:15
@kirtan403 I fixed my issue by changing my Activity layout from FrameLayout to RelativeLayout. Please see my answer. — pt2121, Nov 23 '15 at 21:58
Mine is Relative only still getting the white statusbar. I have posted question here: http://stackoverflow.com/q/33890066/1820644 — kirtan403, Nov 24 '15 at 10:17
After struggling for a day I found the solution which worked for me. Here is the answer: http://stackoverflow.com/a/33892569/1820644 — kirtan403, Nov 24 '15 at 11:35
I changed android:windowTranslucentStatus status to false and its working — Kiran Benny Joseph, Jun 28 '18 at 07:19
I have faced the same issue and solved it by [this](https://stackoverflow.com/a/56989333/8874958) — Kishan Solanki, Jul 12 '19 at 04:22

score 171 · Answer 1 · edited May 23 '17 at 12:34

171

I found the answer in this link:Status Bar Color not changing with Relative Layout as root element

So it turns out we need remove the

      <item name="android:statusBarColor">@android:color/transparent</item>

in styles.xml(v21). And it works just fine for me.

edited May 23 '17 at 12:34

Community

1
1

answered Jul 04 '16 at 10:46

Phoenix Wang

2,357
1
11
17

Yes, this is the solution. Because android:fitsSystemWindows will cause problems when making the tab bar scrollable. Found the same answer but you posted it earlier. Also mention that this is default overwritten I think. – jobbert Jul 11 '16 at 13:06
This should be marked as the accepted solution. This issue was creeping up all over my app, this solution fixed it everywhere just by commenting out that single line. Saved me such a headache! – BMB Jul 27 '17 at 16:38
I'm using CoordinatorLayout, so the other answer to us CoordinatorLayout as the root doesn't work for me (using fitsSystemWindows=true as suggested didn't work either). This answer works for me. – Bruce Jul 10 '18 at 04:55
What if I require my status bar color to be transparent though? – nullmn Apr 25 '19 at 19:04
1

@nullmn then you need change your Activity background to something else. – Phoenix Wang Apr 28 '19 at 08:08

score 99 · Answer 2 · answered Apr 29 '16 at 09:56

(A little late to the party but it might help someone)

I had the exact same problem. Somehow, some activities were normal while new ones I created were showing white status bar instead of colorPrimaryDark value.

After trying several tips, I noticed that the normal-working activities where all using CoordinatorLayout as the root of the layout, while for the others I had replaced it by regular layouts because I didn't need the features (animation, etc) provided by CoordinatorLayout.

So the solution is to make CoordinatorLayout the root layout, and then inside of it add your former layout root. Here is an example:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <!-- your activity content here-->


  </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

PLEASE NOTE that without android:fitsSystemWindows="true" this solution doesn't work for me.

Tested on Lollipop and Marshmallow

The solution worked for me too. But.. why does it happen? Proper StatusBar color is displayed when root is DrawerLayout or CoordinatorLayout — user3316561, Jul 18 '16 at 09:04
This only worked for me when adding `android:fitsSystemWindows="true"` to the `CoordinatorLayout` in Android 8. — Franco, Nov 03 '17 at 02:14
@Franco I think this is the most relevant part of the solution. I say this because I had `CoordinatorLayout` when I experienced the same problem and the specific property that fixed this for me was `android:fitsSystemWindows="true"` — Wilhelm, Dec 11 '17 at 15:35
The `android:fitsSystemWindows="true"` did not work for me. What solved my problem is to use a theme that's not `AppTheme.NoActionBar` on the activity with a `CoordinatorLayout`. I don't know why that fixed it. — bmdelacruz, Feb 25 '18 at 14:33
`CoordinatorLayout` or `android:fitsSystemWindows="true"` neither is working for me. — Alif Hasnain, Jul 28 '20 at 21:06

score 23 · Answer 3 · answered Oct 26 '18 at 15:44

23

You have to add this property on your style to see the content

<item name="android:windowLightStatusBar" tools:ignore="NewApi">true</item>

answered Oct 26 '18 at 15:44

Andres Paez

370
2
5

2

This worked for me. This should be accepted answer. – abdul rehman Jun 29 '20 at 18:08

score 19 · Answer 4 · answered Aug 28 '17 at 10:31

 <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@color/colorPrimaryDark</item>
    </style

Just Replace this , statusBarColor should be your expected color and not TRANSPARENT

Michele Lacorte · Answer 5 · 2015-09-06T22:10:37.583

12

Add this in your style.xml

    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>

and this in your onCreate();

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

edited Sep 06 '15 at 22:10

answered Sep 06 '15 at 22:00

Michele Lacorte

5,323
7
32
54

1

Thanks but this doesn't work. The status bar looks the same. – pt2121 Sep 06 '15 at 22:08
please help for this issue... same problem here.... none of the solutions till now works – Saeed Jassani Oct 21 '15 at 06:05
@SaeedJassani I found a solution which worked for me. If you have same problem have a look at my question and answer : stackoverflow.com/a/33892569/1820644 – kirtan403 Nov 24 '15 at 11:37

score 10 · Answer 6 · answered Dec 12 '16 at 22:04

10

Just put this item in your v21\styles.xml :

true

It should look like this :

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

answered Dec 12 '16 at 22:04

Rami

158
1
8

1

It worked for me using `false` values in the last 2 items. Weird, but thanks. – JCarlosR Oct 02 '18 at 01:17
It does work for only with the two last lines but the content is going behind the status bar, padding/margin or fitsSystemWindows does not help. Tested on OP 5 running nougat – Anton Makov Aug 20 '19 at 20:18

score 9 · Answer 7 · answered Feb 03 '16 at 13:57

9

After unsuccessfully trying all of the above I found that explicitly setting the theme fixed the issue.

setTheme(R.style.AppTheme);

That has to go before the super.OnCreate() in your activity.

answered Feb 03 '16 at 13:57

James Britton

412
4
13

1

I can confirm this fixes the errant activity on Marshmallow – dare0021 May 22 '16 at 09:29
love you man , worked like a charm, though i still have no idea why :@ – Adeel Ahmad May 30 '16 at 21:08
before the super.OnCreate() is the key – Karthik Rk Nov 28 '16 at 14:10

score 9 · Answer 8 · edited Nov 19 '19 at 14:37

9

I faced the same issue. What i did was, in the "v21/styles.xml" file a changed the value true:

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

to:

 <item name="android:windowDrawsSystemBarBackgrounds">false</item>

edited Nov 19 '19 at 14:37

android developer

114,585
152
739
1,270

answered Jan 12 '17 at 12:35

Degomos

91
1
3

score 7 · Answer 9 · answered Aug 20 '18 at 19:24

7

<item name="android:statusBarColor">@android:color/transparent</item>

You'll see that line of code in values/styles/styles.xml(v21) . Remove it and that solves the issue

Link to this answer

answered Aug 20 '18 at 19:24

Phares

1,008
13
20

score 5 · Accepted Answer · answered Nov 23 '15 at 21:57

I fixed my issue by changing my Activity layout from FrameLayout to RelativeLayout. Thanks everybody who tried to help!

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@android:color/transparent">

    <android.support.v4.view.ViewPager
      android:id="@+id/pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/theme_primary_dark"
      android:fitsSystemWindows="true" />

</RelativeLayout>

Try hierarchy-viewer or ViewInspector. These tools might help you.

score 5 · Answer 11 · answered Apr 17 '17 at 21:10

5

Just remove following tag from style v21 @android:color/transparent

This works for me.

answered Apr 17 '17 at 21:10

Shendre Kiran

157
2
8

@android:color/transparent is not a "tag". It may be the value of a style attribute, but it is not a "tag". What if the OP has this value defined more than once? Which one should he remove? Your answer is far too generic. – protectedmember Jun 22 '17 at 15:18
yeah, it was the case for me too.. thank you, Shendre! :) and for your comment, @protectedmember - the OS has no gender. – zeroDivider Jan 04 '19 at 16:08

score 5 · Answer 12 · answered Nov 09 '19 at 09:32

5

I have found solution for this -

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:windowLightStatusBar">true</item>
</style>

add this into your style and it will work for api 21 or above.

answered Nov 09 '19 at 09:32

being_sohelkhan

141
2
11

score 3 · Answer 13 · answered Mar 15 '17 at 10:58

Better approach

Check your style.xml file where your NoActionBar theme is there. Make sure its has parent as Theme.AppCompat.NoActionBar and also customize it by adding your color scheme. Finally set your themes in manifest as required.

Below is sample of my styles.xml file (ActionBar + NoActionBar).

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<!-- No ActionBar application theme. -->
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

score 3 · Answer 14 · answered Apr 18 '18 at 18:37

For styles v23

 <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:statusBarColor">@android:color/white</item>
</style>

For styles v21

<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:statusBarColor">@android:color/white</item>
</style>

score 3 · Answer 15 · answered Aug 18 '18 at 19:58

If your v21/styles.xml contain

<resources>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

Then, Remove or comment below line or change colour of status bar,

<item name="android:statusBarColor">@android:color/transparent</item>

Its working fine. Hope this is helpful. Thanks.

score 2 · Answer 16 · answered May 23 '16 at 09:17

For me it worked by doing the following :

Set the theme .NoActionBar
Wrap the Toolbar in android.support.design.widget.AppBarLayout
Make android.support.design.widget.CoordinatorLayout as the parent layout.

Essentially it is the third step that draws the status bar in the colorPrimaryDark otherwise it is not drawn if you using NoActionBar theme. 2nd step will give your toolbar that overlay.

score 2 · Answer 17 · answered Jun 11 '18 at 06:17

[ Output]

Expand res -> values -> styles directory from project panel.

Open styles.xml (v21)

USE ANY ONE FROM BELOW WAYS

Change true to false in android:windowDrawsSystemBarBackgrounds property.
Change @android:color/transparent to @color/colorPrimaryDark in android:statusBarColor property.
Remove the android:statusBarColor propert line.

score 1 · Answer 18 · answered Oct 30 '16 at 21:33

I'm not sure if it's late but i hope it helps someone. * Make a fake view with transparent background that fits the layout, and make a coordinatorlayout as your root layout element.

<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true" />


<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:scaleType="centerCrop"
    android:src="@drawable/something" />

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   .... YOUR LAYOUT

score 1 · Answer 19 · edited Oct 11 '20 at 03:12

1

you want this right?

try this. in [value] - [style.xml]

<style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
    <item name="android:windowLightStatusBar">true</item>
</style>

you know, don't match apptheme - parent

good luck

edited Oct 11 '20 at 03:12

Unheilig

16,196
193
68
98

answered Oct 10 '20 at 17:40

KiwanPark

11
1

score 1 · Answer 20 · edited Dec 10 '20 at 01:57

1

Inside onCreate add the following:

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
       getWindow().setStatusBarColor(Color.WHITE);

and below

 setContentView(R.layout.activity_main);

edited Dec 10 '20 at 01:57

Don

3,876
10
47
76

answered Dec 09 '20 at 21:50

Monirul Islam Prince

19
5

score 0 · Answer 21 · answered Oct 05 '15 at 21:21

0

My guess is that this is caused by your android:windowBackground. Is @color/background_material_light a reference to white?

answered Oct 05 '15 at 21:21

hanspeide

2,819
4
25
33

Nope. It's definitely not white but thanks anyway! (You can see the white icons on it.) – pt2121 Oct 05 '15 at 21:27
I misread your question. Try replacing `@android:color/transparent` with `@null`. – hanspeide Oct 05 '15 at 21:35
Just to make sure I understand you correctly, do you want the image to be shown behind the status bar? – hanspeide Oct 06 '15 at 07:54

score 0 · Answer 22 · edited May 23 '17 at 12:34

Check this Toolbar turns white - AppBar isn't drawn after being scrolled off screen

https://code.google.com/p/android/issues/detail?id=178037#c19

I'm using libraries 23.0.0. and the bug still occurs.

Workaround for this is adding View that takes nearly no space and can be invisible. See the structure below.

<android.support.v4.widget.NestedScrollView
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.Toolbar
        app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
        app:layout_scrollFlags="scroll|enterAlways" />

    <View
        android:layout_width="match_parent"
        android:layout_height=".3dp"
        android:visibility="visible"/>

</android.support.design.widget.AppBarLayout>

This Questions on Stackoverflow.com refer to this bug too: CoordinatorLayout Toolbar invisible on enter until full height AppBarLayout - Layout sometimes invisible once it enters view (even if it's not entered)

it's not the same bug. in my case, it's white right after activity shows not after being scrolled off screen. thanks anyway — pt2121, Nov 18 '15 at 02:01

score 0 · Answer 23 · answered Aug 13 '18 at 02:39

If you are using RelativeLayout / CoordinatorLayout this is the solution that worked for me:

You have to use

CoordinatorLayout
AppBarLayout

Rember to use CoordinatorLayout instead of RelativeLayout (the performance is better and perfectly works with AppBarLayout)

This is how your fragment should starts

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_light"
android:fitsSystemWindows="true"
>

<android.support.design.widget.AppBarLayout
    android:id="@+id/main.appbar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true"
    >
    ...

Good coding!

score 0 · Answer 24 · answered Jan 14 '20 at 06:19

 <style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

add the 'windowTranslucentStatus' item in styles

score 0 · Answer 25 · answered Apr 06 '20 at 12:45

0

Add this in your style.xml

<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>

Note : Status bar coloring is not supported below API level 21.

answered Apr 06 '20 at 12:45

Raviraj

906
9
14

score -1 · Answer 26 · answered Nov 25 '19 at 13:53

-1

    Window window = this.getWindow();
    window.setStatusBarColor(this.getResources().getColor(R.color.colorPrimaryDark));

Add this 2 line in java file below

answered Nov 25 '19 at 13:53

nitin kapsikar

1

1

Welcome to Stack Overflow. Could you please elaborate how your piece of code works and how it helps solving OPs Question? Please refer to [how to write a good answer](https://stackoverflow.com/help/how-to-answer) to improve your answer – Tom M Nov 25 '19 at 14:02

Status bar turns white and does not show content behind it

26 Answers26

Linked