Android Fab Icon Always Black with Materialcomponents Theme

Why is my FloatingActionButton icon black?

If you're using AndroidX, to change the color of the icon you must use app:tint opposed to android:tint

<com.google.android.material.floatingactionbutton.FloatingActionButton
    style="@style/Widget.MaterialComponents.FloatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    app:backgroundTint="@color/colorPrimary"
    app:tint="@color/white"
    app:srcCompat="@drawable/ic_add"
/>

Set FAB icon color

UPDATE 2

If you are using com.google.android.material.floatingactionbutton.FloatingActionButton, use app:tint

app:tint="@android:color/white"

UPDATE

Refer to the answer of @Saleem Khan which is the standard way to set the app:tint using:

android:tint="@android:color/white"

via XML on FloatingActionButton.

OLD (June 2015)

This answer was written before October 2015, when android:tint on FloatingActionButton was supported only with API >= 21.

You can change it programmatically using ColorFilter.

//get the drawable
Drawable myFabSrc = getResources().getDrawable(android.R.drawable.ic_input_add);
//copy it in a new one
Drawable willBeWhite = myFabSrc.getConstantState().newDrawable();
//set the color filter, you can use also Mode.SRC_ATOP
willBeWhite.mutate().setColorFilter(Color.WHITE, PorterDuff.Mode.MULTIPLY);
//set it to your fab button initialized before
myFabName.setImageDrawable(willBeWhite);

Theme.MaterialComponents.Light.DarkActionBar breaks FAB cradle

Set the BottomNavigationView backgroundColor to transparent and the elevation to 0dp

Example:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
    app:contentInsetStart="0dp"
    app:contentInsetEnd="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetRight="0dp"
    app:fabAlignmentMode="center"
    app:fabCradleMargin="10dp"
    app:fabCradleVerticalOffset="10dp"
    app:fabCradleRoundedCornerRadius="20dp"
    app:hideOnScroll="true"
    app:layout_behavior="com.google.android.material.bottomappbar.BottomAppBar$Behavior">
    
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:itemTextColor="@color/defaultNavigationContentColor"
        app:itemIconTint="@color/defaultNavigationContentColor"
        app:elevation="0dp"
        app:menu="@menu/activity_bottom_menu" />
    
</com.google.android.material.bottomappbar.BottomAppBar>
    
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:tint="@color/defaultToolbarContentColor"
    app:backgroundTint="@color/primaryColor"
    app:tint="@color/defaultToolbarContentColor"
    app:fabSize="normal"
    app:srcCompat="@drawable/ic_baseline_add_24"
    app:elevation="4dp"
    app:layout_anchor="@id/bottomAppBar"
    app:layout_behavior="com.google.android.material.floatingactionbutton.FloatingActionButton$Behavior"/>

To align your Navigation items a bit better add a placeholder in the middle and disable it

Example:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/activityBottomDelete"
        android:enabled="true"
        android:title="@string/delete"
        android:icon="@drawable/ic_baseline_delete_24"
        app:showAsAction="always"/>

    <item android:id="@+id/placeholder"
        android:enabled="false"
        android:title="" />

    <item android:id="@+id/activityBottomDirection"
        android:enabled="true"
        android:title="@string/direction"
        android:icon="@drawable/ic_baseline_autorenew_24"
        app:showAsAction="always"/>
</menu>

FAB Change color of icon drawable

Using android:tint property you can set the color like this

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:tint="@android:color/white"
    android:src="@android:drawable/ic_input_add"/>

You can change it programmatically using ColorFilter.

//get the drawable
Drawable myFabSrc = getResources().getDrawable(android.R.drawable.ic_input_add);

//copy it in a new one
Drawable willBeWhite = myFabSrc.getConstantState().newDrawable();

//set the color filter, you can use also Mode.SRC_ATOP
willBeWhite.mutate().setColorFilter(Color.WHITE, PorterDuff.Mode.MULTIPLY);

//set it to your fab button initialized before
myFabName.setImageDrawable(willBeWhite);

Android changing Floating Action Button color

As described in the documentation, by default it takes the color set in styles.xml attribute colorAccent.

The background color of this view defaults to the your theme's colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).

If you wish to change the color

• in XML with attribute app:backgroundTint

<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" >

• in code with .setBackgroundTintList (answer below by ywwynm)

As @Dantalian mentioned in the comments, if you wish to change the icon color for Design Support Library up to v22 (inclusive), you can use

android:tint="@color/white"     

For Design Support Library since v23 for you can use:

app:tint="@color/white"   

Also with androidX libraries you need to set a 0dp border in your xml layout:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" />

---

Related Topics