Remove background color of MaterialButton and set icon

Question

I wanted to remove the color background of a Material Button and I wanted to show an icon only. The icon shouldn't be tinted with any color but should display the picture(drawable) I am setting. Here is what I want to achieve:

The Button attributes I am using is:

<com.google.android.material.button.MaterialButton
                        android:id="@+id/btn_google"
                        app:iconPadding="0dp"
                        android:padding="0dp"
                        android:minHeight="48dp"
                        android:insetTop="0dp"
                        android:insetBottom="0dp"
                        app:elevation="3dp"
                        android:minWidth="48dp"
                        app:iconGravity="textStart"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:cornerRadius="50dp"
                        app:icon="@drawable/ic_google_logo"/>

And this is what I am getting:

While I was setting an icon of transparent color of google logo like this(ic_google_logo):

I have tried to add this style on the button: style="@style/Widget.MaterialComponents.Button.OutlinedButton" and it will tint the icon while correcting the background color. like this:

If you have come across this issue before please help. Thank you for your time!

Why don't use basic `ImageView` with `android:src="@drawable/ic_google_logo"`? Corner radius can be done with another solution. — lbasek, Dec 18 '20 at 10:24
MaterialButton applies some tinting by default but you could try with `app:backgroundTint="@color/white"` and `app:iconTint="@android:color/transparent"`? — RobCo, Dec 18 '20 at 10:38
@lbasek the matrial buttons have so many great feature already and I wanted to use that. But there also some head-aches like this. :/ — Kidus Tekeste, Dec 18 '20 at 10:53
If you set `app:backgroundTint="@null"` you can use `android:background` again — EpicPandaForce, Apr 07 '23 at 23:31

score 2 · Answer 1 · answered Jan 22 '21 at 17:12

Add following property :

android:backgroundTint="@color/white"

Full Code :

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn_google"
    android:backgroundTint="@color/white"
    app:iconPadding="0dp"
    android:padding="0dp"
    android:minHeight="48dp"
    android:insetTop="0dp"
    android:insetBottom="0dp"
    app:elevation="3dp"
    android:minWidth="48dp"
    app:iconGravity="textStart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cornerRadius="50dp"
    app:icon="@drawable/ic_google_logo"/>

Read following document to know details about the attributes of Material Button:

https://material.io/components/buttons/android#text-button

Remove background color of MaterialButton and set icon

1 Answers1