Android: Vertically expanded Floating Action Button

Question

Is there a way to achieve a feature like this https://github.com/futuresimple/android-floating-action-button/raw/master/screenshots/menu.gif in android app using material design support library. I don't wanna use any third party library to achieve this feature.

Answer 1

The quickest and easiest way to achieve this is using animate().translationY(int x) function, you can animate the Floating Action button vertically using the function animate().translationY(int x)

In case you are looking for the code in kotlin you can see the code in my github repo animating-FAB

Before writing the code, setup your xml in a way the Floating action button should overlap each other so only one FAB should be vissable: activity_main.xml

<?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.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</com.google.android.material.appbar.AppBarLayout>

<include layout="@layout/content_main" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    app:fabSize="mini"
    app:srcCompat="@android:drawable/ic_dialog_email" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    app:fabSize="mini"
    app:srcCompat="@android:drawable/ic_dialog_map" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:tint="@android:color/white"
    app:fabSize="mini"
    app:srcCompat="@android:drawable/ic_btn_speak_now" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:gravity="center_vertical"
    app:srcCompat="@android:drawable/ic_dialog_info" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Now jumping to the MainActivity.java code you can sinply make two functions, to expend the FAB and collapse the FAB as shown below:

 private void expendFABMenu(){
    fab1.animate().translationY(- 
    getResources().getDimension(R.dimen.standard_55));
    fab2.animate().translationY(- 
    getResources().getDimension(R.dimen.standard_105));
    fab3.animate().translationY(- 
    getResources().getDimension(R.dimen.standard_155));
}

private void collapseFABMenu(){
    isFABOpen=false;
    fab1.animate().translationY(0);
    fab2.animate().translationY(0);
    fab3.animate().translationY(0);
}

Now just add the click listener on the FAB from which you want to expend and collapse the FABs.

    fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if(isFABExpened) {
            isFABExpened = false;
            collapseFABMenu();
        } else {
            isFABExpened = true;
            expendFABMenu();
        }
    }
});

Isn't that was simple, you can check the complete java code in my github repository. In case you are looking for code in kotlin you can check my other github repo animating-FAB.