Button color doesn't change in android studio

Question

I have a button that has two states in which it has a different color, but the color does not change because the color of the button is automatically set by the theme. How can I avoid the color that the theme has set?

Button code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/purple_200">

    <LinearLayout
        android:id="@+id/startLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:padding="10dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/add_note"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="23sp"
            android:background="@drawable/button_states"
            android:text="@string/add_button" />
    </LinearLayout>
</RelativeLayout>

States code:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">
            <solid android:color="@color/white"/>
            <stroke android:color="@color/purple_200" android:width="1dp"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">
            <solid android:color="@color/purple_200"/>
            <stroke android:color="@color/purple_500" android:width="1dp"/>
        </shape>
    </item>
</selector>

Theme code:

<resources>
    <style name="Theme.NotifyMe" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
    </style>
</resources>

Answer 1

Either you use the Button from the androidx library androidx.appcompat.widget.AppCompatButton or you set the property of the button backgroundTintMode in the xml to the drawables.

Ideally you want to use the background property so its best you use this

 <androidx.appcompat.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="64dp"
        android:text="Button"
        android:background="@drawable/button_states"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="106dp" />

Answer 2

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="@color/purple_200">

<LinearLayout
    android:id="@+id/startLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:padding="10dp"
    android:orientation="horizontal">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/add_note"
        android:layout_width="0dp"
        android:layout_height="65dp"
        android:layout_weight="1"
        android:textSize="23sp"
        android:background="@drawable/button_states"
        android:text="Add Button" />
</LinearLayout>
</RelativeLayout>