Android FAB transform to menu

Question

As per the updated material guidelines, the floating action button can transform into a menu as shown below:

Can someone help me with some code or a some links on how to implement this behavior?

Thank you.

Answer 1

Try this way

add below dependencies

implementation 'com.google.android.material:material:1.2.0-alpha05'

Layout file

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.circularreveal.CircularRevealFrameLayout
        android:id="@+id/sheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:background="@android:color/transparent"
        android:visibility="invisible"
        app:layout_behavior="@string/fab_transformation_sheet_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="#2196F3"
                android:padding="10dp"
                android:text="ASK Nilesh" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="#FF9800"
                android:padding="10dp"
                android:text="ASK Nilesh" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="#9C27B0"
                android:padding="10dp"
                android:text="ASK Nilesh" />

            <TextView
                android:id="@+id/tvClose"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="#9C27B0"
                android:padding="10dp"
                android:text="Close" />


        </LinearLayout>
    </com.google.android.material.circularreveal.CircularRevealFrameLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Activity Code

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        fabMenu.setOnClickListener {
            fabMenu.setExpanded(true)
        }
        tvClose.setOnClickListener {
            fabMenu.setExpanded(false)
        }
    }
}

You can find complete example here https://github.com/askNilesh/floating_action_button_menu OUTPUT