Is Button's background colored by colorPrimary, not colorAccent?

Question

My Settings: minSdkVersion 19 && compileSdkVersion 30

I tried below code. I expected the button's background to be colored as colorAccent, but it was colored as colorPrimary. When I change colorPrimary value to another color, the button's background color changes accordingly.

This is contrary to what I learned. (Button's background should be colored by colorAccent when style is "@style/Widget.AppCompat.Button.Colored"). I encountered this problem while following the Google Android fundamental tutorial (https://developer.android.com/codelabs/kotlin-android-training-interactivity/index.html#4).

I am getting confused, please help.

// activity_main.xml
<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:id="@+id/done_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/done" />

// themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.AboutMe" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</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>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

// colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="colorAccent">#880000</color>
</resources>

Answer 1

Since you are using a Material Components Theme, your Button is replaced at runtime by a MaterialButton.

The MaterialButton uses as background tint the ?attr/colorPrimary. The style Widget.AppCompat.Button.Colored applies a background drawable which is overridden by the MaterialShapeDrawable provided by the MaterialButton.

Use a Material Components style in your Button as Widget.MaterialComponents.Button and the app:backgroundTint to apply a different color in your background:

   <Button
    style="@style/Widget.MaterialComponents.Button"
    app:backgroundTint="@color/....."
    ../>

or:

  <Button
    style="@style/Widget.MaterialComponents.Button"
    android:theme="@style/ButtonThemeOverlayPrimaryColor"
    ../>


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

or if you want to use an AppCompat style use a AppCompatButton.

<androidx.appcompat.widget.AppCompatButton
    style="@style/Widget.AppCompat.Button.Colored"/>