Fragment transition with BottomAppBar Material Design Component

user_5111493 0
Viewed 1937

I'm trying to implement the following bottom appbar transition specified in the material design components' documentation with regard to the floating action button.

enter image description here

The official design documentation for this behaviour is specified here

Now, the implementation documentation for this view specifies the following:

FloatingActionButton Alignment Modes The FloatingActionButton can be aligned either to the center (FAB_ALIGNMENT_MODE_CENTER) or to the end (FAB_ALIGNMENT_MODE_END) by calling setFabAlignmentMode(int). The default animation will automatically be run. This can be coordinated with a Fragment transition to allow for a smooth animation from a primary screen to a secondary screen. (source)

I cannot seem to find any examples of behaviour implemented anywhere. The code I use for the bottom appbar component is the following (in my activity 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".main.MainActivity">

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:background="#000">

    </LinearLayout>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:hideOnScroll="true"
        app:navigationIcon="@drawable/ic_hamburger_menu" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bottom_app_bar"
        app:srcCompat="@drawable/ic_add" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

Some guidance or examples on the issue would be very much appreciated.

Thank you!

transition floating-action-button appbar android
1 Answers

You just have to hide it, the listener then detects that its hidden and shows it again, the transition is executed automatically. Also you have to switch the fragment at the same time.

binding.fabMain.hide(new FloatingActionButton.OnVisibilityChangedListener() {
    @Override
    public void onShown(FloatingActionButton fab) {
        super.onShown(fab);
    }

    @Override
    public void onHidden(FloatingActionButton fab) {
        super.onHidden(fab);
        binding.fabMain.show();
    }
});
user_33573130
Related