How to change Floating Action button shadow colour

Question

I want to change Floating Action button shadow colour from black/grey to colorprimary/custom color of shadow ** shadow example like below image with **center blue FAB button with light blue shadow not grey shadow. But we can change the FAB button background color. But as you can see in image there is blue shadow of FAB button.I want to achive that thing.

@ahmad aghazadeh See I have updated my code and attached image. see in that center bottom blue FAB button is with light blue shadow not gery.I want to achieve that — Anant Shah, Feb 27 '16 at 10:18
there i no xml code done yet. just assume there is normal layout with Floating action button. That screen change FAB button shadow color change property needed. — Anant Shah, Mar 02 '16 at 10:00

score 2 · Answer 1 · answered Feb 27 '16 at 10:36

2

try this :: app:backgroundTint="@color/colorAccentGrey"

where colorAccentGrey = YourColor

and put xmlns:app="http://schemas.android.com/apk/res-auto" at the beginning of the XML if you forggt,

and for Remove shadow :: app:elevation="0dp"

Hope this will help you.. :)

answered Feb 27 '16 at 10:36

Uttam Panchasara

5,735
5
25
41

2

no this will not help. it just change FAB button background colour not the shadow color. – Anant Shah Feb 27 '16 at 10:47

score 0 · Answer 2 · answered Mar 25 '16 at 18:58

0

I think you have 2 options:

as @Uttam said, change the elevation of the FAB widget
to make a custom design and embed it as an image in your layout as shown here http://androidgifts.com/android-material-design-floating-action-button-tutorial/

answered Mar 25 '16 at 18:58

Fareed

560
2
7
23

Vikas Acharya · Answer 3 · 2019-12-18T07:39:53.130

None of the answer worked for me. So i worked this. anyhow it will give shadow like effect that enough for me

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add_black"
        app:elevation="0dp" // disable outside shawdow
        app:borderWidth="30dp" // make borderwidth to 25dp or height of fab
        app:backgroundTint="#00E5FF" // now you will see only this color with shawdow 
        android:backgroundTint="#00E5FF" // since border is 30dp u ll not see this color and if you want to check reduce border width to 25dp then ull see this color in center as a small dot.
        />

score 0 · Answer 4 · answered May 02 '22 at 16:13

A simple solution is to remove the stroke(border-width), the default value is 0.5dp change it to 0dp, that is

app:borderWidth="0dp"

Refer Regular and mini FAB key properties in Material Design documentation!

Link - https://material.io/components/buttons-floating-action-button/android

Abdullah Programmer · Answer 5 · 2023-04-10T11:25:42.540

Late but I got the solution. Let's get started:

make a custom background shape for shadow in res/drawable folder names as shadow_bg. And paste below code in it:

<?xml version="1.0" encoding="utf-8"?>
    <shape android:shape="oval" 
     xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:type="radial"
        android:startColor="@color/black"
        android:endColor="@android:color/transparent"
        android:gradientRadius="50dp"/>
    </shape>

where startColor will be your shadow color. I am keeping black here.

make your activity's parent layout to CoordinatorLayout and then make a fab(Floating Action Button) and a view for shadow of fab button like this:

    <?xml version="1.0" encoding="utf-8"?>
        <androidx.coordinatorlayout.widget.CoordinatorLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
       <com.google.android.material.floatingactionbutton.FloatingActionButton
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:id="@+id/fab"
           android:src="@drawable/ic_add"/>
        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/shadow_bg"
            app:layout_anchor="@id/fab"
            app:layout_anchorGravity="center"
            android:padding="10dp"/>
    
        </androidx.coordinatorlayout.widget.CoordinatorLayout>

This will show like this :

Enjoy. You're good to go.

How to change Floating Action button shadow colour

5 Answers5