Minimize bottom navigation bar with animation when bottom sheet is expanded

Question

I have a bottom navigation bar and a bottom sheet above it. The bottom sheet can be expanded to fill the entire screen and I would like to add an animation that hides the bottom navigation bar as the bottom sheet is expanded. Below are screenshots of my layout, the expanded image shows what it currently looks like and the desired image shows what I want it to look like. I have looked in the bottom sheet documentation but I could not find anything useful.

Collapsed: https://i.sstatic.net/lrqjA.png

Expanded: https://i.sstatic.net/rr2K8.png

Desired: https://i.sstatic.net/P8a1W.png

Below is my layout

<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:backgroundTint="?attr/colorSurface"
        android:elevation="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_nav_menu">
    </com.google.android.material.bottomnavigation.BottomNavigationView>

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:cameraZoom="13.8"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:context=".MainActivity" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/navigation_bar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:elevation="16dp" >

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

        <LinearLayout
            android:id="@+id/floating_action_buttons"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:clipToPadding="false"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="16dp"
            app:layout_behavior="jonathan.gpsapp.FloatingButtonBehavior">

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/center_map"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:clickable="true"
                android:src="@drawable/ic_center"
                app:backgroundTint="?attr/colorSurface"
                app:fabSize="mini"
                app:tint="?attr/colorPrimary" />

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/record"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:src="@drawable/ic_record"
                app:backgroundTint="?attr/colorPrimary"
                app:fabSize="auto"
                app:tint="#f2f2f2" />
        </LinearLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>```

Answer 1

You need to use the addBottomSheetCallback to listen the slide position of your BotomSheet and with this value you can hide the BottomNavigation smoothly :

private int navigationHeight;

bottomSheet.addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
              
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
               if (navigationHeight == 0)
                     navigationHeight = navigation.getHeight(); //the height of the navigationView
               float slideY = navigationHeight - navigationHeight * (1 - slideOffset);
               navigation.setTranslationY(slideY);//Translate the navigatinView
            }
        });

Note: for a good result you must move the bottom Navigation on the coordinatorlayout