How to change FAB background color

Question

I am using Floating Action Button and I want to change the background color.

Here is my code

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btnfab"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="right|center_vertical"
        android:layout_marginBottom="20dp"
        android:src="@drawable/search" />

Here is the code I am using to try and achieve this:

1- android:background="@color/mycolor"
2- android:backgroundTint="@color/white"

I am also getting corners on my FAB as shown in image. How should I remove those corner shadows?

I didnt add any fab dependencies. I just use fab by creating BlankActivity then copy and paste it in my project. It use theme color of my project — Ritesh, Jan 05 '16 at 08:10
Check this post regarding the "corners" of the FAB: http://stackoverflow.com/questions/34332587/how-to-fix-shadow-on-scaled-floatingactionbutton-using-support-library-23/34345100#34345100 — Konstantin Loginov, Jan 05 '16 at 08:49

Damian Kozlak · Accepted Answer · 2016-01-05T09:11:26.990

49

You can remove problematic shadow by adding this attributes to your FloatingActionButton:

app:borderWidth="0dp"
app:elevation="6dp"

There is no background color for FloatingActionButton. You change this component color by:

app:backgroundTint="@color/YOURCOLOR"

Remember to have in your parent layout following line:

xmlns:app="http://schemas.android.com/apk/res-auto"

edited Jan 05 '16 at 09:11

answered Jan 05 '16 at 08:58

Damian Kozlak

7,065
10
45
51

score 9 · Answer 2 · edited Apr 05 '17 at 04:38

9

Declare following in your app style:

<item name="colorAccent">@color/yourColor</ item>

cheers

edited Apr 05 '17 at 04:38

Garg

2,731
2
36
47

answered Jan 05 '16 at 08:45

nikk

407
3
7

1

While this will work, it will affect more than just FAB. So I'd recommend a different solution. – tir38 Jan 19 '16 at 19:03
While this may not be a good solution for everyone (if they want their `colorAccent` to be different than the FAB), in my case it is the perfect solution. – Soren Stoutner Jun 21 '17 at 17:26

score 7 · Answer 3 · answered Nov 17 '18 at 11:56

7

First create a style in your styles.xml:

<style name="PrimaryActionButton" parent="Theme.AppCompat.Light">
<item name="colorAccent">@color/colorPrimary</item>
</style>

Then set the theme of your fab to this style:

<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_favorite_white_24dp"
android:theme="@style/PrimaryActionButton"
app:fabSize="normal"
app:rippleColor="@color/colorAccent" />

You can see full descrption in: Android: Floating Action button

answered Nov 17 '18 at 11:56

therealak12

1,178
2
12
26

2

This way you can support APIs less than 21. While the accepted answer doesn't do so. – therealak12 Nov 17 '18 at 11:58
I agree... For API's less than 21, this is the solution. This also works on newer API's so this is the most versatile answer. – Smitty-Werben-Jager-Manjenson Mar 13 '19 at 15:25
This is the best solution – Basil Battikhi Oct 09 '19 at 11:34

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

Please update your android support and android material design libraries in build.gradle.

(Add please your build.gradle file above)

According to these sites:

and Android Developers reference you should use only:

   android:backgroundTint="@color/white"

As I remember, this shadow is well-know problem for Floating action buttons, so please take a look at these additional libraries:

http://android-arsenal.com/tag/173

which may help you to replace this broken element.

Check also:

Hope it help.

How to change FAB background color

4 Answers4

Linked