CODEWITHSUNDEEP
androidandroid-layoutmaterial-designfloating-action-button
Anupriya
Anupriya

Reputation: 1693

Android: Vertically expanded Floating Action Button

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.

Upvotes: 11

Views: 20802

Answers (3)

HAXM
HAXM

Reputation: 3908

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.

enter image description here

Upvotes: 4

34m0
34m0

Reputation: 5955

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.

Upvotes: 8

Aritra Roy
Aritra Roy

Reputation: 15615

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.

Upvotes: 19

Related Questions