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

Currently, the only way to do it quickly and easily is by using third-party libraries.

Yes, it can be done using the Floating Button provided in the design library and it will be a whole lot of work.

I have been using the mentioned library for long and didn't have any problem at all. In my opinion, better to use a third-party library and get started quickly and focus on the core app logic more.

If you want I can give you links to more libraries.

Hope it helps you.

UPDATE

1) Rapid Floating Button (link)

2) Floating Action Button (link)

3) Floating Action Button (link)

4) Android Floating Action Button (link) - This is the one I am using. I needed to modify and add few of my own methods to support my apps demands.

Thanks.

Answer 2

It can be achieved by defining multiple FABs in your layout with all but one (the root FAB) initially hidden. Then add logic to display the hidden FABs when the root fab is clicked. To give users that warm fuzzy feeling add some animations into the mix. Its not as complicated as the accepted answer seems to suggest.

This is a good tutorial on how to do it.

Answer 3

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.