Why global color style for button is not being applied in Theme.MaterialComponents.Light.DarkActionBar in Android?

Question

Themes.xml :

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.CustomButton" parent="Theme.MaterialComponents.Light.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="materialButtonStyle">@style/Theme.CustomButton.MyButton</item>
    </style>

    <style name="Theme.CustomButton.MyButton" parent="Widget.MaterialComponents.Button">
        <item name="android:background">@drawable/custom_button</item>
        <item name="android:textColor">@color/white</item>
    </style>
</resources>

This file contains all the style for buttons based on their states.

custom_button.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">


    <item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
    <item android:state_enabled="false" android:drawable="@drawable/button_disabled" />
    <item  android:drawable="@drawable/button_default" />

</selector>

XML file for button in default state.

button_default.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

<gradient android:angle="90" android:startColor="#02B290" android:endColor="#38CC77"/>
<padding android:right="20dp" android:left="20dp" android:bottom="8dp" android:top="8dp" />
<stroke android:width="2dp" android:color="#1FAA59"/>
<corners android:radius="15dp" />

</shape>

XML file for the button in pressed state.

button_pressed.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

   <solid android:color="#00D84A" />
    <padding android:right="20dp" android:left="20dp" android:bottom="8dp" android:top="8dp" />
    <stroke android:width="2dp" android:color="#1FAA59"/>
    <corners android:radius="15dp" />


</shape>

XML file for the button in disabled state.

button_disabled.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

    <solid android:color="#66AD47" />
    <padding android:right="20dp" android:left="20dp" android:bottom="8dp" android:top="8dp" />
    <stroke android:width="2dp" android:color="#1FAA59"/>
    <corners android:radius="15dp" />


</shape>

In My output, only the color is not changing but the radius and other stuff are being applied:

Output:

Answer 1

Overriding "backgroundTint" property in custom style works for changing background color.

<style name="Theme.CustomButton.MyButton" parent="Widget.MaterialComponents.Button">
    <item name="android:background">@drawable/custom_button</item>
    <item name="android:textColor">@color/white</item>
    <item name="backgroundTint">@drawable/btn_bg_selector</item>
</style>

I have used another drawable as btn_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#02B290" android:state_enabled="true"/>
    <item android:color="#66AD47" android:state_enabled="false"/>
</selector>

Answer 2

I got the answer,

Assigning background tint property as "@null" in themes.xml under Theme.CustomButton.MyButton everything becomes correct.

solution:

<style name="Theme.CustomButton.MyButton" parent="Widget.MaterialComponents.Button">
        <item name="android:background">@drawable/custom_button</item>
        <item name="android:textColor">@color/white</item>
        <item name="backgroundTint">@null</item>
    </style>