使用CoordinatorLayout时如何隐藏工具栏的一部分内容

Question

What I'm trying to achieve is to do some effect with collapsing toolbar.

I have a "title" that when collapsing toolbar is expanded, must be shown under the cross ( im1 ), but collapsing is scrolled, the title must "move" to the next of the cross( im2 ).

I'm trying do this:

<android.support.design.widget.CoordinatorLayout 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:id="@+id/topic_choise_root_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/topic_choise_collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            app:contentScrim="@color/white"
            app:expandedTitleMarginStart="120dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <TextView
                android:id="@+id/topic_choise_collpasing_title"
                android:layout_width="match_parent"
                android:layout_height="128dp"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:fontFamily="@font/montserrat_bold"
                android:gravity="bottom"
                android:lineSpacingExtra="8sp"
                android:textColor="@color/black"
                android:textSize="24sp"
                tools:text="¿Qué te gusta hacer?" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/topic_choise_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/white"
                app:layout_collapseMode="pin">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_32_px_cross" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:gravity="center_horizontal"
                        android:lineSpacingExtra="17sp"
                        android:text="What are you into?"
                        android:textColor="#253238"
                        android:textSize="15sp" />

                </LinearLayout>

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

        </android.support.design.widget.CollapsingToolbarLayout>

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

What I've done is create a "custom toolbar" with the cross and the title. And then add a another textview (with higher text, bolded..etc). But I don't know how to hide the toolbar title when is expanded.

Some real images:

Not Collapsed (the textview of the toolbar must not be visible)

Collapsed

Answer 1

if you want to do it with animation it requires a library if you want something similar without animation you just have to put the part you don't want to disappear inside the toolbar and the rest outside.

and in your code you can follow the state of the app bar and change the visibility accordingly

appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {

                if (state.name().equals("EXPANDED")) {


                } else if (state.name().equals("COLLAPSED")) {

                }
            }
        });