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

score 228 · Accepted Answer · edited Aug 30 '21 at 11:42

228

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

edited Aug 30 '21 at 11:42

Aldan

674
9
23

answered Jun 29 '15 at 11:04

Giorgio Antonioli

15,771
10
45
70

3

It works when setting `PorterDuff.Mode.SRC_ATOP` and using `Drawable myFabSrc = ResourcesCompat.getDrawable(getResources(), android.R.drawable.ic_input_add, getTheme());` – Paradiesstaub Jun 29 '15 at 11:14
54

Your solution is too complicated. Just use android:tint="@android:color/white" – Mehdi Mar 24 '16 at 03:32
5

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. – sud007 Sep 01 '17 at 13:22
34

If you use `FloatingActionButton` that in `com.google.android.material` package, you should add `app:tint` instead of `android:tint`. – Chenhe Apr 22 '20 at 03:57
1

use `app:tint="@android:color/white"` – Erkan Dec 02 '20 at 19:59
1

I'm updating the answer with these info. – Giorgio Antonioli Dec 02 '20 at 20:10

score 200 · Answer 2 · answered Dec 03 '15 at 17:34

200

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

answered Dec 03 '15 at 17:34

Saleem Khan

2,285
2
15
12

1

This helped me a lot, much simpler than doing it programmatically. – Redmega Mar 17 '16 at 00:45
Accidentally saw your pic here. Good solution Saleem. :-) – Anees U Jul 10 '16 at 08:25
such a clean solution – Thiago Pereira Aug 18 '16 at 20:37
12

`android:tint` appears to be only supported in API level 21 and above :( https://developer.android.com/training/material/drawables.html – alexbirkett Aug 31 '16 at 20:15
1

@alexbirkett except FloatingActionButton is part of the support library here, and seems to implement it on older APIs as well (tried it with API 16). – arekolek Feb 03 '17 at 15:33
in google material android:tint well not word, replace it with app:tint – Mahmoud Abu Alheja Dec 06 '21 at 13:23

Miravzal · Answer 3 · 2019-09-14T07:36:07.250

140

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"

edited Sep 14 '19 at 07:36

answered May 01 '19 at 02:06

Miravzal

2,025
1
13
11

17

Used the `app:backgroundTint=""` for the background color and `app:tint=""` for the image tint. – Ray Hunter Jun 18 '19 at 03:36
33

I looked for about 30 minutes until I realized it shouldn't be `android:tint` but rather `app:tint` . – Panos Gr Jul 04 '19 at 11:11
2

'app:tint="@null"' save my day :) – Sayed Abolfazl Fatemi Feb 04 '21 at 11:26

score 44 · Answer 4 · answered Jul 15 '20 at 17:00

44

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

answered Jul 15 '20 at 17:00

B. Amine

578
4
9

score 27 · Answer 5 · answered Nov 16 '17 at 12:41

27

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

answered Nov 16 '17 at 12:41

Daniel Campos Olivares

2,262
1
10
17

1

I don't know why it has been down voted, this is the correct solution and should have been the accepted answer. – Ishaan Dec 23 '17 at 08:00
1

Use this in a fragment `yourFab.setColorFilter(getResources().getColor(R.color.red));` – OhhhThatVarun Feb 24 '19 at 09:57
1

how to set FAB color in xml or style? – roghayeh hosseini Nov 07 '19 at 13:28
@roghayehhosseini `android:tint` for API 21 and above. It also works if you use the support library `android.support.design.widget.FloatingActionButton` – Daniel Campos Olivares Nov 08 '19 at 16:24
Use app:tint to support APIs below 21 – GilbertS Jun 16 '20 at 08:32
Neither app:tint nor android:tint worked for me but this did. UP VOTED! – Sam Jan 21 '21 at 14:59

score 14 · Answer 6 · answered Jan 03 '18 at 14:34

14

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

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

answered Jan 03 '18 at 14:34

sfera

1,138
1
15
21

This is working and one of the best way to do it through code if you want to toggle the icon color! Thanks! – Jérémy Mar 05 '19 at 19:23
I tried with setImageResource with the same drawable with a different color but didn't workout. This was the best way for me – SagaRock101 Jan 16 '21 at 11:04
This worked for me as well. I had to change the fab icon and it's color during on click of it. – Kalaiselvan Jun 30 '21 at 10:17

score 7 · Answer 7 · answered Aug 31 '16 at 20:37

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

answered Aug 31 '16 at 20:37

alexbirkett

2,604
2
26
30

3

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). – arekolek Feb 03 '17 at 15:32

score 6 · Answer 8 · answered May 18 '21 at 14:41

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

score 5 · Answer 9 · answered Dec 02 '20 at 11:22

5

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

answered Dec 02 '20 at 11:22

Innocent_Kyalo

61
1
4

score 4 · Answer 10 · answered Jan 13 '21 at 13:10

4

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

answered Jan 13 '21 at 13:10

Mohammad No3ratii

69
3

score 3 · Answer 11 · answered Feb 02 '21 at 11:59

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

score 3 · Answer 12 · edited Aug 31 '21 at 03:47

3

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

edited Aug 31 '21 at 03:47

Aldan

674
9
23

answered Jun 02 '21 at 06:44

Nanda Z

1,604
4
15
37

score 1 · Answer 13 · answered Mar 04 '21 at 15:00

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

Kishan Solanki · Answer 14 · 2021-04-27T07:30:41.063

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

Then

To change Background Color of Floating Action Button, use app:backgroundTint
To change Floating Action Button's Icon's color, use app:tint

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

Emad Razavi · Answer 15 · 2020-06-29T05:46:59.637

0

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)

edited Jun 29 '20 at 05:46

answered Jun 29 '20 at 05:41

Emad Razavi

1,903
2
17
24

score 0 · Answer 16 · answered Apr 16 '22 at 10:00

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

score 0 · Answer 17 · answered Jan 04 '23 at 17:57

0

This will keep the original color of the icon.

app:tint="@null"

or

android:tint="@null"

answered Jan 04 '23 at 17:57

Erick

303
3
6

score 0 · Answer 18 · answered Mar 23 '23 at 15:39

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

score -1 · Answer 19 · edited Aug 29 '21 at 17:58

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

Set FAB icon color

19 Answers19

Linked

Related