Status bar turns white and does not show content behind it
AndroidAndroid Support-LibraryAndroid AppcompatAndroiddesignsupportAndroid 6.0-MarshmallowAndroid Problem Overview
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 (https://stackoverflow.com/questions/28289477/transparent-status-bar-not-working-with-windowtranslucentnavigation-false, https://stackoverflow.com/questions/27856603/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>
Android Solutions
Solution 1 - Android
I found the answer in this link:https://stackoverflow.com/questions/37454733/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.
Solution 2 - Android
(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
Solution 3 - Android
You have to add this property on your style to see the content
<item name="android:windowLightStatusBar" tools:ignore="NewApi">true</item>
Solution 4 - Android
<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
Solution 5 - Android
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);
Solution 6 - Android
Just put this item in your v21\styles.xml :
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>
Solution 7 - Android
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.
Solution 8 - Android
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>
Solution 9 - Android
<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
Solution 10 - Android
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.
Solution 11 - Android
Just remove following tag from style v21
This works for me.
Solution 12 - Android
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.
Solution 13 - Android
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>
Solution 14 - Android
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>
Solution 15 - Android
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.
Solution 16 - Android
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.
Solution 17 - Android
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.
Solution 18 - Android
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
Solution 19 - Android
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
Solution 20 - Android
My guess is that this is caused by your android:windowBackground
. Is @color/background_material_light
a reference to white?
Solution 21 - Android
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: https://stackoverflow.com/questions/30895579/coordinatorlayout-toolbar-invisible-on-enter-until-full-height https://stackoverflow.com/questions/31084658/appbarlayout-layout-sometimes-invisible-once-it-enters-view-even-if-its-not
Solution 22 - Android
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!
Solution 23 - Android
<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
Solution 24 - Android
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.
Solution 25 - Android
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);
Solution 26 - Android
Window window = this.getWindow();
window.setStatusBarColor(this.getResources().getColor(R.color.colorPrimaryDark));
Add this 2 line in java file below