Gradient color using MaterialButton and shapeAppearance

Question

I want to make a Button like this one :

I try it using style with shapeAppearance :

<style name="ShapeAppearance.Button" parent="ShapeAppearance.MaterialComponents">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">@dimen/button_corner_radius</item>
    <item name="cornerSizeTopRight">5dp</item>
    <item name="cornerSizeBottomRight">@dimen/button_corner_radius</item>
    <item name="cornerSizeBottomLeft">5dp</item>
</style>

<dimen name="button_corner_radius">40dp</dimen>

I apply the style in my MaterialButton like this :

app:shapeAppearance="@style/ShapeAppearance.Button"

The result is :

Now, I try to put a linear gradient :

#DF2D48 @ 0.0
#D72D46 @ 0.2
#AF223B @ 0.5
#AC2139 @ 1.0

For example :

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#DF2D48"
        android:centerColor="#D72D46"
        android:endColor="#AC2139"
        android:angle="360" />
</shape>

and I apply it using in my Shape style :

<item name="android:background">@drawable/test</item>

But the result is the same. Why ?

Gabriele Mariotti · Answer 1 · 2021-04-29T06:10:43.490

About the MaterialButton:

it uses a MaterialShapeDrawable to apply the shapeAppearance (shape and stroke).
Currently (1.3.0) the MaterialShapeDrawable doesn't support a gradient background.
it supports the android:background attribute only starting from the 1.2.0-alpha06. But using the android:background the MaterialButton removes the default MaterialShapeDrawable background and the shapeAppearance is not applied.
if you are using a MaterialComponents Theme there is no difference between <Button /> and <com.google.android.material.button.MaterialButton /> because of the MaterialComponentsViewInflater that replaces the Button with a MaterialButton at runtime.

You have 2 solutions:

to use a custom shape with custom rounded corners and a gradient color and apply it as android:background to MaterialButton
to use a custom shape and apply it to an AppCompatButton.

With MaterialButton :

    <com.google.android.material.button.MaterialButton
        app:backgroundTint="@null"
        android:background="@drawable/gradient_shape"
        />

Make sure to null out backgroundTint (either app:backgroundTint="@null" or app:backgroundTint="@empty"), to avoid that the custom background doesn't get tinted.
Note: it requires at least the version 1.2.0-alpha06.

With AppCompatButton :

  <androidx.appcompat.widget.AppCompatButton
      android:background="@drawable/gradient_shape"/>

with a shape like:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="...."
        android:startColor="...." />

    <corners android:topLeftRadius="40dp"
        android:bottomRightRadius="40dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        />

</shape>

score 4 · Accepted Answer · answered Aug 02 '20 at 12:25

Gradient color using Material Button:

MaterialButton : To use a custom drawable background with the MaterialButton background tint attribute should be null ref code: app:backgroundTint="@null"

 <com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:focusable="true"
                android:text="@string/button_enabled"

                app:backgroundTint="@null"
                android:background="@drawable/gradient_1"
               />

Gradient with shape: res/drawable/gradient_1.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="#DD8E54E9"
        android:startColor="#CC225AE0" />
        <corners android:topLeftRadius="18dp"
            android:bottomRightRadius="18dp"
            android:topRightRadius="5dp"
            android:bottomLeftRadius="5dp"
            />
        <stroke
            android:width="6dp"
            android:color="#007879E8" />
</shape>

for me it is worked following version: i am using : material:1.3.0-alpha02 theme: — Bolt UIX, Aug 03 '20 at 15:06

score 1 · Answer 3 · edited Jul 30 '20 at 18:26

1

The problem is because I try to set a background to a MaterialButton, and it's not possible.

Finally, I've used a classic Button with this background :

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

    <gradient
        android:startColor="#D72D46"
        android:centerColor="#AF223B"
        android:endColor="#AC2139"
        android:angle="360" />

    <corners
        android:bottomRightRadius="40dp"
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="40dp"
        android:topRightRadius="5dp" />

</shape>

edited Jul 30 '20 at 18:26

ʍѳђઽ૯ท

16,646
7
53
108

answered Jul 30 '20 at 17:27

Jéwôm'

3,753
5
40
73

To use the `android:background` attribute in `MaterialButton` you need at least the release `1.2.0-alpha06` – Gabriele Mariotti Jul 30 '20 at 17:58
I tried it but this solution ignore the "app:shapeAppearance" – Jéwôm' Jul 30 '20 at 19:53
Yes it is an expected result. Using `android:background` the `MaterialButton` doesn't use the `MaterialShapeDrawable` and the `shapeAppearance`. Also be aware that the `Button` is auto-inflated as a `MaterialButton`. – Gabriele Mariotti Jul 30 '20 at 20:26

Gradient color using MaterialButton and shapeAppearance

3 Answers3