Can't create gradient material design button

Question

I am trying to create button with backgroundTint to gradient.

I defined my gradient inside drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">

    <gradient
            android:centerX="50%"
            android:centerY="50%"
            android:endColor="#308c35"
            android:gradientRadius="100dp"
            android:startColor="#66BB6A"
            android:type="linear" />

    <corners android:radius="22dp" />

</shape>

Now I am trying to use it as a value to my button:

    <com.google.android.material.button.MaterialButton
            android:id="@+id/material_unelevated_button"
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:layout_width="160dp"
            android:layout_height="58dp"
            android:layout_marginBottom="84dp"
            android:text="@string/button_start_text"
            app:backgroundTint="@drawable/main_gradient"
            app:cornerRadius="14dp"
            app:iconPadding="3dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintStart_toStartOf="parent"
            app:strokeWidth="0dp" />

Unfortunately it doesn't work with backgroundTint. I am using material themes, so only changing backgroundTint value I can change how the button looks like. I cannot find solution for this, I tried setting android:background and every other background related option to gradient but it had no effect.

You can't do it. BackgroundTint works with a color not a drawable, also MaterialButton manages its own background drawable — Gabriele Mariotti, Nov 06 '19 at 05:55

score 1 · Accepted Answer · answered Nov 06 '19 at 05:13

1

It won't work. Somehow I also tried that and it in the material button the gradient is not working and it has to do with the internals of material-designing.

answered Nov 06 '19 at 05:13

raj kavadia

926
1
10
30

score 0 · Answer 2 · answered Nov 06 '19 at 04:55

It is very simple:

gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
   <gradient
        android:centerX="50%"
        android:centerY="50%"
        android:endColor="#308c35"
        android:gradientRadius="100dp"
        android:startColor="#66BB6A"
        android:type="linear" />

  <corners android:radius="@dimen/dp_10" />
</shape>

And your button:

<Button
    android:id="@+id/btn_confirm"
    android:layout_width="160dp"
    android:layout_height="58dp"
    android:layout_marginBottom="84dp"
    android:text="@string/button_start_text"
    android:layout_weight="1"
    android:background="@drawable/gradient" >

It doesn't work because if you are using a Material components theme there is no difference between and . Check [this question](https://stackoverflow.com/questions/57925853/is-any-difference-between-a-materialbutton-and-a-simple-button/57926083#57926083) — Gabriele Mariotti, Nov 06 '19 at 05:57

Can't create gradient material design button

2 Answers2