[FloatingActionButton] FAB Icon is Always Black

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

[alyrow]

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

[FadwaBechri]

Hello, try to put this line : app:tint="@null" it worked for me.