Material-components-android: [FloatingActionButton] FAB Icon is Always Black

[HeyItsMedz]

Hello!

For some reason when I set an icon using android:src on a FAB, it will force the icon to be black rather than whatever colour the (vector) icon actually is. The issue popped up once I upgraded from 1.0.0 to 1.1.0, and can be seen directly from the XML layout preview. Using android:tint does not resolve the issue

Unfortunately I'm also relying on a bug fix in 1.1.0 for another component, so it's not like I can revert back to 1.0 and call it a day

I tried to see if the issue still occurred if I opened a new application from Android Studio. Interestingly, the icon will stay black if app theme's parent is set to Theme.MaterialComponents.Light but shows correctly if changed to Theme.AppCompat.Light

Source code
This can be reproduced by opening a new project in Android Studio, choosing the Empty Activity option.

Set the AppTheme parent to Theme.MaterialComponents.Light, and change the generated activity_main.xml to this:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="56dp"
        android:layout_marginBottom="36dp"
        android:src="@drawable/ic_arrow_forward_white_24dp"
        android:tint="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ic_arrow_forward_white_24dp.xml (this is generated as a Vector Asset within Android Studio):

<vector android:height="24dp" android:tint="#FFFFFF"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
</vector>

Switching com.google.android.material:material version between 1.0.0 and 1.1.0 will show the icon changes colour

Material Library version:
1.0.0: Works correctly
1.1.0-alpha01: Does not work as expected
1.1.0: Does not work as expected
1.2.0-alpha05: Does not work as expected

I hope that helps! Any solution or workaround would be much appreciated. I'm happy to answer any questions if needed.

All the best!
Medz

[EdricChan03]

Could you try using app:srcCompat instead?

[HeyItsMedz]

Hi Edric.

I'm afraid app:srcCompat has the same effect and doesn't fix the issue

[cmoijulien]

I have the same issue.
Works well with theme Theme.AppCompat.DayNight but not with theme Theme.MaterialComponents.DayNight.
Unfortunately, to use the components we have to use the theme Theme.MaterialComponents

[Jordan-Turgeon]

Setting the colour programatically seems to work (both supportImageTintList and setColorFilter). I'd wonder if the tint just isn't being picked up from the XML or is getting over-ridden during initialization given that you can set it afterwards.

[alyrow]

Hi,
Try to replace android:tint="@android:color/white" by app:tint="@android:color/white".