How to set a gradient background to a Material Button?
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:
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
.