Button color won't change using background attribute in XML

Question

I am trying to customize the design of my application and I ran into this weird problem which I can't figure out a solution for. I am trying to customize my buttons by defining a custom drawable for background in order to change color but also add corners to them, but the problem is when I add the background attribute to the app, whatever value I give to it, whether it's a color or a custom drawable, the color of the buttons becomes colorPrimary and I don't understand why.

Here are the XMLs:

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorSecondary">@color/colorSecondary</item>
        <item name="android:statusBarColor">@color/colorPrimaryDark</item>
        <item name="android:textColorPrimary">#000000</item>
        <item name="android:textColorSecondary">#000000</item>
        <item name="android:textColor">#000000</item>
    </style>

    <style name="AlertDialog" parent="Theme.AppCompat.Light.Dialog" />

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="myCustomMenuTextAppearance" parent="@android:style/TextAppearance.Widget.IconMenu.Item">
        <item name="android:textColor">#000000</item>
    </style>

</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorAccent">#009B9B</color>
    <color name="colorPrimary">#2A3E52</color>
    <color name="colorPrimaryDark">#1A2E42</color>
    <color name="colorSecondary">#FFFFFF</color>
    <color name="red">#BB0000</color>
    <color name="yellow">#BBBB00</color>
    <color name="green">#00BB00</color>
    <color name="white">#FFFFFF</color>
    <color name="colorText">#B3BAC5</color>
</resources>

custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent"/>
    <corners android:radius="20dp"/>
</shape>

Button definition

<Button
            android:id="@+id/signin_button"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginHorizontal="20dp"
            android:layout_marginTop="25dp"
            android:backgroundTint="@color/colorAccent"
            android:background="@color/colorAccent"
            android:text="Sign In"
            android:textSize="20sp"
            android:textColor="@color/white"
            android:textAllCaps="false"
            android:layout_below="@+id/password_reset2"
            android:layout_centerHorizontal="true"/>

Can anyone help me on this one?

Answer 1

As you are using Material theme, for material Button you should simply use app:backgroundTint for more attributes check Material Button

you can set custom background like this

app:backgroundTint="@color/colorAccent"
android:background="your custom background"