How to implement toolbar collapse/expend with frgagment?

Question

I want to implement the collapse and expend on the scroll flag SCROLL and ENTER_ALWAYS the toolbar by scrolling the recyclerview inside the fragment layout. In my case I am using the toolbar and bottom navigation with FrameLayout to contain each fragment. So inside my HomeFragment, I am using recylcerview.

Here is my main layout

<?xml version="1.0" encoding="utf-8"?>
<layout>

    <LinearLayout 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"
        android:orientation="vertical"
        tools:context=".ui.milio.main.MainActivity">

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

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorWhite"
                android:padding="@dimen/dimen_12dp">

                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:id="@+id/collapse_tool_bar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <androidx.appcompat.widget.Toolbar
                        android:id="@+id/main_tool_bar"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <TextView
                            android:id="@+id/tvTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentStart="true"
                            android:fontFamily="@font/roboto_medium"
                            android:text="Home"
                            android:textColor="@color/colorBlack"
                            android:textSize="24sp" />

                        <ImageView
                            android:id="@+id/ivSearchIcon"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true"
                            android:layout_marginEnd="@dimen/dimen_7dp"
                            android:layout_toStartOf="@id/ivAddNewPostIcon"
                            android:src="@drawable/ic_search" />

                        <ImageView
                            android:id="@+id/ivAddNewPostIcon"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentEnd="true"
                            android:layout_centerVertical="true"
                            android:src="@drawable/ic_post" />

                    </androidx.appcompat.widget.Toolbar>
                </com.google.android.material.appbar.CollapsingToolbarLayout>
            </com.google.android.material.appbar.AppBarLayout>
        </androidx.coordinatorlayout.widget.CoordinatorLayout>

        <FrameLayout
            android:id="@+id/main_frame_layout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?android:attr/windowBackground"
            app:itemIconTint="@drawable/tab_color"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/navigation" />
    </LinearLayout>
</layout>

Here is my fragment layout

<?xml version="1.0" encoding="utf-8"?>
<layout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:background="@color/colorLayoutBackground"
        android:layout_height="match_parent"
        tools:context=".ui.milio.home.HomeFragment">

        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:id="@+id/swrNewsFeed"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rvNewsFeedFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:descendantFocusability="blocksDescendants"
                android:focusable="false"
                android:focusableInTouchMode="false"/>
        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    </LinearLayout>
</layout>

Thanks

Answer 1

Things you've done wrong is

1. Scrolling view (in your case FrameLayout) should be inside CoordinatorLayout
2. To get collapsing effect, you have to set a fixed height of AppBarLayout
3. You have to set collapse mode for Toolbar
4. You have to set scrolling behavior to the the scrolling view (in your case FrameLayout)

Changed sample code can be as following:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <!--Changes here-->
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_150sdp"
            android:background="@color/white"
            android:fitsSystemWindows="true"
            android:padding="@dimen/_12sdp">

            <!--Changes here-->
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapse_tool_bar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <!--Changes here-->
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/main_tool_bar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin">

                    <TextView
                        android:id="@+id/tvTitle"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentStart="true"
                        android:text="Home"
                        android:textColor="@color/black"
                        android:textSize="24sp" />

                    <ImageView
                        android:id="@+id/ivSearchIcon"
                        android:layout_width="wrap_content"
                        android:layout_height="@dimen/_150sdp"
                        android:layout_centerVertical="true"
                        android:layout_marginEnd="@dimen/_7sdp"
                        android:layout_toStartOf="@id/ivAddNewPostIcon"
                        android:src="@drawable/ic_search" />

                    <ImageView
                        android:id="@+id/ivAddNewPostIcon"
                        android:layout_width="wrap_content"
                        android:layout_height="@dimen/_150sdp"
                        android:layout_alignParentEnd="true"
                        android:layout_centerVertical="true"
                        android:src="@drawable/ic_plus" />

                </androidx.appcompat.widget.Toolbar>
            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>

        <!--Changes here-->
        <FrameLayout
            android:id="@+id/main_frame_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_anchor="@id/appBarLayout"
            app:layout_anchorGravity="bottom"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/create_task_menu" />
</LinearLayout>