CODEWITHSUNDEEP
androidandroid-support-libraryandroid-appcompatandroiddesignsupportandroid-6.0-marshmallow
pt2121
pt2121

Reputation: 11870

Status bar turns white and does not show content behind it

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>

enter image description here

Upvotes: 101

Views: 78467

Answers (27)

Canturk Karabulut
Canturk Karabulut

Reputation: 136

<item name="android:statusBarColor">@color/white</item>
<item name="android:windowLightStatusBar">true</item>

When you do this, the time etc. appears on the white status bar. Or you can also give it a transparent color.

Upvotes: 1

Monirul Islam Prince
Monirul Islam Prince

Reputation: 25

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);

Upvotes: 1

KiwanPark
KiwanPark

Reputation: 11

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

Upvotes: 1

Raviraj
Raviraj

Reputation: 926

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.

Upvotes: 1

S Kranthi Kumar
S Kranthi Kumar

Reputation: 750

 <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

Upvotes: 0

nitin kapsikar
nitin kapsikar

Reputation: 1

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

Add this 2 line in java file below

Upvotes: -1

Degomos
Degomos

Reputation: 91

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>

Upvotes: 9

being_sohelkhan
being_sohelkhan

Reputation: 141

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.

Upvotes: 5

Andres Paez
Andres Paez

Reputation: 370

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

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

Upvotes: 23

Phares
Phares

Reputation: 1028

<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

Upvotes: 7

sahu
sahu

Reputation: 1238

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.

Upvotes: 3

Faustino Gagneten
Faustino Gagneten

Reputation: 2774

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!

Upvotes: 0

Ketan Ramani
Ketan Ramani

Reputation: 5763

[Output]

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

Open styles.xml (v21)

USE ANY ONE FROM BELOW WAYS

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

Upvotes: 2

Ankit Aman
Ankit Aman

Reputation: 1009

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>

Upvotes: 3

Shrini Jaiswal
Shrini Jaiswal

Reputation: 1090

 <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

Upvotes: 19

Shendre Kiran
Shendre Kiran

Reputation: 157

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

This works for me.

Upvotes: 5

Nilesh Mahant
Nilesh Mahant

Reputation: 35

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>

Upvotes: 3

Rami
Rami

Reputation: 158

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>

Upvotes: 10

vahidlazio
vahidlazio

Reputation: 309

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

Upvotes: 1

Phoenix Wang
Phoenix Wang

Reputation: 2357

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.

Upvotes: 171

priyankvex
priyankvex

Reputation: 6040

For me it worked by doing the following :

  1. Set the theme .NoActionBar
  2. Wrap the Toolbar in android.support.design.widget.AppBarLayout
  3. 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.

Upvotes: 2

Mauro Banze
Mauro Banze

Reputation: 2248

(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

Upvotes: 99

James Britton
James Britton

Reputation: 412

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.

Upvotes: 9

pt2121
pt2121

Reputation: 11870

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.

Upvotes: 5

clickdroid
clickdroid

Reputation: 1

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)

Upvotes: 0

user340145
user340145

Reputation:

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

Upvotes: 0

Michele Lacorte
Michele Lacorte

Reputation: 5363

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);

Upvotes: 12

Related Questions