NestedScrollview overlapping CollapsingToolbarLayout like gmusic app

Question

I would like to replicate the behavior of the google play music android app. In that app when you use "My music" album tab, the list of albums starts Over the actionbar (the orange part) as it is "extended". When you scroll up the albums list, that orange part scroll up but more slowly than the list. When you scroll down the list the "orange block" also scrolls down. This behavior is independent of the toolbar and tabs being scrolled.

I'm trying to reproduce such behavior with the new material design library. Using as a starting point the detail activity xml from Cheesquare:

<android.support.design.widget.CoordinatorLayout 
    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|enterAlways|enterAlwaysCollapsed"
            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:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.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.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"
            android:paddingTop="24dp">
        <....>
       </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

I have tried to use the backdrop "imageview" with a color background, and try to move it alongside the nestedview. If I put the imageview inside the CollapsingToolbarLayout with a parallax effect, the problem is that I can't make its heigh bigger to be under the nestedscrollview. If I put the imageview outside the collapsingToolbarLayout but inside the NestedScrollView, I can't change the "velocity" of the viewScrolling. If I put the imageview outside the NestedScrollview, it is drawn over the toolbar even when the toolbar is pined.

Before the material design library, I used a view and a callback to the scrollview to move it up and down, but I want to use the new library as it very clean its remove a lot of boilerplate code.

Any ideas?

Answer 1

In fact, overlaying the scrolling view with the AppBarLayout doesn't require any of that: you can use the app:behavior_overlayTop attribute on your NestedScrollView 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