Change color of Floating Action Button from Appcompat 22.2.0 programmatically

Question

I would like to know how to change the Floating Action Button color from the Support library 22.2.0 ? I've tried

button.setBackgroundColor(color);

but clearly, this changes the drawable of the button and it turns to a square.

Now I wonder how to change the color but just the color, without touching the shape?

Thanks in advance

Here is the [answer](http://stackoverflow.com/a/31179286/2835520) — IgniteCoders, Nov 15 '16 at 11:32

score 41 · Answer 1 · answered Apr 14 '16 at 21:23

41

Maybe late but could help.

 fab.setBackgroundTintList(ColorStateList.valueOf(Color
                    .parseColor("#33691E")));

and parse the actual color code from a list of colors You can find here

answered Apr 14 '16 at 21:23

Zuko

2,764
30
30

7

Just to add to this: If you don't want to use a hardcoded string color value, and instead reference a color stored in your colors.xml, you can use the following: `fab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(getActivity(), R.color.white)));` – Shahbaz Sheikh Sep 16 '16 at 15:40

tachyonflux · Answer 2 · 2015-06-22T16:32:23.940

32

Create a ColorStateList and set it as the background tint:

button.setBackgroundTintList(new ColorStateList(new int[][]{new int[]{0}}, new int[]{color}));

edited Jun 22 '15 at 16:32

answered Jun 21 '15 at 22:19

tachyonflux

20,103
7
48
67

The colors will be set dynamically, so no xml resource files are possible – user2410644 Jun 22 '15 at 14:48
Then create the color state list dynamically? – tachyonflux Jun 22 '15 at 16:25
Based on the question, the assumption is that `button` is a [android.support.design.widget.FloatingActionButton](https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html). This means that it would be restricted to v7. – tachyonflux Jun 23 '15 at 22:49
12

Or simply ```ColorStateList.valueOf(color)```, from: http://stackoverflow.com/a/32031019/1773325 – iceman Aug 26 '15 at 11:49
1

A note: if setting the background color programmatically don't set any background color related properties in XML. Just found out the hard way that XML defaults will always override any runtimes changes from code (weird). – Marco Miltenburg Feb 05 '17 at 16:47

score 13 · Answer 3 · edited Jan 04 '18 at 13:26

13

To do this backwards compatible:

DrawableCompat.setTintList(DrawableCompat.wrap(fab.getDrawable()), tintColor); // <- icon
DrawableCompat.setTintList(DrawableCompat.wrap(fab.getBackground()), backgroundTintColor); // <- background

edited Jan 04 '18 at 13:26

Derlin

9,572
2
32
53

answered Jul 27 '16 at 16:00

Ralph Pina

761
7
16

Adam Johns · Answer 4 · 2015-06-29T15:08:06.503

11

Create a color resource in colors.xml (R.color.purple in this case) and use it like so:

floatingActionButton.setBackgroundTintList(getResources().getColorStateList(R.color.purple));

edited Jun 29 '15 at 15:08

answered Jun 25 '15 at 21:12

Adam Johns

35,397
25
123
176

3

Please consider explanatory text to accompany your code, to aid future readers. – Matt Jun 29 '15 at 08:50

score 11 · Answer 5 · edited May 23 '17 at 12:02

11

you have to use

in XML with attribute app:backgroundTint
in code with .setBackgroundTintList read this answer

Android changing Floating Action Button color

edited May 23 '17 at 12:02

Community

1
1

answered Oct 19 '15 at 11:52

Saeed Darvish

621
6
29

Thanks. its help me. – pRaNaY Apr 22 '16 at 06:57

score 9 · Answer 6 · answered Dec 12 '16 at 20:45

Method 1: Change floating action bar(fab) color in xml:

To change floating action bar(fab) color just follow this step

just add "app:backgroundTint="#colorcode" " in xml of floating action bar(fab) .. For example

app:backgroundTint="#8393ca"

at the place of #8393ca add any color code you want

Example as usaage..

<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:layout_margin="@dimen/fab_margin"
    app:backgroundTint="#8393ca"
    android:src="@drawable/send" />

Method 2: Change floating action bar color programmatically

just add this line on your code

Firstly create a color red in your values=>colors then add this code in your activity on create

fab.setBackgroundTintList(getResources().getColorStateList(R.color.red));

                                or

fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#33691E")));

credits : http://androidrace.com/2016/12/12/how-to-change-fabfloating-action-bar-color-android/

This change also the text color to the same background color. How to avoid it or change the text color like #FFF? — Fernando Torres, Oct 15 '19 at 00:01
And i noticed about if you are using an a drawable icon, this remove you that too. — Fernando Torres, Oct 15 '19 at 00:01

score 6 · Answer 7 · edited May 23 '17 at 12:34

6

Check the accepted answer here: Android changing Floating Action Button color

If you wish to change the color

in XML with attribute app:backgroundTint

in code with .setBackgroundTintList

edited May 23 '17 at 12:34

Community

1
1

answered Aug 19 '15 at 07:21

Louis CAD

10,965
2
39
58

This is only from API level 21. – marienke May 22 '17 at 07:30
@marienke Are you sure you used the `app` namespace in xml when testing below API 21? – Louis CAD May 22 '17 at 08:42
@LouisCAD http://stackoverflow.com/questions/44108455/android-fab-setbackgroundtintlist-with-colorstatelist-not-working you asked for it :) – marienke May 22 '17 at 08:47
@marienke You just want to use a `ColorStateList` in your xml, use `setEnabled(isNfcEnabled)` from code to make it use the right color from your `ColorStateList` xml file. – Louis CAD May 22 '17 at 08:53
@LouisCAD yes, that would be a correct way to do it, however, then I can't listen for the user tapping the NFC FAB to tell them to go to Settings and enable the NFC on the device. I need to only change the colour of the FAB and based on the isNfcEnabled bool, determine where to go from a tap. – marienke May 22 '17 at 09:15
1

@marienke Then, look at `CheckedTextView` source code to make your FAB subclass have the `checked` state you'll use in your `ColorStateList`. You'll then just have to programmatically change the checked state of your FAB when NFC is switched on or off, probably using a `setChecked(...)` method. – Louis CAD May 22 '17 at 13:45

score 2 · Answer 8 · answered Jan 04 '18 at 13:33

2

Try this code. It will add a tint to the background resource.

button.setBackgroundTintList(getResources().getColorStateList(R.color.yourColor));

answered Jan 04 '18 at 13:33

Ankit Suda

128
2
9

score 1 · Answer 9 · answered Jun 21 '15 at 19:30

1

the attribute name is backgroundTint

so I thinks there's a function named

button.setBackgroundTint(color)

answered Jun 21 '15 at 19:30

florent champigny

979
6
10

score 1 · Answer 10 · answered Jan 30 '16 at 13:05

1

if you are using Floating action button library from https://github.com/Clans/FloatingActionButton then use this

fab.setColorNormal(getResources().getColor(R.color.fab_color1));

answered Jan 30 '16 at 13:05

Maurice

570
6
8

score 1 · Answer 11 · edited Oct 09 '19 at 08:40

1

The XML background:tint color will always override whatever color you gave programmatically. So to give color programmatically, remove android:backgroundTint="#96989A" line from the XML file and use:

button.setBackgroundTintList(getResources().getColorStateList(R.color.yourColor));

edited Oct 09 '19 at 08:40

Druckles

3,161
2
41
65

answered Oct 09 '19 at 08:05

Hemant Dhanuka

35
9

score 0 · Answer 12 · answered Feb 07 '20 at 14:51

Sometimes you got your color in color file and you want to use that one.

WHAT YOU CAN DO IS THIS CODE BELOW

fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor(getString(R.color.youcolor))));

As you know to change it programmatically, you need to use setBackgroundTintList(), then pass the ColorStateList.valueOf() which is required and this one take a certein int and parse it...

Note: if you just put the int color right away it could give you problems to get the color you want sometimes and for that reason i don't use it and don't recommend it to use it like that

Then put within ColorStateList.valueOf(), Color.parseColor() this is what you need to put...

This needs a String but you have the int color in the color file, so what to do?

Within Color.parseColor() pass getString(), this is a method that each activity has, so within getString() you put finally your color as this R.color.yourcolor

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

0

In Kotlin this way:

binding.fAB.iconTint= ColorStateList.valueOf(Color.parseColor("#3F51B5"))

Where binding is a root view and iconTint comes from Extended FAB.

answered Apr 16 '22 at 10:22

Mori

2,653
18
24

score -1 · Answer 14 · answered Aug 23 '17 at 12:33

-1

just use this line in your xml file under floating action button

android:backgroundTint="#96989A"

answered Aug 23 '17 at 12:33

Makvin

3,475
27
26

That is not "programmatically" – straya Oct 14 '19 at 06:17

Change color of Floating Action Button from Appcompat 22.2.0 programmatically

14 Answers14

Linked