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

aindurti picture aindurti · Jun 1, 2015 · Viewed 33.3k times · Source

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>

Answer

ianhanniballake picture ianhanniballake · Jun 1, 2015

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.