Android: Status Bar is White

Question

For some reason, the status bar is now white. Or rather, an off white, with another shade of white for the icons faintly visible against the bright background. Which is wrong, because my appbarlayout uses a blue shade as its color. Up until now, this has been working fine, I don't know what I did to cause this. I've tried manually setting the statusBarColor to colorPrimaryDark (#0277bd), but it's not working.

I just don't know why this is happening in the first place. I'm pasting my activity's layout.xml, maybe someone can clue me in to what I'm doing wrong here.

A few notes:

The themes used haven't been changed from their defaults, which are to use the primary color settings. I changed those to the right shade of blue that I wanted, but when I did that change everything was working.

My layout.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:statusBarColor="@color/colorPrimaryDark"
    tools:context=".activities.ContactsActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/contactsActivityAppbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:statusBarColor="@color/colorPrimaryDark"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/contactsActivityToolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>
        <!-- app:layout_scrollFlags="scroll|enterAlways" -->

        <android.support.design.widget.TabLayout
            android:id="@+id/contactsActivityTabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@android:color/white"
            android:scrollbarStyle="insideOverlay"
            android:paddingBottom="1dp"
            android:background="@color/colorPrimary"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/contactsTabsViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#0288d1</color>
    <color name="colorPrimaryDark">#0277bd</color>
    <color name="colorAccent">#FF4081</color>
</resources>

styles.xml

<resources>

    <!-- 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>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

Edit: Ok, found an interesting solution, really want to understand it, not just rely on it. Also, it might not be the best answer long term.

Anyway, to the base application theme (AppTheme) in styles.xml, I added the following line:

<item name="android:windowBackground">@color/colorPrimaryDark</item>

It worked, it made the background of everything that I didn't specifically assign a color that color. But it also made the status bar that color, so I went through and added my own backgrounds to other things to fix them.

I feel like this isn't the ideal solution, though, and would just like more feedback in general. Also, even without this line before, it was coloring the status bar just fine. I have no idea what I did to break it in the first place.

Thanks.

Edit: Here is the activity code. Thanks.

import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

import io.craigmiller160.contacts5.R;
import io.craigmiller160.contacts5.fragments.ContactsGroupsFragmentPage;
import io.craigmiller160.contacts5.fragments.ContactsListFragmentPage;
import io.craigmiller160.contacts5.fragments.ContactsTabsPagerAdapter;

public class ContactsActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_contacts);

        Toolbar toolbar = (Toolbar) findViewById(R.id.contactsActivityToolbar);
        setSupportActionBar(toolbar);

        ViewPager viewPager = (ViewPager) findViewById(R.id.contactsTabsViewPager);

        ContactsTabsPagerAdapter adapter = new ContactsTabsPagerAdapter(getSupportFragmentManager());
        adapter.addFragmentPage(new ContactsListFragmentPage(), "Contacts");
        adapter.addFragmentPage(new ContactsGroupsFragmentPage(), "Groups");
        viewPager.setAdapter(adapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.contactsActivityTabs);
        tabLayout.setupWithViewPager(viewPager);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.displaySettings) {
            Intent intent = new Intent(this, DisplaySettingsActivity.class);
            startActivity(intent);
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Just curious. Your Activity extends AppCompatActivity, right? — David Heisnam, Jan 24 '16 at 19:16
Could you post your Manifest and Activity code too? Also, you should remove `android:statusBarColor="@color/colorPrimaryDark" ` from your layout xml. — David Heisnam, Jan 24 '16 at 19:19
`android:fitsSystemWindows="true"` is suspicious. It is used for drawing the Activity or components under the statusbar, done in combination with a transparent statusbar. If you've copied parts of the code from somewhere, you might have missed something that is causing your issue. So, as I said, please post your Activity code, or at least just the parts you think are relevant. — David Heisnam, Jan 24 '16 at 19:31

score 52 · Answer 1 · answered Sep 24 '16 at 22:32

52

<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

answered Sep 24 '16 at 22:32

Idee

1,887
21
31

score 9 · Answer 2 · answered Nov 24 '16 at 11:43

9

You can achieve by this. Go to your style.xml(v21) and just change the color

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

I hope this will solve your issue.

answered Nov 24 '16 at 11:43

Hakim Khan

317
5
9

if that worked for you then mark it correct so that it can help other also. – Hakim Khan Nov 25 '16 at 11:26

eoinzy · Answer 3 · 2016-02-03T10:49:37.343

Try this as your XML.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".activities.ContactsActivity">

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

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

        <android.support.design.widget.TabLayout
            android:id="@+id/contactsActivityTabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@android:color/white"
            android:scrollbarStyle="insideOverlay"
            android:paddingBottom="1dp"
            android:background="?attr/colorPrimary"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/contactsTabsViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

I think you may have set the theme multiple times and its confusing itself.

If everything is done right, the Status bar will get its colour from colorPrimaryDark.

score 1 · Answer 4 · edited Mar 03 '18 at 20:27

I can't say that I've looked into this in any great detail, but none of the other answers have suggested "windowDrawsSystemBarBackgrounds" - which seems to work without needing to set the status bar colors explicitly. Thus, values-v21/styles.xml:

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

score 1 · Answer 5 · answered Feb 05 '18 at 18:37

In styles.xml,

Replace this:

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

with:

<style name="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>

And make respective changes in Manifest.xml

score 0 · Answer 6 · answered Feb 03 '16 at 10:45

I had this exact problem. I fixed it by changing the app theme to extend the NoActionBar AppCompat style:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:windowBackground">@color/alabaster</item>
</style>

My activity layout is:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="MergeRootFrame">

<android.widget.RelativeLayout
    android:id="@+id/chat_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    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:layout_scrollFlags="scroll|enterAlways|snap"
        app:popupTheme="@style/AppTheme.PopupOverlay">

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

Where the RelativeLayout holds a Fragment which just has a RecyclerView inside a RelativeLayout. So remove the android:statusBarColor="@color/colorPrimaryDark" and fitSystemWindow xml lines and change your theme and I think that should work.

score 0 · Answer 7 · answered Jul 12 '19 at 04:23

To achieve this in any activity

Add the style:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowBackground">@android:color/white</item>
</style>

Use CoordinatorLayout as root layout in XML for Activity
In oncreate() method, before setcontentview use

window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

Android: Status Bar is White

7 Answers7

Linked