How to set a gradient background in a Material Button from Material Components?

Starting with the version 1.2.0-alpha06 you can use the android:background attribute in the MaterialButton.

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

Otherwise if you can’t use the 1.2.0-alpha06 or higher you have to use the AppCompatButton component.

Just a some tips about the MaterialButton.

  • Currently the backgroundTint is still the default MaterialButton style.
    If you are using a custom android:background, you have to make sure to null out backgroundTint (either app:backgroundTint="@null" or app:backgroundTint="@empty"), to avoid that the custom background doesn’t get tinted.
  • using a custom android:background the default MaterialShapeDrawable is not used. Some features like stroke, shapeappearance, ripple are not set (since they are related to the MaterialShapeDrawable) . You have to provide them with your custom background.

Leave a Comment