Android theming: Set Status Bar color to Action Bar color in Material3

Question

I am migrating my app's Material Design theme from V2 (1.4.0) to V3 (1.5.0).

Unlike Theme.MaterialComponents.DayNight, which had a DarkActionBar sub style that used the Primary color for the Action Bar, Theme.Material3.DayNight doesn't have DarkActionBar sub style.

I can't figure out what color is used for the Action Bar in the default settings.

This is how my current app theme shows up:

As can be seen, my Primary color is Blue, but the Action Bar has automatically been colored using a shade/alpha of the primary. The hexadecimal color notation of the Action Bar was not defined by me. I tried setting the Status Bar to all the various shades of blue that I defined in my colors.xml file, but none of them are a perfect match.

Can someone explain how is the Action Bar color determined or how I may be able to set the Status Bar to the same color as the Action Bar?

colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#000000</color>
    <color name="white">#ffffff</color>

    <color name="black_alpha_020">#33000000</color>
    <color name="white_alpha_060">#99ffffff</color>

    <color name="blue_50">#e3f2fd</color>
    <color name="blue_50_bit_black">#E4F0F5</color>
    <color name="blue_100">#bbdefb</color>
    <color name="blue_300">#64b5f6</color>
    <color name="blue_500">#2196f3</color>
    <color name="blue_700">#1976d2</color>
    <color name="blue_a100">#82b1ff</color>

    <color name="blue_black_3_3">#072451</color>
    <color name="blue_black_3_3_bit_black">#031228</color>
    <color name="blue_white_5_6">#fafdff</color>
    <color name="blue_black_5_6">#061929</color>
    <color name="blue_black_10_2">#CEDCE6</color>
    <color name="blue500_black_5_6">#26282A</color>

    <color name="blue_50_alpha_060">#99e3f2fd</color>

    <color name="blue_grey_700">#455a64</color>
    <color name="blue_grey_800">#37474f</color>

    <color name="amber_100">#ffecb3</color>
    <color name="amber_700">#ffa000</color>
    <color name="amber_black_3_4">#401C00</color>

    <color name="red_50">#ffebee</color>
    <color name="red_black_2_3">#3D0909</color>
    <color name="red_900">#b71c1c</color>

    <color name="grey_600">#757575</color>

</resources>

themes.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.SimpleTheme" parent="Theme.Material3.DayNight">
        <!--Color-->
        <item name="colorPrimary">@color/blue_500</item>
        <item name="colorOnPrimary">@color/white</item>
        <item name="colorPrimaryContainer">@color/blue_50</item>
        <item name="colorOnPrimaryContainer">@color/blue_black_3_3</item>

        <item name="colorSecondary">@color/blue_grey_800</item>
        <item name="colorOnSecondary">@color/white</item>
        <item name="colorSecondaryContainer">@color/blue_50_bit_black</item>
        <item name="colorOnSecondaryContainer">@color/blue_black_3_3_bit_black</item>

        <item name="colorTertiary">@color/amber_700</item>
        <item name="colorOnTertiary">@color/white</item>
        <item name="colorTertiaryContainer">@color/amber_100</item>
        <item name="colorOnTertiaryContainer">@color/amber_black_3_4</item>

        <item name="colorError">@color/red_900</item>
        <item name="colorOnError">@color/white</item>
        <item name="colorErrorContainer">@color/red_50</item>
        <item name="colorOnErrorContainer">@color/red_black_2_3</item>

        <item name="android:colorBackground">@color/blue_white_5_6</item>
        <item name="colorOnBackground">@color/blue_black_5_6</item>
        <item name="colorSurface">@color/blue_white_5_6</item>
        <item name="colorOnSurface">@color/blue_black_5_6</item>

        <item name="colorSurfaceVariant">@color/blue_black_10_2</item>
        <item name="colorOnSurfaceVariant">@color/blue500_black_5_6</item>
        <item name="colorOutline">@color/grey_600</item>

        <item name="colorSurfaceInverse">@color/blue_black_5_6</item>
        <item name="colorOnSurfaceInverse">@color/blue_white_5_6</item>
        <item name="colorPrimaryInverse">@color/blue_a100</item>

        <item name="android:navigationBarColor" tools:targetApi="o_mr1">?attr/colorSurface</item>
        <item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
    </style>

    <style name="Theme.SimpleTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

Feckless

Answer 1

Make your status bar transparent:

themes.xml

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

themes.xml (night)

<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLightStatusBar">false</item>

Edit your activity_main.xml file like below sample code:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        ...
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        ...>

        <com.google.android.material.MaterialToolbar
        ...
        />

    </com.google.android.material.appbar.AppBarLayout>
    ...
</androidx.coordinatorlayout.widget.CoordinatorLayout>

For more information, check this doc: https://m3.material.io/components/top-app-bar/implementation/android#collapsing-top-app-bars

Kozloski

Doc page cannot be found – Hollenbeck

@Hollenbeck Github doc: github.com/material-components/material-components-android/blob/… – Kathleenkathlene

This is the only right answer on this whole page. – Cocktail

Answer 2

Using SurfaceColors class

The color of the Action Bar is colorSurface with elevation.

If you want to change the color of the Status Bar. Using SurfaceColors class. This function also works with Dynamic Coloring in Material 3 and day/night mode.

Code in Kotlin

val color = SurfaceColors.SURFACE_2.getColor(this)
window.statusBarColor = color // Set color of system statusBar same as ActionBar
window.navigationBarColor = color // Set color of system navigationBar same as BottomNavigationView

Result Thanks

Mint

Shouldn't the status bar in Material 3 have colorSurface, i.e. SURFACE_0? Examples show that the color of the status bar should obviously be identical to the one of the top app bar (SURFACE_0, i.e. colorSurface, unless scrolling): m3.material.io/components/top-app-bar/specs – Ladylike

@Patrick. There are two ways to implement top app bars: ActionBar and Toolbar. My answer is based on the default ActionBar. You can see there is a little shadow under the app bars. And your comment is based on Toolbar. Which need manually set and add. We were both right. Here is the link to the difference between these. developer.android.com/training/appbar/setting-up – Mint

For java use getWindow().setStatusBarColor(SurfaceColors.SURFACE_2.getColor(this)); and also set <item name="android:windowLightStatusBar">true</item> for themes.xml and <item name="android:windowLightStatusBar">false</item> for themes.xml (night) – Compositor

Answer 3

What worked for me was to do the following in themes.xml.

This worked for both light and dark themes:

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowLightStatusBar">true</item>

Cymbal

Answer 4

this worked wor me.

Add this item to your style in the theme.xml file:

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

Screech

Don't forget dark theme if you have one. – Euchromatin

Answer 5

I override the action bar styles in my theme:

<style name="Base.Theme.BusyAllInOneShopping" parent="Theme.Material3.DayNight">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryVariant">@color/primary_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/accent</item>
        <item name="colorSecondaryVariant">@color/accent_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" >?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="actionBarTheme">@style/ThemeOverlay.MaterialComponents.Dark.ActionBar</item>
        <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents.Light</item>
        <item name="actionBarStyle">@style/Widget.MaterialComponents.Light.ActionBar.Solid</item>
        <item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item>
    </style>

When I hover "Theme.MaterialComponents.DayNight.DarkActionBar" in themes.xml of my previous project, it shows the default styles

Fortification

Answer 6

theme.xml(no-night):

<style name="Theme.AllCodeApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
     <item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
         <item name="actionBarStyle">
            @style/MyActionBarDarkStyle
        </item>
</style>
<style name="MyActionBarDarkStyle" parent="Widget.MaterialComponents.ActionBar.Primary">
        <item name="backgroundColor">@color/white</item>
 </style>

theme.xml(night):

<style name="Theme.AllCodeApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="android:statusBarColor" tools:targetApi="l">@color/teal_200</item>
        <item name="actionBarStyle">
            @style/MyActionBarDarkStyle
        </item>
</style>
<style name="MyActionBarDarkStyle" parent="Widget.MaterialComponents.ActionBar.Primary">
        <item name="backgroundColor">@color/teal_200</item>
</style>

Centralize

I know how to set a colour. I need to figure out what colour is set automatically for the action bar and preferably set the status bar colour using attributes – Feckless

ok got it my code is update check it – Centralize

I am actually using Material V3 (Theme.Material3) not V2 (Theme.MaterialComponents). The parent themes that you had in your code don't exist anymore. I tried something similar to what you had in your code though, and it didn't work. Setting textColor and titleTextColor didn't change the Action Bar style either. Wonder if it is a bug. – Feckless

send me your theme light and dark file – Centralize

tomorrow i will see. today my exam – Centralize

Answer 7

The parent theme what you are using has an attribute colorSurface and this attribute is responsible for the background color of the action bar. But in material3 , primary colored elevation are applied to surface color to create a mixed color . Refer this link below and read the section Using Surface Colors carefully , you'll get your answer. Here is the link.

As that color is generated dynamically, you can set the the status bar color for your app dynamically using SurfaceColors Api .

In java getWindow().setStatusBarColor(SurfaceColors.SURFACE_5.getColor(this));

I have used enum SURFACE_5 above for example purpose , you can use different enums from SURFACE_0 to SURFACE-5 , to get the desired color.

Hospodar