Material-components-android: [StatusBar] Status bar not respecting primary color in light theme

Created on 6 Dec 2019  路  3Comments  路  Source: material-components/material-components-android

Description:
I am overriding Theme.MaterialComponents.DayNight, and I set colorPrimary like this:

<item name="colorPrimary">@color/colorPrimary</item>

Every material components respect this, including the top action bar. But the status bar is still in the default purple accent color, like this:

Screen Shot 2019-12-06 at 4 46 44 PM

I tried to manually override android:statusBarColor like:

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

It solved the problem:

Screen Shot 2019-12-06 at 4 45 34 PM

However, when I switch to dark theme, the color remains:

Screen Shot 2019-12-06 at 4 50 17 PM

I had searched through the entire project to see if there are any color strings that correspond to the default purple accent color, but I didn't find any.

Is this an expected behavior? Or should this be handled automatically by the parent theme, i.e. DayNight theme?

Expected behavior:
The status bar should behave like this in light theme:

Screen Shot 2019-12-06 at 4 45 34 PM

and like this in dark theme:

Screen Shot 2019-12-06 at 4 54 09 PM

Source code:

styles.xml:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryVariant">@color/colorPrimaryVariant</item>
    <item name="colorSecondaryVariant">@color/colorSecondary</item>
    <item name="colorSecondary">@color/colorSecondaryVariant</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

colors.xml:

<resources>
    <color name="colorPrimary">#ff5722</color>
    <color name="colorPrimaryVariant">#c41c00</color>
    <color name="colorSecondaryVariant">#03a9f4</color>
    <color name="colorSecondary">#67daff</color>
</resources>

Android API version: 29

Material Library version: 1.2.0-alpha02

Device: Android Emulator: Nexus 5X API 29 x86

bug

Most helpful comment

Do I have to override both the light and dark theme? I'm using the DayNight theme which respects system theme but there's no separate attributes for light and dark status bar for me to override.

All 3 comments

Same issue occurs when DayNight.NoActionBar is overriden. I would expect the status bar color to be transparnt instead of the default purple accent color.

0) create a color resource for your status bar color and point to whatever color you desire in light and dark theme

1) either:
a) @color/your resource color name
OR
b) @color/your resource color name

Do I have to override both the light and dark theme? I'm using the DayNight theme which respects system theme but there's no separate attributes for light and dark status bar for me to override.

Was this page helpful?
0 / 5 - 0 ratings