Search code examples
androidandroid-recyclerviewmaterial-designandroid-coordinatorlayoutandroid-collapsingtoolbarlayout

Anchor a RecyclerView little higher on a Collapsing Toolbar Layout


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).

expected result

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>

Current result

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.


Solution

  • 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"/>