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?

I am searching for the oppositve, an image inside CollapsingToolbarLayout should show a few dps more after the toolbar and below the NestedScrollView in another color! — David, Oct 25 '17 at 16:30
I was using FrameLayout, RelativeLayout but always the fragments were overlapped with the actionBar. Using a NestedScrollView as a parent for all of the fragments was the solution. Thanks! — JCarlosR, Mar 30 '18 at 03:38

ianhanniballake · Accepted Answer · 2016-01-17T01:02:38.127

154

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

edited Jan 17 '16 at 01:02

answered Jun 24 '15 at 23:54

ianhanniballake

191,609
30
470
443

1

This is almost working for me, except my RecyclerView (on which I've set the `layout_behavior` and `behavior_overlapTop`) ends up *behind* its sibling AppBarLayout. I've tried switching the order in the XML, but it doesn't seem to have any effect. Any ideas what could be the issue? – Vicky Chijwani Jul 22 '15 at 23:09
1

When I disable scrolling (removing app:layout_scrollFlags attributes) - behavior_overlapTop doesn't work - NestedScrollView goes under AppBarLayout. Do you know how to fix this? – Pavel Biryukov Jul 30 '15 at 09:52
@PavelBiryukov what did you do for API < 21? – Vicky Chijwani Aug 02 '15 at 13:09
I have elevation - it works fine on both :) appcompat library handles android:elevation now – Pavel Biryukov Aug 03 '15 at 09:43
1

Hello, it doesn't work for me. I receive `error no resource identifier found for attribute behavior_overlayTop` – Jack Lynx Jan 17 '16 at 00:47
1

@Lynx - confusingly enough, it is `behavior_overlapTop` but `setOverlayTop()` - overlap vs overlay. Make sure you are using the right one! – ianhanniballake Jan 17 '16 at 01:03

score 22 · Answer 2 · edited May 23 '17 at 12:02

22

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.

edited May 23 '17 at 12:02

Community

1
1

answered Oct 19 '15 at 00:39

G.deWit

1,252
11
14

2

You can put a large enough expandedTitleMarginBottom to the CollapsingToolbarLayout to avoid overlapping the title when expanded. – WindRider Nov 19 '15 at 18:27

Overlap scrolling view with AppBarLayout

2 Answers2

Linked

Related