Android material button taking color primary instead of color accent

Issue

I have my layout button as -

<com.google.android.material.button.MaterialButton
  android:id="@+id/save_button"
  style="@style/buttonView"
  android:text="Save"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintStart_toStartOf="parent" />

In my styles.xml, I have -

<style name="buttonView" parent="Theme.MyTheme">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginStart">16dp</item>
        <item name="android:layout_marginLeft">16dp</item>
        <item name="android:layout_marginTop">16dp</item>
        <item name="android:layout_marginEnd">16dp</item>
        <item name="android:layout_marginRight">16dp</item>
    </style>

In my themes.xml, I have -

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="android:textColorPrimary">@color/black</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!--- Accent color. -->
        <item name="colorAccent">@color/red</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant
        </item>
        <!-- Customize your theme here. -->
    </style>
</resources>

As per the Android documentation all the UI elements such as FAB, textview, edit text, button take the color accent. So I expect my button to take the colorAccent by default but why does it take colorPrimary. Am I doing anything wrong?

Solution

You can check the official doc.

The filled button has the backgroundTint based on the colorPrimary.
Also in your buttonView style you should extend one of the provided styles:

Default style           Widget.MaterialComponents.Button
Icon style              Widget.MaterialComponents.Button.Icon
Unelevated style.       Widget.MaterialComponents.Button.UnelevatedButton
Unelevated icon style   Widget.MaterialComponents.Button.UnelevatedButton.Icon

Example:

<style name="buttonView" parent="Widget.MaterialComponents.Button">

</style>

If you want to change the background color you can:

• Use the backgroundTint attribute in your custom style

• Override the colorPrimary attribute in your custom style using the materialThemeOverlay (best solution)

Example:

<style name="buttonView"parent="Widget.MaterialComponents.Button">
   <item name="materialThemeOverlay">@style/CustomButtonThemeOverlay</item>
</style>

<style name="CustomButtonThemeOverlay">
  <item name="colorPrimary">@color/...</item>
</style>

Answered By - Gabriele Mariotti