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.

<com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello"
    app:cornerRadius="32dp"
    android:background="@drawable/gradiant_blue"/>

gradiant_blue.xml

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

   <gradient
       android:angle="-45"
       android:startColor="#2979FF"
       android:endColor="#7C4DFF"/>
</shape>

I'm currently using

Material Components version : 1.0.0-rc02

@Pavan you can go through this [link](https://stackoverflow.com/questions/52908045/how-to-set-a-gradient-background-in-a-material-button-from-material-components?rq=1). Hope this helps you — MashukKhan, Jun 09 '20 at 06:36

score 41 · Accepted Answer · answered Jun 09 '20 at 06:32

41

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.

answered Jun 09 '20 at 06:32

Gabriele Mariotti

320,139
94
887
841

Brother this is work.. But it make no corner radius.. – Ucdemir Feb 05 '23 at 09:43
1

Thanks for the hint with the tint. – Marcell Jun 08 '23 at 19:09

grrigore · Answer 2 · 2018-09-17T21:51:18.973

9

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:

edited Sep 17 '18 at 21:51

answered Sep 17 '18 at 16:03

grrigore

1,050
1
21
39

which version are you using. I tried your code but still not working – Pavan Varma Sep 17 '18 at 18:04
The background isn't changing? – grrigore Sep 17 '18 at 18:19
can you once try with - " 'implementation 'com.google.android.material:material:1.0.0-rc02' " – Pavan Varma Sep 17 '18 at 18:19
there is no error and the background is not changing. It is not even changing in preview mode and also not changing in actual device – Pavan Varma Sep 17 '18 at 18:23
same gradient is working fine with other views and buttons – Pavan Varma Sep 17 '18 at 18:23
The other buttons are `Button` type? Why do you use `MaterialButton` for this one? – grrigore Sep 17 '18 at 18:25
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/180226/discussion-between-pavan-varma-and-grrigore). – Pavan Varma Sep 17 '18 at 18:35
2

For material btn don`t foget add ```app:backgroundTint="@null"``` – Fortran Feb 09 '21 at 21:10

score -1 · Answer 3 · answered Sep 17 '18 at 15:50

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

I need to put gradient background. background-tint does not allow drawables. — Pavan Varma, Sep 17 '18 at 16:04

score -5 · Answer 4 · answered Dec 20 '18 at 18:17

-5

To set background you need to make your base theme extend

Theme.AppCompat.Light.NoActionBar

and not

Theme.MaterialComponents.Light.NoActionBar

answered Dec 20 '18 at 18:17

Emmanuel Wamuo

37
7

1

If your theme does not extend from MaterialComponents, you can not use Material Button – ysfcyln Jan 15 '19 at 14:02
`com.google.android.material.button.MaterialButton` is only available for materialComponents theme not appcompat themes – akshay bhange Jul 11 '19 at 07:25

How to set a gradient background to a Material Button?

4 Answers4

Linked

Related