CODEWITHSUNDEEP
android
craigmiller160
craigmiller160

Reputation: 6263

Android: Status Bar is White

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

Upvotes: 19

Views: 23352

Answers (7)

Kishan Solanki
Kishan Solanki

Reputation: 14618

enter image description here

To achieve this in any activity

  1. 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>

  1. Use CoordinatorLayout as root layout in XML for Activity

  2. In oncreate() method, before setcontentview use

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

Upvotes: 0

mayfly
mayfly

Reputation: 151

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>

Upvotes: 1

ParthHingorani
ParthHingorani

Reputation: 11

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

Upvotes: 1

Hakim Khan
Hakim Khan

Reputation: 317

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.

Upvotes: 9

Idee
Idee

Reputation: 1967

<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

Upvotes: 52

eoinzy
eoinzy

Reputation: 2242

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.

Upvotes: 2

ryanjohn
ryanjohn

Reputation: 86

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.

Upvotes: 0

Related Questions