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?

how did you get the padding at the top of that listview to show the image? — mastrgamr, Feb 29 '16 at 02:57

score 2 · Accepted Answer · answered Feb 28 '16 at 11:39

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>

That's strange. I did the same thing but the only difference was that my view and lisview had weight. Maybe that was the reason. I will try this and will let you know. Thanks — arash moeen, Feb 28 '16 at 11:44

score 0 · Answer 2 · edited May 23 '17 at 10:32

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>

Android listview to overlay another view

2 Answers2