Can't use android:background with button from the new material components

Question

I'm using the new material components com.google.android.material:material with android x but I can't set a custom background to the button.

I know that I can use app:backgroundTint to change the color

but the default background has some padding that I want to get rid of, and the old way of using android:background to set my own background but this is no longer working.

I looked at the docs but can't find any mention to this change.

You can use ImageButton instead of Button from material components. android:background is working on ImageButton. — bigant02, Aug 27 '21 at 09:11

Gabriele Mariotti · Answer 1 · 2020-06-19T08:57:24.327

25

In the Material Components Library, the MaterialButton has a default style with insetBottom and insetTop with a value of 6dp.

You can change it using:

  <com.google.android.material.button.MaterialButton
      android:insetTop="0dp"
      android:insetBottom="0dp"
      ../>

If you want to change the background color you can use the app:backgroundTint attribute or you can override some theme attributes from a default style then you can use new materialThemeOverlay attribute.

In your case you can do something like:

<style name="MtButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <item name="colorPrimary">@color/green</item>
</style>

Finally 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_drawable"
    ... />

edited Jun 19 '20 at 08:57

answered Aug 17 '19 at 18:18

Gabriele Mariotti

320,139
94
887
841

Please note that version 1.1.0 in alpha status *for now* https://mvnrepository.com/artifact/com.google.android.material/material – eugeneek Oct 04 '19 at 06:14
1

@eugeneek Yes it is still in alpha, it will be in beta this week. – Gabriele Mariotti Oct 04 '19 at 06:37
@GabrieleMariotti, I often see you use alpha and beta versions of support libraries. How do you know when they obtain a new functionality? Do you work at Google? :) – CoolMind May 12 '20 at 12:50

Ben P. · Accepted Answer · 2018-10-05T21:16:38.253

19

The documentation for the MaterialButton class says:

Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior.

However, the GitHub readme says:

Note: MaterialButton is visually different from Button and AppCompatButton. One of the main differences is that AppCompatButton has a 4dp inset on the left and right sides, whereas MaterialButton does not.

This mentions only left/right inset, but the Attributes section of the readme shows that all four insets are supported:

So you could add these attributes to your <MaterialButton> tag:

android:insetTop="0dp"
android:insetBottom="0dp"

edited Oct 05 '18 at 21:16

answered Oct 05 '18 at 20:55

Ben P.

52,661
6
95
123

no, I need to worry about it, as it still showing at the button and the top. – humazed Oct 05 '18 at 21:04
1

Have you tried setting `android:insetTop="0dp"` (and `insetBottom`) on your `` tag? – Ben P. Oct 05 '18 at 21:09
4

so how we can add gradient in materialButton? – SinaMN75 Feb 22 '19 at 09:46
1

not working for me, the buttons are still having a dark black background – suv Jun 11 '19 at 09:49
1

This is not a solution. See https://stackoverflow.com/a/52751122/2914140 or solutions below. – CoolMind May 12 '20 at 12:48

CoolMind · Answer 3 · 2020-05-12T12:52:31.017

10

Looking at https://medium.com/@velmm/material-button-in-android-e4391a243b17 I found that app:backgroundTint (and app:backgroundTintMode) works. It changes a color, but not a drawable selector.

Also you can replace <Button with <android.widget.Button.

edited May 12 '20 at 12:52

answered May 12 '20 at 11:17

CoolMind

26,736
15
188
224

you safe my life. thanks for your solution. – Trung Đoan Jan 29 '21 at 09:12

score 10 · Answer 4 · edited Jun 03 '22 at 10:52

10

If you want to use gradient drawable as MaterialButton's background,

set Your MaterialButton as below:

<com.google.android.material.button.MaterialButton
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_margin="16dp"
     app:backgroundTint="@null"
     android:background="@drawable/group_47"
     app:layout_constraintEnd_toEndOf="@+id/input_password"
     app:layout_constraintStart_toStartOf="@+id/input_password"
     app:layout_constraintTop_toBottomOf="@+id/input_password" />

edited Jun 03 '22 at 10:52

ThaiPD

3,503
3
30
48

answered May 01 '21 at 16:56

Siru malayil

197
2
11

Doesn't work, did you add something else to make it work? Just setting background and tint to null doesn't work – Zeus Almighty May 25 '21 at 08:52
@ZeusAlmighty please tell me your reqirements, and how you tried – Siru malayil May 25 '21 at 10:17
I tried it by setting `background=@drawable/custom_bg` and `backgroundTint="@null"`. I want to use the color of background drawable as background of Material button but it is using primary color as background. – Zeus Almighty May 25 '21 at 11:07
@ZeusAlmighty can u share ur material button and style.xml file – Siru malayil May 25 '21 at 12:44
How do I send it? – Zeus Almighty May 26 '21 at 04:59

score 8 · Answer 5 · answered Sep 16 '21 at 17:14

If you wish to keep your

android:background="@drawable/button_background"

And have MaterialButton respect it, then you must set

app:backgroundTint="@null"
app:backgroundTintMode="add" // it doesn't matter the value, but it must be set

Please note that you can also use app:background instead, although I've noticed enough breaking changes that I still prefer the method above.

score 2 · Answer 6 · answered Jan 29 '21 at 09:36

I face the same issue when I use state drawable in a Button but It does not change the background of the button. After searching for a long time, I found 2 solutions as below:
The first solution is change the application theme from MaterialComponents to AppCompat in values/themes.xml file. then state drawable will work well.

to

    <style name="Theme.MyApplication" parent="Theme.AppCompat.DayNight.DarkActionBar">

If you still want to use MaterialComponents theme then you can try the second solution.
Use <android.widget.Button instead of <Button or <com.google.android.material.button.MaterialButton

    <android.widget.Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/state_test"
        android:text="Button" />

The second solution I found at Here

score 1 · Answer 7 · answered Jul 19 '21 at 15:51

The main reason for this decision by the google design team to exclude the functionality android:background="@drawable/" from the initial release versions of the material library is to enable developers to build consistent and professional-looking designs for apps at a faster pace. This is because most developers like me are bad in making decisions related to design and colors of the app.

Also, I found this snippet from google tutorial while migrating to MDC.

score 0 · Answer 8 · answered May 09 '21 at 15:52

Just by using android:backgroundTint

<style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="android:backgroundTint">@color/pink</item>
</style>


<com.google.android.material.button.MaterialButton
    android:id="@+id/followButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/channel_header_item_margin"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/titeChannelTV"
    style="@style/MyButtonStyle"/>

score 0 · Answer 9 · answered Feb 05 '23 at 08:54

0

using a simple

app:backgroundTint="@null"

with button attributes works perfectly.

answered Feb 05 '23 at 08:54

Mudit Goel

196
1
5

Can't use android:background with button from the new material components

9 Answers9

Linked