How to pin RelativeLayout in CollapsingToolbarLayout

Question

I am using CollapsingToolbarLayout for my activity. Is there a way to pin RelativeLayout that contains Toolbar within instead of pinning Toolbar? I tried to do the following but the RelativeLayout does not pin on top when layout collapses.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/pale_red"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="230dp"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax">

                <android.support.v4.view.ViewPager
                    android:id="@+id/carViewPager"
                    android:layout_width="match_parent"
                    android:layout_height="230dp"/>

                <LinearLayout
                    android:id="@+id/image_count"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:gravity="center"
                    android:layout_gravity="bottom|center"
                    android:background="@android:color/transparent" />

            </FrameLayout>

            <RelativeLayout
                android:id="@+id/toolbarLayout"
                android:layout_width="match_parent"
                android:layout_height="@dimen/toolbar_height"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/toolbar_height"
                    app:popupTheme="@style/AppTheme.PopupOverlay">

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

                <TextView
                    android:id="@+id/activityTitle"
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:textSize="16sp"
                    android:text="@string/shop_info"
                    android:textColor="@color/white" />

            </RelativeLayout>

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

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

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

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

How about removing the **RelativeLayout** and put **TextView** inside the **Toolbar** — Waylan Punch, Jan 05 '17 at 06:29
Ok just tried, but TextView did not disappear by default. I want TextView to only appear when layout is collapsed. — stackyyflow, Jan 05 '17 at 07:20

score 4 · Accepted Answer · answered Sep 13 '17 at 10:59

Like its name Collapsing,everthing except Toolbar is going to be collapsed when scroll up, the only way to pin it is to use "pin" on ToolBar, and only the ToolBar works with "pin". Hence try placing your RelativeLayout outside of CollapsingToolBarLayout ,but inside of AppBarLayout, maybe that's what you need.

I solved it through this question:

How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?

just treat your layout as the TabLayout mentioned in this question.

Hope it helps.

How to pin RelativeLayout in CollapsingToolbarLayout

1 Answers1