How to scroll a layout on top of another only when user scrolls

Question

I want to scroll a layout on top of another layout. Example there is an Image inn the top, below image (bottom 10% overllaped) I have a relative layout which contains data. When user starts scrolling up, this relative layout has to over the top image and attach to toolbar, top image should be in the same state (no change in height). When user scrolls down it should come back to original place. I searched a lot but ended up with nothing.

For example :

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/testIv"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@mipmap/ic_launcher"/>
    
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/testIv"
        android:background="@color/red">
        
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Hello World"
            android:textColor="@color/white"
            android:textSize="30sp"/>
    </androidx.core.widget.NestedScrollView>
</RelativeLayout>

In this example I have an Imageview and below that a scrollview, when user try to scroll, the scroll should over the imageview and reach the top toolbar.

Updated :

<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
android:fitsSystemWindows="true">

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            android:id="@+id/toolbarImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@mipmap/ic_launcher"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="parallax"/>

    </com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="28sp"
        android:lineSpacingExtra="8dp"
        android:text="@string/large_text" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

In this example, when we scroll, it will collapse the image also, tried with different avlues for scrollFlags and collapseMode.

Expected UI :

Answer 1

Achieving this with BottomSheet behavior on ScrollView keeping image collapseMode inside CoordinateLayout to none. I have created sample demo check it here and added comments for your better understanding.

Demo screenshot here