How to design floating action button with 2 layered shadow

Question

Can anyone tell me how to design this kind of floating action button which has two layer of shadow? Does anyone know any library which provides such? Thank you in advance.

Answer 1

Customizing the background of Floating Action Button is bit difficult. Instead you can use an ImageButton with custom background drawable to create your button design.

Step 1: Create button_bg.xml inside res/drawable folder. Replace colors with your original colors.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    //outer circle
    <item >
        <shape android:shape="oval">
            <size android:width="25dp" android:height="25dp"/>
            <solid android:color="#40FE6F51"/>
        </shape>
    </item>

    //mid circle
    <item android:top="4dp"
        android:left="4dp"
        android:right="4dp"
        android:bottom="4dp">
        <shape android:shape="oval">
            <size android:width="25dp" android:height="25dp"/>
            <solid android:color="#40FE6F51"/>
        </shape>
    </item>

    //inner circle
    <item android:top="8dp"
        android:left="8dp"
        android:right="8dp"
        android:bottom="8dp">
        <shape
            android:shape="oval">
            <size android:width="25dp" android:height="25dp"/>
            <gradient android:angle="45"
                android:startColor="#FF4A23" android:endColor="#FF937C"/>
        </shape>
    </item>

</layer-list>

Step 2: Add an image button inside your layout as below. Use previously created button_bg as background for this image button. Replace the src with your own icon

<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/plus_icon"
        android:padding="20dp"
        android:background="@drawable/button_bg"/>