Android listview to overlay another view

Question

I have a view which contains a top view (it's a mapview but it's not implemented yet) and a listview below it.

What I'm trying to do is to make the top of listview to be overlay the bottom of the top view a little bit. Here is something similar to what I'm trying to achieve :

(without the tab headers and the image will be the mapview)

I'm not sure how I can achieve that, here is what I have so far:

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

    <View
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@android:color/holo_red_dark">

    </View>

    <com.hmm.widgets.CustomListView
        android:id="@+id/runners_list"
        android:background="@android:color/darker_gray"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:dividerHeight="10dp"
        android:divider="@android:color/darker_gray">

    </com.hmm.widgets.CustomListView>

</RelativeLayout>

I've tried negative margin which didn't work. I'm not sure how can I achieve something similar. Should I be using FrameLayout?

Answer 1

You can use LinearLayout in your case and design the layout like this. This is a trick of setting a negative layout_marginTop to your custom ListView

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

    <View
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@android:color/holo_red_dark">

    </View>

    <com.hmm.widgets.CustomListView
        android:id="@+id/runners_list"
        android:background="@android:color/darker_gray"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/activity_vertical_margin"
        android:layout_marginRight="@dimen/activity_vertical_margin"
        android:dividerHeight="10dp"
        android:layout_marginTop="-40dp"
        android:divider="@android:color/darker_gray">

    </com.hmm.widgets.CustomListView>

</LinearLayout>

Answer 2

Complementing Reaz's answer , you can do it with RelativeLayout too without using negative margins (which are a bit controversial ).

Note the last four attributes in the CustomListView : you constraint the height with alignParent* , set a dummy height which will be discarded, and offset the view from the top with a margin. The "negative offset" will be 250dp - 200dp = 50 dp .

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

    <View
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@android:color/holo_red_dark">

    </View>

    <com.hmm.widgets.CustomListView
        android:id="@+id/runners_list"    
        android:background="@android:color/darker_gray"
        android:layout_width="match_parent"
        android:dividerHeight="10dp"
        android:divider="@android:color/darker_gray"

        android:layout_height="0dp"
        android:layout_marginTop="200dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true">
    </com.hmm.widgets.CustomListView>
</RelativeLayout>