Set FAB icon color

Question

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

Thyrse

Answer 1

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

Caines

It works when setting PorterDuff.Mode.SRC_ATOP and using Drawable myFabSrc = ResourcesCompat.getDrawable(getResources(), android.R.drawable.ic_input_add, getTheme()); – Thyrse

Your solution is too complicated. Just use android:tint="@android:color/white" – Medor

It's not complicated @MahdiElMasaoudi. Sometimes and most of the times there are use cases where it has to be programatically be updated! It's upto the user to reduce the overheads as much as possible. – Evidential

If you use FloatingActionButton that in com.google.android.material package, you should add app:tint instead of android:tint. – Questor

use app:tint="@android:color/white" – Quantitative

I'm updating the answer with these info. – Caines

Answer 2

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

Pedo

such a clean solution – Dereliction

android:tint appears to be only supported in API level 21 and above :( developer.android.com/training/material/drawables.html – Alameda

@Alameda except FloatingActionButton is part of the support library here, and seems to implement it on older APIs as well (tried it with API 16). – Meanly

in google material android:tint well not word, replace it with app:tint – Trust

Answer 3

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"

Villosity

Used the app:backgroundTint="" for the background color and app:tint="" for the image tint. – Edsel

I looked for about 30 minutes until I realized it shouldn't be android:tint but rather app:tint . – Bainbrudge

'app:tint="@null"' save my day :) – Fourhanded

Answer 4

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

Gingili

Answer 5

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

Socio

I don't know why it has been down voted, this is the correct solution and should have been the accepted answer. – Faceharden

Use this in a fragment yourFab.setColorFilter(getResources().getColor(R.color.red)); – Eberto

how to set FAB color in xml or style? – Vallation

@roghayehhosseini android:tint for API 21 and above. It also works if you use the support library android.support.design.widget.FloatingActionButton – Socio

Use app:tint to support APIs below 21 – Convexoconcave

Neither app:tint nor android:tint worked for me but this did. UP VOTED! – Multiplechoice

Answer 6

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

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

Hesperidium

This is working and one of the best way to do it through code if you want to toggle the icon color! Thanks! – Earring

I tried with setImageResource with the same drawable with a different color but didn't workout. This was the best way for me – Venator

This worked for me as well. I had to change the fab icon and it's color during on click of it. – Salable

Answer 7

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

Alameda

It seems to me as if android:tint works for the android.support.design.widget.FloatingActionButton defined in the support library even on lower API level devices, I've just tested it on a JellyBean image (API 16). – Meanly

Answer 8

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

Verisimilitude

Answer 9

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

Cutin

Answer 10

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

Effluent

Answer 11

 <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"

Unfrock

Answer 12

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

Cholecalciferol

Answer 13

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

Anamorphic

Answer 14

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

Gath

Answer 15

If you use Extended, set app:iconTint you can do like this:

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:icon="@drawable/d0"
        app:iconTint="@color/white"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Material3.FloatingActionButton"
        tools:ignore="SpeakableTextPresentCheck" />

Protuberant

Answer 16

This will keep the original color of the icon.

app:tint="@null"

or

android:tint="@null"

Rightward

Answer 17

To changing the background of fab(floating action button) add this line in xml file (in floating action button part) :

app:backgroundTint="@color/material_dynamic_primary60"

in this code i use "material_dynamic_primary60" color. But we can use any color in color file.

to changing color of floating action buttons icon:

app:tint="@color/white"

and this is how it is will gonna look like

Extraneous

Answer 18

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)

Baseboard

Answer 19

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

Erysipelas