How to implement Menu display on Extended Floating Action Button click android

Question

I want to implement the Extended FAB button in the format mentioned on the material website ( https://kstatic.googleusercontent.com/files/8f9b57829c943c97be7c4b2485cf678f041dfe7c7ef523cfb2e97f1aeee21431f83d98cc07befeeed904fabb258298e3a7ac95f9da5d3da7a4adcff658cea851 )

https://material.io/components/buttons-floating-action-button#types-of-transitions

Kindly help on how to achieve the same.

Answer 1

You can use the Material motion and the Transition between Views .

For example define in your layout:

<androidx.coordinatorlayout.widget.CoordinatorLayout 
      android:id="@+id/root"
      ..>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/end_card"
        android:visibility="gone" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        .. />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Then just define the MaterialContainerTransform :

    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            showEndView(fab);
        }
    });

with:

private void showEndView(View startView) {


        // Construct a container transform transition between two views.
        MaterialContainerTransform transition = new MaterialContainerTransform();
        transition.setScrimColor(Color.TRANSPARENT);
        transition.setInterpolator(new FastOutSlowInInterpolator());
        //set the duration....

        //Define the start and the end view
        transition.setStartView(startView);
        transition.setEndView(endCard);
        transition.addTarget(startView);

        // Trigger the container transform transition.
        TransitionManager.beginDelayedTransition(root, transition);
        if (startView != null) {
            startView.setVisibility(View.INVISIBLE);
        }
        if (endCard != null) {
            endCard.setVisibility(View.VISIBLE);
        }
    }

Note: it requires at least the version 1.3.0-alpha01 .