material design - Android: theme.xml file in values overriding gradient_file.xml in drawable

Question

I am experimenting with android and i am trying to set background of a button with gradient_file in drawable.
The gradient_file:

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

    <gradient
        android:startColor="@color/white"
        android:endColor="@color/black"
        android:angle="45"
        android:type="linear" />
</shape>

The button:

<Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="@drawable/gradient_file"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.243" />

Now the color of the button does not change until I manually go to theme.xml in values and set a primary-color to null.

The theme.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyNewUIDesign" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@null</item> <!-- This was set to @color/purple_500 but if i dont make it null my gradient_file is not applied -->
        <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. -->
    </style>
</resources>

Now the only problem is all buttons are using that color as default and if I set it to null those other button lose their color. And if I don't set it to null my gradient_file is not applied. I just want a solution to this.

Answer 1

You just need to add app:backgroundTint="@null" to the button to avoid taking the shade of the colorPrimary

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:background="@drawable/gradient_file"
    android:text="Button"
    app:backgroundTint="@null"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.243" />