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.

Answer 1

Please read the documentation for Material button, from here

It says, "For filled buttons, your theme’s colorPrimary provides the default background color of the component, and the text color is colorOnPrimary. For unfilled buttons, your theme’s colorPrimaryprovides the default text color of the component, and the background color is transparent by default."

I think that's the reason you are seeing some other color(accent-color) also please check the attributes that set background colour.

Following attributes are mentioned :

app:backgroundTint

app:backgroundTintMode

Answer 2

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.

Answer 3

LE: From my point of view I suggest you use Button or AppCompatButton.

Try this:

gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="#027FEE"
        android:startColor="#2CC6F2" />
</shape>

button.xml

<!-- replace MaterialButton with Button or AppCompatButton -->
<com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/gradient"
    android:text="Hello" />

Result:

With corner radius change gradient.xml to:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="#027FEE"
        android:startColor="#2CC6F2" />
    <corners android:radius="32dp"/>
</shape>

Result:

Answer 4

To set background you need to make your base theme extend

Theme.AppCompat.Light.NoActionBar

and not

Theme.MaterialComponents.Light.NoActionBar