Anchor a RecyclerView little higher on a Collapsing Toolbar Layout

Question

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.

romtsn · Accepted Answer · 2018-02-20T19:52:50.667

14

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

edited Feb 20 '18 at 19:52

answered Feb 20 '18 at 19:33

romtsn

11,704
2
31
49

I would not suggest 64dp specific height but use the ?attr/actionBarSize instead – Kostas Drak Feb 25 '18 at 18:55
3

But I mean why? It depends on the use case of the author, so was just an example. – romtsn Feb 25 '18 at 19:15
Thanks for the answer, it worked as expected – Ismail Iqbal Feb 27 '18 at 16:17

score 0 · Answer 2 · answered Feb 23 '18 at 07:31

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

Anchor a RecyclerView little higher on a Collapsing Toolbar Layout

2 Answers2

Linked