30

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?

enter image description here

4
  • add please dependencies from build.gradle Jan 5, 2016 at 8:02
  • 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 5, 2016 at 8:10
  • Check this post regarding the "corners" of the FAB: stackoverflow.com/questions/34332587/… Jan 5, 2016 at 8:49
  • @Ritesh I have updated my answer. Jan 5, 2016 at 9:12

4 Answers 4

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

Declare following in your app style:

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

cheers

2
  • 1
    While this will work, it will affect more than just FAB. So I'd recommend a different solution.
    – tir38
    Jan 19, 2016 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. Jun 21, 2017 at 17:26
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

3
  • 2
    This way you can support APIs less than 21. While the accepted answer doesn't do so. Nov 17, 2018 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. Mar 13, 2019 at 15:25
  • This is the best solution Oct 9, 2019 at 11:34
6

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.