How to create a overlay layout upon a listview

Question

I have a listview that will be filled with AsyncTask and at the bottom edge of the app I need to show a fixed overlay layout like this:

But I can't figure it out how I can do this in xml? This is my present layout.xml:

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

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

   <!-- Probably I need to do something here  -->

</LinearLayout>

Solution 1

As Daniel has suggested, use a RelativeLayout because it allows stacking of components(same with FrameLayout and SurfaceView). The following code will give you the layout you are looking for:

<?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" >

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

<RelativeLayout
   android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/transparentBlack"
    android:layout_alignParentBottom="true" >

   <TextView
       android:id="@+id/textView2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignBottom="@+id/textView1"
       android:layout_alignParentRight="true"
       android:layout_marginRight="20dp"
       android:text="Medium Text"
       android:textColor="@color/white"
       android:textAppearance="?android:attr/textAppearanceMedium" />

   <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentLeft="true"
       android:layout_centerVertical="true"
       android:layout_marginLeft="40dp"
       android:text="Large Text"
       android:textAppearance="?android:attr/textAppearanceLarge"
       android:textColor="@color/white" />

   </RelativeLayout>

</RelativeLayout>

In the code above, the color hex values used for transparentBlack is #95000000 and white is #ffffff.

Here is an excellent tutorial on the basics of UI design in android: Android User Interface Design: Layout Basics.

Solution 2

Change the parent layout to RelativeLayout or FrameLayout and position the fixed view at the same level of the ListView (but after the ListView)

Something like:

---> RelativeLayout
    --> ListView
    --> Any view as the fixed view

You can then align the fixed view to the bottom of the wrapping RelativeLayout

<?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">

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

   <!-- Here you should position the fixed view  -->
</RelativeLayout>

Comments

[Kaidul]

Thanks it is perfectly working! I am going to read through the link you give :)

[l33t]

What if you want to be able to scroll the bottom-most item above the overlay button?

[Vikram]

@l33t Say you are using an ArrayList to hold list objects. Add an empty spacer item to the end of this list. In getView() of your adapter => when (position == mArrayList.size-1), set height of convertView to your overlay's height => set visibility of convertView to View.INVISIBLE. Haven't tried this - so this approach may need some modifications. If you'd like, you can edit my answer with your final implementation.