Overlap sibling view with RelativeLayout

Question

I have a RelativeLayout at the top of my app. Below the RelativeLayout I have a ViewPager.

To explain this in a way that will make sense, imagine the screen's height is 700 pixels. The RelativeLayout is about 200 pixels high.

I want the RelativeLayout to be position absolutely at the top of the app such that the ViewPager is behind it. I then want to add a 200 pixel paddingTop to the ViewPager so that it appears under the RelativeLayout.

Here is the layout I have now (which is obviously not working):

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        ...

    </RelativeLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</LinearLayout>

I load a ListView with some data under the header :

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

How can I do this?

Answer 1

Try changing the linearlayout to a framelayout. This will allow the views to be placed on top of each other.

Then put the code for the pageviewer above the relativelayout. This will make the pageviewer appear to be behind the relativelayout as it is rendered first, and the relativelayout rendered on top of it. Android will render views in the order in which they are declared.

Lastly, add a top margin/padding to the pageviewer to make it seem positioned below the relativelayout.

Answer 2

Here's what you can do:

• Use RelativeLayout instead of LinearLayout as the root.

• Move the ViewPager(pager) view to the top of child RelativeLayout(header)

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.v4.view.ViewPager android:id="@+id/pager" android:paddingTop="200px" android:layout_width="match_parent" android:layout_height="match_parent" /> <RelativeLayout android:id="@+id/header" android:layout_width="match_parent" android:layout_height="wrap_content"> </RelativeLayout> </RelativeLayout>