recyclerview and imageview scroll up problem

Question

I have image at the top of my layout and below Imageview I have Recyclerview (Android App,Java,XML)

basically I want the RecyclerView to be positioned below the ImageView and have it scroll up to overlap or collapse the ImageView as the user scrolls up recyclerview

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">




<!--   I want the RecyclerView to be positioned below the ImageView and have it scroll up to overlap the ImageView as the user scrolls up recyclerview-->

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="414dp"
        android:layout_height="357dp"
        android:src="@drawable/thirdimage"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="408dp"
        android:layout_height="561dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />


</androidx.constraintlayout.widget.ConstraintLayout>

when I scroll the recyclerview it basically scrolling in it's own space instead of scrolling up taking the space of imageview

Answer 1

You might need to consider using CoordinatorLayout with CollapsingToolbarLayout to achieve this. I have implemented something similar to what you're asking in one of my project.

Here's a quick example.

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

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

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

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

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

Don't forget to add app:layout_collapseMode="parallax" in the ImageView and scroll behavior in the RecyclerView as app:layout_behavior="@string/appbar_scrolling_view_behavior". Without these properties, you won't be able to see that collapsible scrolling effect.

Something similar that I've added:

you can find this here: https://github.com/vishalnaikawadi/TheSchoolOfRock