Overlap scrolling view with AppBarLayout
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
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.