How to set a gradient background to a Material Button?

Question

I'm currently using this code but the background is not changing.It is still showing accent-color as background.

<com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello"
    app:cornerRadius="32dp"
    android:background="@drawable/gradiant_blue"/>

gradiant_blue.xml

<shape
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">

   <gradient
       android:angle="-45"
       android:startColor="#2979FF"
       android:endColor="#7C4DFF"/>
</shape>

I'm currently using

Material Components version : 1.0.0-rc02

Answer 1

To use a custom drawable background with the MaterialButton you can use the android:background attribute:

<MaterialButton
    app:backgroundTint="@null"
    android:background="@drawable/bkg_button_gradient"
    ... />

NOTE: It requires at least the version 1.2.0-alpha06

Currently it is very important to add app:backgroundTint="@null" to avoid that the custom background doesn't get tinted by default with the backgroundTint color.

With lower versions of the Material Components Library you have to use an AppCompatButton.