FAB Change color of icon drawable

Question

I have defined my FAB in the layout file as:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/search"
        app:rippleColor="@color/primary"
        app:elevation="1dp"
        app:borderWidth="4dp" />

Here @drawable/search is a file that I created from Android Studio's Vector Asset tool (Asset Type Material Icon). It gets created as a black color. How do I change the color of the icon used inside the FAB definition?

Please see this way: https://stackoverflow.com/a/71892873/12272687 — Mori, Apr 16 '22 at 10:23

score 3 · Accepted Answer · edited Jan 02 '18 at 13:30

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);

Aditya · Answer 2 · 2018-01-02T13:03:51.857

Simply, to change color of drawable, locate res/drawable folder and open your desired drawable which code looks like,

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="26dp"
        android:height="26dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF" <!-- change color here -->
        android:pathData="M12,17.27L18.18,21l-1.64,-7.03L22,9.24l-7.19,-0.61L12,2 9.19,8.63 2,9.24l5.46,4.73L5.82,21z"/>
</vector>

Here you can change color of your drawable by using, android:fillColor attribute.

Edit -- or if you want to change color of drawable icon in fab xml then you can use android:tint in fab as,

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:tint="#FFFFFF"          <!-- your color here -->
    app:src="@drawable/ic_search" />

Is there no way with which I can do that in the FAB XML code? — Sparker0i, Jan 02 '18 at 12:56

FAB Change color of icon drawable

2 Answers2