Material 3 materialThemeOverlay produces bright pink button with no theme

Question

I am migrating from M2 to M3 and my basic materialThemeOverlay no longer works. I follow the code at the bottom of the doc closely, it matched pretty much what I had for M2:

styles.xml

<style name="SecondaryThemeOverlay" parent="">
    <item name="colorPrimary">@color/md_theme_light_secondary</item>
    <item name="colorOnPrimary">@color/md_theme_light_onSecondary</item>
</style>

<style name="Widget.Button.Secondary" parent="Widget.Material3.Button">
    <item name="materialThemeOverlay">@style/SecondaryThemeOverlay</item>
</style>

layout.xml:

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Standard Button" />

<Button
  style="@style/Widget.Button.Secondary"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Standard Button Secondary" />

lib version is com.google.android.material:material:1.6.0-beta01, and the Activity is an AppCompatActivity.

App theme parent is Theme.Material3.DayNight.NoActionBar.

Also note that setting the backgroundTint works fine.

Answer 1

You should use ThemeOverlay on materialThemeOverlay like this.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Button style on both light and night mode -->
    <style name="AppButtonStyle" parent="Widget.Material3.Button">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button</item>
        <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.App.SmallComponent</item>
    </style>

    <!-- Button with text style on both light and night mode -->
    <style name="AppButtonTextStyle" parent="Widget.Material3.Button.TextButton">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.TextButton</item>
        <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.App.SmallComponent</item>
    </style>

    <!-- Button outline style on both light and night mode -->
    <style name="AppOutlinedButtonStyle" parent="Widget.Material3.Button.OutlinedButton">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.OutlinedButton</item>
        <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.App.SmallComponent</item>
    </style>

    <style name="ThemeOverlay.App.Button" parent="ThemeOverlay.Material3.Button">
        <!-- Background color -->
        <item name="colorPrimary">@color/primaryDarkAccent</item>
        <!-- Text color -->
        <item name="colorOnPrimary">@android:color/white</item>
    </style>

    <style name="ThemeOverlay.App.Button.TextButton" parent="ThemeOverlay.Material3.Button.TextButton">
        <!-- Background color -->
        <item name="colorPrimary">@color/primaryDarkAccent</item>
        <!-- Text color -->
        <item name="colorOnSurface">@android:color/white</item>
    </style>

    <style name="ThemeOverlay.App.Button.OutlinedButton" parent="ThemeOverlay.Material3.Button">
        <!-- Background color -->
        <item name="colorOnSurface">@color/primaryDarkAccent</item>
        <!-- Text color -->
        <item name="colorPrimary">@color/primaryDarkAccent</item>
    </style>

    <style name="TextAppearance.App.Button" parent="TextAppearance.Material3.LabelLarge">
        <item name="fontFamily">sans-serif-medium</item>
        <item name="android:fontFamily">sans-serif-medium</item>
    </style>
</resources>

Use it like this in you main theme.

<item name="materialButtonStyle">@style/AppButtonStyle</item>

Unfortunately the sample in the documentation seems incorrect as always.