Android changing Floating Action Button color

Question

I have been trying to change Material's Floating Action Button color, but without success.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_edit_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_mode_edit_white_24dp" />

I have tried to add:

android:background="@color/mycolor"

or via code:

FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.profile_edit_fab);
fab.setBackgroundColor(Color.parseColor("#mycolor"));

or

fab.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#mycolor")));

But none of the above worked. I have also tried the solutions in the proposed duplicate question, but none of them works; the button remained green and also became a square.

P.S. It would be also nice to know how to add ripple effect, couldn't understand that either.

Solution 1

As described in the documentation, by default it takes the color set in styles.xml attribute colorAccent.

The background color of this view defaults to the your theme's colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).

If you wish to change the color

• in XML with attribute app:backgroundTint

<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" >

• in code with .setBackgroundTintList (answer below by ywwynm)

As @Dantalian mentioned in the comments, if you wish to change the icon color for Design Support Library up to v22 (inclusive), you can use

android:tint="@color/white"     

For Design Support Library since v23 for you can use:

app:tint="@color/white"   

Also with androidX libraries you need to set a 0dp border in your xml layout:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" />

Solution 2

Vijet Badigannavar's answer is correct but using ColorStateList is usually complicated and he didn't tell us how to do it. Since we often focus on changing View's color in normal and pressed state, I'm going to add more details:

1. If you want to change FAB's color in normal state, you can just write

   mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));
   

2. If you want to change FAB's color in pressed state, thanks for Design Support Library 22.2.1, you can just write

   mFab.setRippleColor(your color in int);
   

   By setting this attribute, when you long-pressed the FAB, a ripple with your color will appear at your touch point and reveal into whole surface of FAB. Please notice that it won't change FAB's color in normal state. Below API 21(Lollipop), there is no ripple effect but FAB's color will still change when you're pressing it.

Finally, if you want to implement more complex effect for states, then you should dig deeply into ColorStateList, here is a SO question discussing it: How do I create ColorStateList programmatically?.

UPDATE: Thanks for @Kaitlyn's comment. To remove stroke of FAB using backgroundTint as its color, you can set app:borderWidth="0dp" in your xml.

Solution 3

As Vasil Valchev noted in a comment it is simpler than it looks, but there is a subtle difference that I wasn't noticing in my XML.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_edit_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_mode_edit_white_24dp"
    app:backgroundTint="@android:color/white"/>

Notice it is:

app:backgroundTint="@android:color/white"

and not

android:backgroundTint="@android:color/white"

Solution 4

if you try to change color of FAB by using app, there some problem. frame of button have different color, so what you must to do:

app:backgroundTint="@android:color/transparent"

and in code set the color:

actionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.white)));

Solution 5

just use,

app:backgroundTint="@color/colorPrimary"

dont use,

android:backgroundTint="@color/colorPrimary"

View more solutions

Comments

[tachyonflux]

Well, the default color is not green. Where did you set a green color?

[Jjang]

I did not. As you see, this xml is the only place I set up the layout of the button...

[tachyonflux]

Maybe you should create a new project with just the FAB and post the code for the entire thing.

[Jjang]

I really don't see anything I can add. Maybe this: My AppTheme's parent is "@style/Theme.AppCompat.Light", min version is 8 and target version is 21. Maybe it's related to this theme that no color is affecting the fab? I can't use Material theme because it's only for min api 21.

[tachyonflux]

Well, it works great for me. So, if you aren't willing to do anything else to help replicate the issue, then I guess that's it.

[Jjang]

Could you please post an answer with all related code, so I open up a new project / copy it to mine and see if that works at least?

[tachyonflux]

Wow... I basically just asked you to do the same thing and you weren't willing to do it. It is quite hypocritical of you to believe that your code was adequate, but that my addition to your code is not adequate. It falls to the asker to create an MCVE. Thanks.

[Jjang]

works, but then I have to target api 21+. if I target api 8 can't call this method.

[Vijet Badigannavar]

Just include this design library that has been released by google "com.android.support:design:22.2.0". This can be used on devices that are non-lollipop versions! cheers!!

[Jjang]

of course I do, but this is the error on this code: Call requires API level 21 (current min is 8): android.widget.ImageView#setBackgroundTintList

[Vijet Badigannavar]

The minimum API version to use this library is 15 so you need to update it! if you dont want to do it then you need to define a custom drawable and decorate it!

[Jjang]

Oh thanks! I didn't know, thought it was 21 since this is what the error said. Please post this as an answer and I'll accept it!

[Kaitlyn Hanrahan]

Thanks for this, I didn't know how to use ColorStateList. However, your code leaves my FAB with a stroke (outline) of the theme accent color. Do you have any idea how I can remove that stroke (or change it's color, rather) and have a FAB in a special color that looks like that special color is the accent color?

[ywwynm]

@KaitlynHanrahan Please see my update. Thanks for your comment.

[Kaitlyn Hanrahan]

That works perfect -- Lollypop and Kitkat look the same, even both have that little shading so the FAB pops against the same color in the background (I have it partially over the Toolbar). Thanks so much! It's simple but I don't know if I ever would have found that on my own.

[hungryghost]

This doesn't work in Design Support Library v23 for < API 12 devices. It was working in v22, so they broke something, apparently.

[Štarke]

Is there a way how to set app:borderWidth programatically? Thanks

[Štarke]

Is there a way how to set app:borderWidth programatically? Thanks

[ywwynm]

@Štarke Well, after looking at the source code of FloatingActionButton, I'm afraid that you cannot set it programatically right now since there is no setter for mBorderWidth.

[Dantalian]

Note that if you want to also change the image color to white for example you can use: android:tint="@android:color/white"

[realappie]

android:tint="@color/white" didnt work for me because it couldn't resolve it for some reason. android:tint="#ffffff" Works for me though

[MBH]

how will it be in the XML though ?

[Dantalian]

That is because @color/white does not exists in your colors.xml. use @android:color/white or create a color named white or whatever you need

[Vasil Valchev]

use "app:backgroundTint" not "android:backgroundTint"

[Dinesh]

This work for normal colors. If I have given alpha color like #44000000 the frame color issue is reproducible.

[Jason Cheladyn]

You must modify the theme you're using for that Activity in your AndroidManifest.xml. <activity android:name=".Activities.MainActivity" android:theme="@style/AppTheme" />

[Bhargav Rao]

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.

[ywwynm]

@mutkan Yes, as far as I know, someone committed a bug about this and Google fixed it in 23.2.1. So please update your project.

[goelakash]

One thing to be careful of is that #123456 and #12345678 has a difference. The first one is transparent (probably assumes 00 for the first two hex integers).

[Tinashe Chinyanga]

getResources.getColor() is deprecated, consider using ContextCompat.getColor(context, your colour); instead. Hope it helps

[SMBiggs]

Hmm, seems like this should work, but I'm getting compiler errors in the layout file String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay'). Maybe I'm missing a point with the styles.xml....

[SMBiggs]

When coloring the background, please be careful of the auto-complete and use app:backgroundTint and not android:tint, which is the default.

[Shailendra Madda]

app:backgroundTint="@color/orange" worked for me..Thanks

[jpact]

@ScottBiggs use android:theme="@style/AppTheme.FloatingAccentButtonOverlay" but this solutin does not work for me either way...

[creativecreatorormaybenot]

This is important because these are two completely different things: android:backgroundTint="" is from Api level 21 and part of the Lollipop Material Design and will be ignored below Lollipop. Also it doesn't change the FAB colour completely because it is not a solid color. You have to use the app: one to make it work.

[Kapenaar]

Thanks, using android:color caused my app to crash, and it was driving me nuts! Thanks for saving my app and what's left of my sanity ;-)

[HenriqueMS]

@Kapenaar no problem, was scratching my head for a while as well before noticing ;)

[Dushyant Suthar]

What about API 16 which does not have coloarAccent atrribute?

[marienke]

How would this work programatically since on the java side there is no difference like app: and android: in the XML.

[HenriqueMS]

@marienke you can set it with a ColorStatesList, post a new question and post the link here so I can answer it ;)

[KingKongCoder]

getResources().getColor(int id) is deprecated now needs getResources().getColor(int id, Theme theme)

[IgorGanapolsky]

This is the easiest solution, way easier than using a custom drawable.

[Kartik Chugh]

@VasilValchev But the latter seems to work fine for me

[ieselisra]

That's what I needed. Works with android.support.v7

[ievgen]

Not anymore, based on Theme Attribute Mapping the Floating Action Button now (I verified myself) is colored to colorSecondary (com.google.android.material:material:1.1.0-alpha02)

[Yudi karma]

hmmmm this cause android studio autocomplete give result use android:backgroundTint , this answer verry good

[Big_Chair]

Wow, the app:borderWidth is what's been off about my button! Setting it to 0 finally made it look like one clear color

[MainActivity]

The correct way. Tinting gives fill but tiny stroke of colorAccent remains around FAB. To use this needed to set theme for FAB: <style name="FabTheme" parent="Widget.MaterialComponents.FloatingActionButton"> <item name="colorAccent">@color/your_color</item> </style> then add android:theme="@style/FabTheme".

[ManuelTS]

Finally someone who provides simple solutions for FAB background and foreground (icon) colors.

[TeachMeJava]

AAPT: error: duplicate attribute. Just remove one of app:borderWidth="0dp"

[Redar]

Thats the solution I was searchin for. I had a simple fab with backgrountTint and couldn't find a way to change it programmatically until I found this.

[Mateus Melo]

Thanks. That's what I was looking for

[inspire_coding]

I use Data Binding, and I got a NullPointerException...

[jacoballenwood]

for more info: material.io/develop/android/theming/color + material.io/design/color/…