Android - CollapsingToolbarLayout with AppBarLayout (custom toolbar layout)

Question

Is it possible to obtain the following effect?

I have a Toolbar with custom layout as below (wrapped with AppBarLayout for shadow effect) and a RecyclerView below.

When the screen is opened, the title appears in bigger font below toolbar. As I start scrolling, the toolbar should slowly move to the toolbar (like in a classic CollapsingToolbar effect, but this one is with toolbar custom layout).

The screen also contains an integration with Navigation Drawer (click listener from kt file).

There are the images for effect (before start scrolling and after start scrolling) and some of the code I've been trying (without any desired results yet).

Can this effect be achieved only with XML? Or with some help from a scroll listener on kt file? Any help would be nice, just to be closer to the final solution.

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:title="Contacts">

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/titleTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Contacts"
                app:layout_collapseMode="parallax"/>

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/insideAppBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="pin">

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
                    
                    <!-- content inside toolbar: nav drawer icon and two image views -->

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

Yes this effect can be achieved only with XML. Just remove the second AppBarLayout which you have put inside the CollapsingToolbarLayout. I think the second AppBarLayout is messing with what you wanted to achieve.