CollapsingToolbarLayout move custom text to center when scrolling

Question

My layout should look like this:

There are some problems that I need to solve:

• A constraintLayout (next week, shopping text) should be on bottom the toolbar.
• A title text Next week can move smoothly to center of toolbar when scrolling completed
• A horizontal progress bar is on bottom of constraintLayout
• A horizontal progress bar need to be pinned when scrolling

Here is what I tried:

And my layout:

 <androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:descendantFocusability="beforeDescendants"
    android:fitsSystemWindows="true"
    android:focusable="true"
    android:focusableInTouchMode="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

            <!-- has a margin top with tool bar height-->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginTop="?attr/actionBarSize"
                android:paddingLeft="@dimen/item_pad"
                android:paddingRight="@dimen/item_pad"
                app:layout_collapseMode="parallax">

                <TextView
                    android:id="@+id/tvTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/next_week"
                    android:textSize="@dimen/text_medium"
                    app:fontFamily="@font/averta_semi_bold"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/tvShoppingList"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/shopping_list"
                    android:textColor="@color/black"
                    android:textSize="@dimen/text_huge_x"
                    app:fontFamily="@font/averta_bold"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/tvTitle" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:tint="@color/main"
                    app:layout_constraintBottom_toBottomOf="@+id/tvShoppingList"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/tvShoppingList"
                    app:srcCompat="@drawable/ic_add" />


            </androidx.constraintlayout.widget.ConstraintLayout>

            <ProgressBar
                android:id="@+id/progressShopping"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rvShopping"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout> 

How can I solve above issues?

Answer 1

1) Add a padding(or margin) of 48dp(height of the toolbar) to the top of constraint layout

 android:paddingTop="48dp"

2) Add an offset changed listener to the AppBarLayout and translate the textView "Next Week" according to the verticalOffset of the AppBar that is visible.

 appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        //Depending on the vertical offset of the AppBarLayout, change the translateY of the textView "Next Week" until it is zero by the time the AppBarLayout is fully collapsed.           
       }
   });

3) & 4) Change the RecyclerView container layout to LinearLayout and put the horizontal progress bar view above the Recyler view so that it will pin to the top even after the app bar is fully collapsed.