Overlap scrolling view with AppBarLayout

Question

I want to implement the 'Flexible Space with overlapping content' pattern from the Material design scrolling techniques, such as in this video:

My XML layout right now looks like:

<android.support.design.widget.CoordinatorLayout      android:layout_width="match_parent"     android:layout_height="match_parent">    <android.support.design.widget.AppBarLayout       android:layout_width="match_parent"       android:layout_height="192dp"       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">      <android.support.design.widget.CollapsingToolbarLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         app:layout_scrollFlags="scroll|exitUntilCollapsed">        <android.support.v7.widget.Toolbar           android:layout_height="?attr/actionBarSize"           android:layout_width="match_parent"           app:layout_collapseMode="pin"/>     </android.support.design.widget.CollapsingToolbarLayout>   </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView       android:layout_width="match_parent"       android:layout_height="match_parent"       app:layout_behavior="@string/appbar_scrolling_view_behavior">      <LinearLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical">       <....>     </LinearLayout>   </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout> 

Is there an easy way to accomplish this using the Design Library? Or do I have to build a custom CoordinatorLayout.Behavior to do this?

Answer 1

In fact, overlaying the scrolling view with the AppBarLayout is an included feature of the Android Design Support Library: you can use the app:behavior_overlapTop attribute on your NestedScrollView (or any View using ScrollingViewBehavior) to set the overlap amount:

<android.support.v4.widget.NestedScrollView     android:layout_width="match_parent"     android:layout_height="match_parent"     app:layout_behavior="@string/appbar_scrolling_view_behavior"     app:behavior_overlapTop="64dp"> 

Note that app:behavior_overlapTop only works on views that have the app:layout_behavior="@string/appbar_scrolling_view_behavior" as it is the Behavior that is using the attribute (not the View or the Parent ViewGroup, as attributes usually apply to), hence the behavior_ prefix.

Or set it programmatically via setOverlayTop():

NestedScrollView scrollView = ... CoordinatorLayout.LayoutParams params =      (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams(); AppBarLayout.ScrollingViewBehavior behavior =     (AppBarLayout.ScrollingViewBehavior) params.getBehavior(); behavior.setOverlayTop(128); // Note: in pixels 

Answer 2

In addition to the accepted answer, call setTitleEnabled(false) on your CollapsingToolbarLayout to make the title stay fixed at the top as in the example.

Like this:

CollapsingToolbarLayout.setTitleEnabled(false); 

or by adding it in xml like this:

app:titleEnabled="false" 

Otherwise the title could disappear behind the overlapping content, unless of course, that's the behaviour you want.