How to write the following continuous transition of bottom appbar into bottom-navigation-drawer?

Question

I have no knowledge about compose animations and transitions. I like to make the following continuous transition of bottom Appar into bottom navigation drawer in java.

Expected behavior:

The following transition that is a little different of what I want, is from the Reply Material Design Case Study that Kotlin version of it can be found in Google material components android motion codelab.

As I said, I have no knowledge of compose and it is very cumbersome for me. I was only able to successfully compile the google project linked above.

BottomAppBar.xml from Google Material

<?xml version="1.0" encoding="utf-8"?>
<!--
  Copyright (c) 2019 Google Inc. -->

<layout
    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">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:id="@+id/coordinator_layout"
        android:layout_height="match_parent"
        app:layoutFullscreen="@{true}"
        tools:context="com.materialstudies.reply.ui.MainActivity">


        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:fabAlignmentMode="center"
            app:fabCradleRoundedCornerRadius="@dimen/bottom_app_bar_fab_cradle_corner_radius"
            app:fabCradleMargin="@dimen/bottom_app_bar_fab_cradle_margin"
            app:hideOnScroll="true">

            <LinearLayout
                android:id="@+id/bottom_app_bar_content_container"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/min_touch_target_size"
                android:layout_marginVertical="@dimen/grid_0_5"
                android:paddingHorizontal="@dimen/grid_0_5"
                android:orientation="horizontal"
                android:gravity="center_vertical"
                android:foreground="@drawable/bottom_app_bar_title_foreground">

                <ImageView
                    android:id="@+id/bottom_app_bar_chevron"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:contentDescription="@string/bottom_app_bar_chevron_content_desc"
                    android:layout_gravity="center_vertical"
                    app:tint="?attr/colorOnPrimarySurface"
                    app:srcCompat="@drawable/ic_arrow_drop_up" />

                <ImageView
                    android:id="@+id/bottom_app_bar_logo"
                    android:layout_width="@dimen/bottom_app_bar_logo_size"
                    android:layout_height="@dimen/bottom_app_bar_logo_size"
                    android:layout_marginLeft="@dimen/grid_1"
                    android:contentDescription="@string/bottom_app_bar_logo_content_desc"
                    android:layout_gravity="center_vertical"
                    app:srcCompat="@drawable/ic_reply_logo" />

                <TextView
                    android:id="@+id/bottom_app_bar_title"
                    android:textAppearance="?attr/textAppearanceBody1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginHorizontal="@dimen/grid_1"
                    android:text="@string/navigation_inbox"
                    android:textColor="?attr/colorControlNormal"/>

            </LinearLayout>

        </com.google.android.material.bottomappbar.BottomAppBar>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_anchor="@id/bottom_app_bar"
            android:contentDescription="@string/fab_compose_email_content_description"
            app:srcCompat="@drawable/asl_edit_reply" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</layout>

Answer 1

For more help: https://gigadevden.com/infodexeus/articles/7/transition-from-a-bottomappbar-to-a-bottomnavigationdrawer

To transition from a BottomAppBar to a BottomNavigationDrawer, you'll need to make several changes to your XML layout file. Here's an updated version of your code that incorporates the transition:

XML code:

    <?xml version="1.0" encoding="utf-8"?>
<!--
  Copyright (c) 2019 Google Inc. -->

<layout
    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">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutFullscreen="@{true}"
        tools:context="com.materialstudies.reply.ui.MainActivity">

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navigation_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/menu_navigation_drawer"
            app:headerLayout="@layout/header_navigation_drawer" />

        <androidx.drawerlayout.widget.DrawerLayout
            android:id="@+id/drawer_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <com.google.android.material.bottomappbar.BottomAppBar
                    android:id="@+id/bottom_app_bar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    app:fabAlignmentMode="center"
                    app:fabCradleRoundedCornerRadius="@dimen/bottom_app_bar_fab_cradle_corner_radius"
                    app:fabCradleMargin="@dimen/bottom_app_bar_fab_cradle_margin"
                    app:hideOnScroll="true">

                    <LinearLayout
                        android:id="@+id/bottom_app_bar_content_container"
                        android:layout_width="wrap_content"
                        android:layout_height="@dimen/min_touch_target_size"
                        android:layout_marginVertical="@dimen/grid_0_5"
                        android:paddingHorizontal="@dimen/grid_0_5"
                        android:orientation="horizontal"
                        android:gravity="center_vertical"
                        android:foreground="@drawable/bottom_app_bar_title_foreground">

                        <ImageView
                            android:id="@+id/bottom_app_bar_chevron"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:contentDescription="@string/bottom_app_bar_chevron_content_desc"
                            android:layout_gravity="center_vertical"
                            app:tint="?attr/colorOnPrimarySurface"
                            app:srcCompat="@drawable/ic_arrow_drop_up" />

                        <ImageView
                            android:id="@+id/bottom_app_bar_logo"
                            android:layout_width="@dimen/bottom_app_bar_logo_size"
                            android:layout_height="@dimen/bottom_app_bar_logo_size"
                            android:layout_marginLeft="@dimen/grid_1"
                            android:contentDescription="@string/bottom_app_bar_logo_content_desc"
                            android:layout_gravity="center_vertical"
                            app:srcCompat="@drawable/ic_reply_logo" />

                        <TextView
                            android:id="@+id/bottom_app_bar_title"
                            android:textAppearance="?attr/textAppearanceBody1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_marginHorizontal="@dimen/grid_1"
                            android:text="@string/navigation_inbox"
                            android:textColor="?attr/colorControlNormal"/>

                    </LinearLayout>

                </com.google.android.material.bottomappbar.BottomAppBar>

                <com.google.android.material.floatingactionbutton.FloatingActionButton
                    android:id="@+id/fab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_anchor="@id/bottom_app_bar"
                    android:contentDescription="@string/fab_compose_email_content_description"
                    app:srcCompat="@drawable/asl_edit_reply" />

            </androidx.coordinatorlayout.widget.CoordinatorLayout>

            <!-- Your main content here -->

        </androidx.drawerlayout.widget.DrawerLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>