CODEWITHSUNDEEP
androidbuttonactionfloating
Anant Shah
Anant Shah

Reputation: 4044

How to change Floating Action button shadow colour

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.

enter image description here

Upvotes: 5

Views: 7635

Answers (5)

Abdullah Programmer
Abdullah Programmer

Reputation: 75

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

  1. 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.

  1. 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 :

enter image description here

Enjoy. You're good to go.

Upvotes: 0

SURESH KRISHNAA R
SURESH KRISHNAA R

Reputation: 1

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

Upvotes: 0

Vikas Acharya
Vikas Acharya

Reputation: 4152

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.
        />

Upvotes: 0

Fareed
Fareed

Reputation: 560

I think you have 2 options:

  1. as @Uttam said, change the elevation of the FAB widget
  2. 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/

Upvotes: 0

Uttam Panchasara
Uttam Panchasara

Reputation: 5865

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.. :)

Upvotes: 2

Related Questions