CODEWITHSUNDEEP
androidmaterial-designandroid-theme
Shahid Thaika
Shahid Thaika

Reputation: 2305

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

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:

App screenshot

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>

Upvotes: 23

Views: 25600

Answers (7)

blackorbs
blackorbs

Reputation: 625

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 enter image description here

Upvotes: 1

Adri&#225;n-Cu&#233;llar
Adri&#225;n-Cu&#233;llar

Reputation: 139

this worked wor me.

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

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

Upvotes: 3

dessalines
dessalines

Reputation: 7362

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>

Upvotes: 2

Swagat Ranjan Das
Swagat Ranjan Das

Reputation: 101

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.

Upvotes: 0

FM1024
FM1024

Reputation: 213

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 enter image description here Thanks

Upvotes: 15

Atakan Yıldırım
Atakan Yıldırım

Reputation: 882

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

Upvotes: 22

Meet
Meet

Reputation: 915

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>

Upvotes: 0

Related Questions