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?

Answer 1

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"

Answer 2

Declare following in your app style:

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

cheers

Answer 3

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

Answer 4

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

(Add please your build.gradle file above)

According to these sites:

• [CodePath] Floating Action Buttons,
• [Big Nerd Ranch] Floating Action Buttons in Android Lollipop

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:

• Change color of Floating Action Button from Appcompat 22.2.0 programmatically
• Change background on FloatingActionButton?

Hope it help.