How do I move layout on scroll on top of another layout?

Question

I want to move a layout on top of another layout when user scrolls.

for eg. Suppose I have a imageview and below it there is a relative layout inside scrollview. I want to move this relative layout on top on imageview when user scrolls.

Any suggestions?

Edit:-

here is my code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:background="#e0e0e0"
    android:layout_height="match_parent"
    >


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:title="Watch"
            app:titleMargin="16dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            android:background="@color/colorPrimary"
            />

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


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <ImageView

        android:layout_width="match_parent"
        android:src="@drawable/bg"
        android:scaleType="fitXY"
        android:layout_height="160dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
    </RelativeLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:fastScrollEnabled="true"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >


            <include layout="@layout/content_main" ></include>
    </RelativeLayout>


</ScrollView>
</LinearLayout>

No. I want to keep the imageView fixed and move relative layout on top of it when user scrolls. — Anant Pundir, Apr 05 '18 at 17:05
You can place the imageView in one relative layout and apply scrollView to another relative layout(say r2) placed above the image. The r2 layout must scroll above the image then. If not, then post the relevant code. — Abhi, Apr 05 '18 at 17:11
@AnantPundir I have the same requirement. Content should be below Imageview and once user scrolls, it should overlap imageview and scroll to top. But image view height should be same. How did you achive this ? — madhuri H R, Oct 21 '20 at 05:06

Abhi · Accepted Answer · 2018-04-05T19:00:47.290

Try the following code. It should work.

EDITED CODE

I have tested the below code. The textview scrolls above the image now. Replace the textview with your content by using the include tag.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="Watch"
        app:titleMargin="16dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        android:background="@color/colorPrimary"
        />

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY"
        android:src="@drawable/bg" />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fastScrollEnabled="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true">
     <include layout="@layout/content_main" ></include>
    </ScrollView>

</RelativeLayout>
</RelativeLayout>

It is giving error at last two closing tags. Wrong closing tags. I dont know why. They are correct though. — Anant Pundir, Apr 05 '18 at 17:47
With this answer the scrollview is Overlapping the imagview even without scrooling. what i want is that when this activity opens the content is below imagview but scrolls on top of imagview. when user scrolls — Anant Pundir, Apr 05 '18 at 18:17
Check the edited answer. I have replaced your content_main with a textview and tested it. It is now working for me and the text scrolls above the image. — Abhi, Apr 05 '18 at 18:25
Thanks it worked. But when I replace it with my content it doesnt. — Anant Pundir, Apr 05 '18 at 18:37
I have edited the answer and added `` tag instead of textView. If that still produces issues, please explain them. — Abhi, Apr 05 '18 at 19:01

How do I move layout on scroll on top of another layout?

1 Answers1