Theming the top app bar and contextual action bar with custom colors not working in Material 3 It is a bug?

Question

Update

After I created a new project with a Material 3 theme and I tried to change the top app bar and contextual action bar I can confirm it's a bug, I've opened issue here please star it or vote +1 to pay attention to it and solve it as soon as possible

Theming the top app bar

I followed the instruction in this link to apply a custom theme on all toolbar and contextual action bar in my app, but it's not working at all it's always be white color on light mode and dark in night mode, tested on material version implementation the following versions

implementation ('com.google.android.material:material:1.6.1') and implementation ('com.google.android.material:material:1.8.0-alpha01') android 11 and above

let's start with my colors light version

<color name="primaryColor">#1aae66</color>
<color name="primaryLightColor">#5ee194</color>
<color name="primaryDarkColor">#007d3a</color>

<color name="secondaryColor">#1de9b6</color>
<color name="secondaryLightColor">#6effe8</color>
<color name="secondaryDarkColor">#00b686</color>

<color name="primaryTextColor">@color/white</color>
<color name="secondaryTextColor">#000000</color>

colors night

 <color name="primaryColor" tools:ignore="MissingDefaultResource">@color/darker</color>
    <color name="primaryLightColor" tools:ignore="MissingDefaultResource">@color/darkGray</color>
    <color name="primaryDarkColor" tools:ignore="MissingDefaultResource">@color/black</color>

    <color name="secondaryColor" tools:ignore="MissingDefaultResource">#4db6ac</color>
    <color name="secondaryLightColor" tools:ignore="MissingDefaultResource">#82e9de</color>
    <color name="secondaryDarkColor" tools:ignore="MissingDefaultResource">#00867d</color>

theme.xml (light version)

<resources>
    <!-- Base application theme. -->
    <style name="Theme.DummyAppKotlin" parent="Theme.Material3.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/primaryDarkColor</item>
        <item name="colorOnPrimary">@color/primaryTextColor</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/secondaryColor</item>
        <item name="colorSecondaryVariant">@color/secondaryDarkColor</item>
        <item name="colorOnSecondary">@color/secondaryTextColor</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">@color/primaryDarkColor</item>
        <!-- Customize your theme here. -->
        <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="actionModeBackground">@color/contextualActionBarColor</item>
        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>
        <item name="popupMenuBackground">@color/primaryColor</item>

    </style>

    <style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>


    </style>

    <style name="ThemeOverlay.App.Toolbar" parent="">
        <item name="colorSurface">@color/primaryColor</item>
        <item name="colorOnSurface">@color/primaryDarkColor</item>
    </style>

theme.xml (night version)

<resources>
    <!-- Base application theme. -->
    <style name="Theme.DummyAppKotlin" parent="Theme.Material3.Dark.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/primaryDarkColor</item>
        <item name="colorOnPrimary">@color/primaryTextColor</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/secondaryColor</item>
        <item name="colorSecondaryVariant">@color/secondaryDarkColor</item>
        <item name="colorOnSecondary">@color/secondaryTextColor</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">@color/primaryDarkColor</item>
        <!-- Customize your theme here. -->
        <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="actionModeBackground">@color/contextualActionBarColor</item>
        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>
        <item name="popupMenuBackground">@color/primaryColor</item>

    </style>

    <style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>


    </style>

    <style name="ThemeOverlay.App.Toolbar" parent="">
        <item name="colorSurface">@color/primaryColor</item>
        <item name="colorOnSurface">@color/primaryDarkColor</item>
    </style>

There is only one way that works to change the toolbar color, is to set my custom theme to AppBarLayout the attribute style="@style/Widget.App.Toolbar" is ignored in toolbar and applied with AppBarLayout

here's example

 <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:liftOnScroll="true">

             <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                style="@style/Widget.App.Toolbar" =============> This won't work
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:title="Post details" />

        </com.google.android.material.appbar.AppBarLayout>

The Second Problem

in Contextual Action Mode/Bar was when I tried to override its colors with the attributes actionModeBackground

<item name="actionModeBackground">@color/contextualActionBarColor</item>

it should be my dark black color but it's notworking/ignored, the other attribute actionModeTheme with <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item> it uses the main primary color green for action bar

This example of the contextual action bar of (material 3)

This example of the contextual action bar of (material 2) before I updated to material 3

score 0 · Answer 1 · answered Oct 08 '22 at 08:05

0

I've checked the bug and tried to create new project to confirm it, it's seems google ignored the material android section, anyway if you need to work with material 3 you can use style="@style/Widget.App.Toolbar" and put it into AppBarLayout and make the other theme for contextual action bar, other suggest is to keep tour app in material 2 untill this bug is fixed

answered Oct 08 '22 at 08:05

Nerd Girl

87
8

thanks for your suggestion, I'll keep the app with material 2 until this bug is fixed – Dr Mido Oct 08 '22 at 09:04

score 0 · Answer 2 · answered Jun 04 '23 at 20:05

Disclaimer: This answer targets the second problem (Contextual Action)

in Contextual Action Mode/Bar was when I tried to override its colors with the attributes actionModeBackground
name="actionModeBackground">@color/contextualActionBarColor</item>
it should be my dark black color but it's notworking/ignored, the other attribute actionModeTheme with <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>

it uses the main primary color green for action bar

You can use the actionModeStyle style attribute to set a custom style to the Action Mode,

To change the background use the background attribute:

<style name="Theme.DummyAppKotlin" parent="Theme.Material3.Dark.NoActionBar">
    ...
    <item name="actionModeStyle">@style/action_mode_style</item>    

</style>

<style name="action_mode_style" parent="@style/Widget.Material3.ActionMode">
    <item name="background">@color/contextualActionBarColor</item>
</style>

Theming the top app bar and contextual action bar with custom colors not working in Material 3 It is a bug?

Update