Material Button Icon is showing without color

Question

I am using the following material button:

<android.support.design.button.MaterialButton
            android:id="@+id/bFavourite"         style="@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:textAllCaps="false"
            android:textSize="20sp"
            app:backgroundTint="@color/main_dark_blue"
            app:backgroundTintMode="src_over"
            app:cornerRadius="0dp"
            app:icon="@drawable/heart_filled"
            app:iconGravity="textStart"
            app:iconPadding="0dp" />

heart_filled is a png of a red heart. However the icon is showing without any color (i.e., a white heart). Why is the actual color of the image not showing? Thank you

Soil

https://mcmap.net/q/245195/-how-to-get-material-icon-button-in-android/7254873 – Legibility

Answer 1

Maybe you are looking for this set iconTint to null

<com.google.android.material.button.MaterialButton
            android:id="@+id/btnGoogle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_marginStart="@dimen/_2sdp"
            android:layout_weight="1"
            app:icon="@drawable/ic_google"
            app:iconGravity="textStart"
            app:iconTint="@null"
            android:elevation="@dimen/_10sdp"
            android:text="@string/string_google"
            android:textAllCaps="false"
            app:rippleColor="@color/colorBlueShade1"
            app:cornerRadius="@dimen/_20sdp"
            app:backgroundTint="@color/colorWhite"
            android:textColor="@color/colorPrimary" />

Achieved output

Schistosome

yeah, i was looking for this. Programmatically it is btnGoogle.materialButton.iconTint = null – Freaky

Thanks for sharing, It feels bad to me to set @null in xml, I had issues with that in the past but they do advise us to do it that way. github.com/material-components/material-components-android/… – Swinge

Answer 2

Just need to add tint mode in the material button icon

app:iconTintMode="multiply"

Statuesque

Answer 3

You can try to set the iconTint attribute of the Button:

app:iconTint="#ffffff"

Planetstruck

I dont want to set the colors from xml. I want my png image to simply show . I have other buttons with way more complicated coloring and they are showing all as white – Soil

Yes I know how it is when you expect something to behave like it should, just like a white icon to be white, but in AS I've seen a lot of weird behavior (like icons not even showing) and in these cases if there is a workaround I take it. So if this works I suggest you do it. If not then there is trouble. – Planetstruck

Answer 4

If your icon has multiple colors, you will have to apply TintMode as well.

  app:icon="@drawable/ic_delete"
  app:iconTint="#ffffff"
  app:iconTintMode="multiply"

Using this will give you perfect icon design.

Idolla

Answer 5

The app:icon is tinted with the app:iconTint color provided by the style by default (Widget.MaterialComponents.Button.UnelevatedButton.Icon in your case).

You can override this behavior using app:iconTint="@null" to your button:

<com.google.android.material.button.MaterialButton
   style="@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
   app:iconTint="@null" 
   .../>

Fairleigh

Answer 6

You can use app:iconTint="@android:color/white" because they mention this in docs MaterialButton Docs

Nonobjective

I dont want to set the color code. I want the png image to show as is – Soil