如何通过CoordinatorLayout将TextView移动到工具栏中？

Question

I'm working on building a coordinator layout that is made up of a toolbar, a relative layout that is to hide on scroll, a layout that is static always above the scrollable list , and a RecyclerView .

I currently have it laid out as I want it to, as seen here:

• Green is the toolbar
• Orange is the relative layout to hide on scroll
• Red is my static layout that is to stay above the recycler view and move up but not hide.
• White is my RecyclerView

This next image is what it looks like once I scroll the whole way up the recycler view.

So my orange view hides as I want it to, which is perfect. The only step i'm missing is moving the "Title 1" textview into becoming the title of the toolbar. I've seen examples where they have done something kind of similar with an image, but haven't been able to duplicate it yet with a custom behavior. I'm assuming thats what this will take?

Does anyone have any advice on if my layout needs to change to make this possible, and any advice for a custom behavior if that is what this will take?

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
            <!-- HEADER -->
            <RelativeLayout
                android:id="@+id/rel1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="parallax"
                android:background="@color/lightGreen"
                android:layout_marginTop="?attr/actionBarSize"
                android:paddingTop="10dp"
                android:paddingBottom="10dp">
                <TextView
                    android:id="@+id/title1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:text="Resist the urge"
                    android:textSize="35sp"
                    android:includeFontPadding="true"
                    android:layout_centerInParent="true"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/resistUrgeTitleTextView"
                    android:layout_centerHorizontal="true"
                    android:text="Use a method below to help."
                    android:includeFontPadding="true"/>
            </RelativeLayout>

            <FrameLayout
                android:id="@+id/main.framelayout.title"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_gravity="bottom|center_horizontal"
                android:background="@color/lightOrange"
                android:orientation="vertical"
                app:layout_collapseMode="parallax"
                >

                <LinearLayout
                    android:id="@+id/main.linearlayout.title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:orientation="vertical"
                    >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:gravity="bottom|center"
                        android:text="Title 1"
                        android:textColor="@android:color/white"
                        android:textSize="30sp"
                        app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior"
                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="4dp"
                        android:text="Subtitle"
                        android:textColor="@android:color/white"
                        />

                </LinearLayout>
            </FrameLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:backgroundTint="@color/lightGreen"
                app:layout_collapseMode="pin"
                app:title=""/>
            <!--<TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:text="Resist the urge"
                android:textColor="@android:color/black"
                android:textSize="30sp"
                app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior"
                />-->


        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.constraint.ConstraintLayout
            android:id="@+id/cardConstraintLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:background="@android:color/holo_red_dark"
            android:layout_marginTop="0dp">

            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="0dp"
                android:layout_height="175dp"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0"
                android:paddingBottom="50dp"/>
            <android.support.design.widget.TabLayout
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:id="@+id/viewPagerIndicator"
                app:tabBackground="@drawable/pager_indicator_selector_gray"
                app:tabGravity="center"
                app:tabIndicatorHeight="0dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toBottomOf="@id/interventionCategoryViewPager"
                android:layout_marginBottom="10dp"/>
        </android.support.constraint.ConstraintLayout>
        <!-- </android.support.design.widget.CollapsingToolbarLayout>-->
        <!--<android.support.v7.widget.Toolbar
            android:id="@+id/main.toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_anchor="@id/main.framelayout.title"
            app:theme="@style/ThemeOverlay.AppCompat.Dark"
            app:title=""
            app:layout_collapseMode="pin">
        </android.support.v7.widget.Toolbar>-->
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>
  </android.support.design.widget.CoordinatorLayout>

EDIT:

I've got a little bit of progress made. I think I have the layout how I want, and i've got a behavior started. I am able to move the TextView, but it is getting lost behind the toolbar. I want it to go on top of the toolbar. My goal is to move the title from the yellow block into the green block.

Do I need to adjust my layout so make it possible for the textview to appear on top of the title bar?

New code layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="?attr/colorPrimary"
        android:backgroundTint="@color/lightOrange"
        app:title=""
        android:layout_marginTop="20dp"/>
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="bottom|center"
            android:text="Test 1"
            android:textColor="@android:color/white"
            android:textSize="30sp"
            app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior"
            android:elevation="100dp"/>
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
                <LinearLayout
                    android:id="@+id/main.framelayout.title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center_horizontal"
                    android:background="@color/lightGreen"
                    android:orientation="vertical"
                    app:layout_collapseMode="parallax"
                    android:paddingTop="50dp">
                    <!--<TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:gravity="bottom|center"
                        android:text="Resist The Urge"
                        android:textColor="@android:color/white"
                        android:textSize="30sp"
                        app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior"
                        android:paddingTop="20dp"/>-->
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="4dp"
                        android:text="Test 2."
                        android:textColor="@android:color/white"
                        android:paddingBottom="20dp"
                        />
                </LinearLayout>
            </android.support.design.widget.CollapsingToolbarLayout>
            <android.support.constraint.ConstraintLayout
                android:id="@+id/cardConstraintLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"

                android:layout_marginTop="0dp">

                <android.support.v4.view.ViewPager
                    android:id="@+id/viewPager"
                    android:layout_width="0dp"
                    android:layout_height="175dp"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0"
                    android:paddingBottom="50dp"/>
                <android.support.design.widget.TabLayout
                    android:layout_width="wrap_content"
                    android:layout_height="20dp"
                    android:id="@+id/viewPagerIndicator"
                    app:tabBackground="@drawable/pager_indicator_selector_gray"
                    app:tabGravity="center"
                    app:tabIndicatorHeight="0dp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/interventionCategoryViewPager"
                    android:layout_marginBottom="10dp"/>
            </android.support.constraint.ConstraintLayout>
        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v7.widget.RecyclerView>
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

Answer 1

You have to make TextView inside toolbar and set gravity as you want. for your problem it is not necessary to take toolbar, you can also use layout. This is my coordinate layout. In which you can easily adjust TextView inside toolbar.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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:fitsSystemWindows="true"
tools:context="com.sashwati.metrimonial.activity.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:elevation="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@drawable/gradientcolor"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/AppTheme.PopupOverlay">
        <!-- app:layout_scrollFlags="scroll|enterAlways"-->
        <com.sashwati.metrimonial.utils.CustomFontTextView
            android:id="@+id/toolbar_title"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Dhakar Matrimonial"
            android:textColor="@android:color/white"
            android:textSize="@dimen/middium_text_size"
            app:fontName="raleway_regular" />

        <ImageView
            android:id="@+id/iv_chat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginRight="@dimen/middium_padding"
            android:padding="@dimen/small_padding"
            android:src="@android:drawable/stat_notify_chat" />

        <ImageView
            android:id="@+id/iv_universerch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:padding="@dimen/small_padding"
            android:src="@mipmap/search" />

    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

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

Answer 2

My goal is to move the title from the yellow block into the green block.

As your goal is to set the Title from the yellow block into the green there is no need to move Textview in yellow block you can set Title in yellow block with setTitle property of Toolbar.

setCollapseMode with Toolbar you can set it to COLLAPSE_MODE_OFF/COLLAPSE_MODE_PARALLAX/COLLAPSE_MODE_PIN

More Detail on CollapseMode

<android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:layout_collapseMode="pin" /> // to  pin in place until it reaches the bottom of the layout

---

Implement AppBarLayout.OnOffsetChangedListener listener on your AppBarLayout to determine the CollpasingToolbar is collapsed or not and set Title in the Toolbar accordingly.

Call below method on OnCreate() of Activity .

 private void setTitleOfLayout() {
        AppBarLayout appBarLayout = findViewById(R.id.appbar_layout);
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            boolean isShow;
            int scrollRange = -1;

            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (scrollRange == -1) {
                    scrollRange = appBarLayout.getTotalScrollRange();
                }
                if (scrollRange + verticalOffset == 0) {

                  // orange part is not visible so set The title 

                    if (myTitleName != null)
                        toolbar.setTitle(myTitleName);

                    isShow = true;
                } else if (isShow) {
                     // orange part is visible so remove the title with

                      space here make sure your are not setting null in toolbar.

                    toolbar.setTitle(" ");

                    isShow = false;
                }
            }
        });

    }

Answer 3

You have to write a custom behavior for each element you want to move, resize, hide and etc...

just create a class that extends from CoordinatorLayout.Behavior<View> and implement what do you want, finally set widget app:layout_behavior to the custom behavior you wrote.

See my source code on git hub CoordinatorBehavior

And for more information see this GitHub project saulmm CoordinatorExamples