CODEWITHSUNDEEP
androidfloating-action-button
Ritesh
Ritesh

Reputation: 533

How to change FAB background color

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

Upvotes: 30

Views: 43839

Answers (4)

therealak12
therealak12

Reputation: 1316

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

Upvotes: 7

nikk
nikk

Reputation: 407

Declare following in your app style:

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

cheers

Upvotes: 9

Damian Kozlak
Damian Kozlak

Reputation: 7083

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"

Upvotes: 49

piotrek1543
piotrek1543

Reputation: 19351

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.

Upvotes: 6

Related Questions