(Design Support Library) CollapsingToolbarLayout -- Toolbar not getting pinned on collapse

Question

I'm having trouble integrating the Design Support Library into my application. For some reason, the toolbar collapses with the CollapsingToolbarLayout, and does not leave it pinned like in the Cheesesquare example by Chris Banes. https://github.com/chrisbanes/cheesesquare

I didn't do anything different to my layout. In fact, I replaced my styles with his, and dropped in his layout. I wonder if using Toolbar, instead of android.support.v7.widget.Toolbar is causing this.

Here is the problem.

The Problem

Here is my XML of the AppBar section.

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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

    ...

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

What is your view with `app:layout_behavior="@string/appbar_scrolling_view_behavior"`? — ianhanniballake, Jun 01 '15 at 01:57

score 21 · Accepted Answer · answered Jun 01 '15 at 03:28

Your intuition was correct: CollapsingToolbarLayout does rely on you using the support Toolbar - it uses that to set the minimum height of the CollapsingToolbarLayout (among many other things). You should switch to using the support version of the Toolbar to ensure the best experience with CollapsingToolbarLayout.

score 14 · Answer 2 · answered Sep 23 '15 at 06:06

<?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"
    tools:context=".UserDetail" >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        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="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp" >

            <ImageView
                android:id="@+id/imageView_list"
                android:layout_width="match_parent"
                android:layout_height="275dp"
                app:layout_collapseMode="parallax"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                android:src="@drawable/default_profile" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"               
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:clipToPadding="false" >

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



            <TableLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="15dp"
                android:shrinkColumns="1"
                android:stretchColumns="*" >

                <TableRow
                    android:id="@+id/tableRow1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp" >
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" >

                    <TextView
                        android:id="@+id/CurrentAddress"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Current Address:"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txt_CurrentAddress"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:inputType="textMultiLine"
                        android:text="Current Address"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="normal" />
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" >

                    <TextView
                        android:id="@+id/PermanentAddress"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Permanent Address:"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txt_PermanentAddress"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:inputType="textMultiLine"
                        android:text="Permanent Address"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="normal" />
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" >

                    <TextView
                        android:id="@+id/Email"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Email:"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txt_Email"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Email Address"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="normal" />
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" >

                    <TextView
                        android:id="@+id/PhoneNumber"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Phone Number:"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txt_PhoneNumber"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Phone Number"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="normal" />
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" >

                    <TextView
                        android:id="@+id/BirthDate"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Date of Birth:"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txt_BirthDate"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="BirthDate"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="normal" />
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" >

                    <TextView
                        android:id="@+id/Gender"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Gender:"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txt_Gender"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Gender"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="normal" />
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow8"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" >

                    <TextView
                        android:id="@+id/Education"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Education:"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txt_Education"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Education"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="normal" />
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow9"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" >

                    <TextView
                        android:id="@+id/Qualification"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Qualification:"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txt_Qualification"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Qualification"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="normal" />
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow10"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" >

                    <TextView
                        android:id="@+id/BloodGroup"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="BloodGroup:"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txt_BloodGroup"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="BloodGroup"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="normal" />
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow11"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" >

                    <TextView
                        android:id="@+id/MaritalStatus"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="MaritalStatus:"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txt_MaritalStatus"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="MaritalStatus"
                        android:textColor="#000000"
                        android:textSize="15sp"
                        android:textStyle="normal" />
                </TableRow>
            </TableLayout>

          <!--   <Button
                android:id="@+id/addContact"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Add To Contact"
                android:textStyle="bold"
                android:visibility="invisible" /> -->
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

   <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_margin="16dp"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|right|end"
        android:clickable="true"
        android:src="@drawable/addtocontact"
        style="@style/FabStyle"
        />

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

Had to add width and height to the FloatingActionButton. The rest is perfect :) — jobbert, Nov 25 '15 at 10:18
@Bhavinkumar Patel : how to scroll the toolbar same as in what's up. while I am doing toolbar just disappears — DKV, Aug 08 '16 at 05:57
@V V if you want to disappear toolbar while scrolling then just change app:layout_collapseMode="pin" to app:layout_collapseMode="complete" — Bhavinkumar Patel, Aug 08 '16 at 06:01

score 3 · Answer 3 · answered Oct 14 '15 at 14:51

Use app:layout_collapseMode="pin" to ensure that the Toolbar itself remains pinned to the top of the screen while the view collapses.
Even better, when you use CollapsingToolbarLayout and Toolbar together, the title will automatically appear larger when the layout is fully visible, then transition to its default size as it is collapsed.
Note that in those cases, you should call setTitle() on the CollapsingToolbarLayout, rather than on the Toolbar itself.

For more details about implementation visit Android Developers
Blog or details about package CollapsingToolbarLayout

(Design Support Library) CollapsingToolbarLayout -- Toolbar not getting pinned on collapse

3 Answers3

Linked