Anchor a RecyclerView little higher on a Collapsing Toolbar Layout [duplicate]

Question

This question already has answers here:

Overlap scrolling view with AppBarLayout (2 answers)

Is it possible to anchor a RecyclerView a little bit higher than it's usual location, Like the FAB icon on most of the collapsible views (see Image 1 for the expected results).

Image 1

I tried the following code but it doesn't give the expected result (see Image 2 for the current result)

<android.support.design.widget.CoordinatorLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:fitsSystemWindows="true"
    app:expanded="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/bannerImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"
            android:src="@drawable/starter_screen_bg"/>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/categories"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:gravity="center"
        >
    </android.support.v7.widget.RecyclerView>

</android.support.design.widget.CoordinatorLayout>

Image 2

Adding app:layout_behavior="@string/appbar_scrolling_view_behavior" attaches the recycler view to the Collapsible View, and then adding margin bottom is neglected.

But removing it gives the expected result, but then the scroll view does not behave as intended (no parallax effect) and scroll's after the background image scrolls.

So it is possible to achieve the collapsible view like the first image.

Answer 1

This is actually pretty easy to achieve - there is a behavior_overlapTop property for each view that has app:layout_behavior="@string/appbar_scrolling_view_behavior". So all you need to do is just to set this property to your RecyclerView:

<android.support.v7.widget.RecyclerView
    android:id="@+id/categories"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    app:behavior_overlapTop="64dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:gravity="center"/>

Answer 2

<android.support.design.widget.CoordinatorLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:fitsSystemWindows="true"
    app:expanded="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/bannerImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"
            android:src="@drawable/starter_screen_bg"/>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/categories"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        app:behavior_overlapTop="?actionBarSize"     // Changed Here only
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:gravity="center" />


</android.support.design.widget.CoordinatorLayout>