115
votes

current fab
current FAB

I would like to know how to change the icon color of the FAB (Floating Action Button) widget supplied by the 'com.android.support:design:22.2.0' library from green to white.

style.xml

<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/color_primary</item>
    <item name="colorPrimaryDark">@color/color_primary_dark</item>
    <item name="colorAccent">@color/accent</item>

</style>
<color name="color_primary">#00B33C</color>
<color name="color_primary_dark">#006622</color>
<color name="accent">#FFB366</color>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <include android:id="@+id/toolbar" layout="@layout/toolbar" />

    <TextView android:id="@+id/text"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:paddingTop="16dp"
        android:textSize="20sp" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingTop="8dp"
        android:paddingBottom="16dp" />

</LinearLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@android:drawable/ic_input_add"
    android:layout_margin="24dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:borderWidth="0dp" />

16

16 Answers

194
votes

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"
   />
135
votes

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

If you are using Material Components

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_gravity="bottom|end"
    app:fabSize="normal"
    app:tint="@color/colorAccent"
    app:srcCompat="@drawable/ic_google"/>

If you want to use icon default color, change app:tint="@null"

29
votes

You have to change app:tint for that to work. android:tint didn't do any change for me.

22
votes

It's easier than get the drawables, you only need to access to the color filter and set it to the color that you want.

FloatingActionButton myFab = (FloatingActionButton) findViewById(R.id.myfabid);

myFab.setColorFilter(Color.WHITE);
10
votes

Since FloatingActionButton extends ImageView we can use ImageViewCompat to tint the icon:

ImageViewCompat.setImageTintList(
    floatingActionButton,
    ColorStateList.valueOf(Color.WHITE)
);
7
votes

Use the white version of ic_add from the google design site.

android:tint looks like a clean solution but it is not supported below API level 21

Using a bitmap adds less complexity to your app than attempting to change the color of an existing icon programmatically. Less complexity means fewer things to test :)

4
votes

If you are using material FAB use app:tint to change the color of the icon instead of android:tint

2
votes

If you want to change the color of the icon in CollapsingToolbarLayout use the following code

app:tint="@color/white"

Use the app instead of Android

1
votes

Try this code

    <com.google.android.material.floatingactionbutton.FloatingActionButton
       android:id="@+id/fab"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom|end"
       android:backgroundTint="@color/sm_blue"
       app:tint="@color/white"
       android:layout_margin="@dimen/fab_margin"
       app:srcCompat="@android:drawable/ic_input_add" />

Result enter image description here

0
votes

If you are using material FAB, you can style it programmatically using the below code in Kotlin.

fab.supportImageTintList = ContextCompat.getColorStateList(context, R.color.fab_icon_tint)
0
votes
 <com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/add_loan"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/medium"
    android:layout_marginBottom="16dp"
    android:backgroundTint="@color/ci_blue"
    android:theme="@style/fabtheme"
    app:srcCompat="@drawable/ic_baseline_add_24"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1"
    app:layout_constraintStart_toStartOf="parent"
    app:rippleColor="@color/white" />

theme

<style name="fabtheme" parent="Widget.Design.FloatingActionButton">
    <item name="colorOnSecondary">@color/white</item>
</style>

or

use the attribute

app:tint="@color/white"

0
votes

You can make your custom style:

<style name="FloatingButton" parent="Widget.MaterialComponents.FloatingActionButton">
        <item name="colorSecondary">@color/red</item>
        <item name="colorOnSecondary">@color/white</item>
</style>

Where colorSecondary is the background and colorOnSecondary is the color of the drawable of the button.

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_phone"
            android:theme="@style/FloatingButton" />
0
votes

If you are using com.google.android.material.floatingactionbutton.FloatingActionButton

Then

  1. To change Background Color of Floating Action Button, use app:backgroundTint

  2. To change Floating Action Button's Icon's color, use app:tint

  3. To change Floating Action Button's Icon Drawable, use app:srcCompat

     <com.google.android.material.floatingactionbutton.FloatingActionButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     app:backgroundTint="@color/white"
     app:srcCompat="@drawable/fb_icon"
     app:tint="@android:color/black" />
    
0
votes

For API >= 21

My Solution to change FloatingActionButton icon color programmatically

val fab = FloatingActionButton(requireContext())
fab.apply {
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        imageTintList = ColorStateList.valueOf(Color.WHITE)
}
-1
votes

In Java

private FloatingActionButton login;
login = findViewById(R.id.loginbtn);  
login.setColorFilter(android.R.color.white);

In XML

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/loginbtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/colorPrimaryDark"
    android:src="@drawable/loginicon"
    app:rippleColor="@color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/pass_l" />