Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 598
Ismail Iqbal Avatar asked Feb 18 '18 17:02

Ismail Iqbal


1 Answers

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

like image 120
romtsn Avatar answered Oct 14 '22 06:10

romtsn