Android Layout with ListView between a "top bar" and "bottom bar"

Question

I'm trying to construct a layout where there is a text view at the top of the screen and a bottom bar at the bottom of the screen. Each of these views should stay fixed in place and in between the 2 should be a ListView.

TOPBAR
LISTVIEW (scrollable)
BOTTOM BAR

My layout (see below) almost works: the top and bottom components stay fixed and the listview scrolls. The "problem" is that the final row of my ListView remains hidden behind the bottom bar.

Any suggestions on how to adjust the layout?

Thanks!

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"&gt;
    <LinearLayout
            android:layout_alignParentTop="true"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            >
        <TextView
                android:background="@drawable/blackgrad"
                android:gravity="center"
                android:id="@+id/title"
                android:layout_height="50dip"
                android:layout_width="fill_parent"
                android:text="blah blah"
                android:textColor="#ffffff"
                android:textSize="18sp"
                />
        <ListView
                android:background="#ffffff"
                android:cacheColorHint="#ffffffff"
                android:id="@android:id/list"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                />
    </LinearLayout>
    <LinearLayout
            android:background="#efefef"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_width="fill_parent"
            android:layout_height="50dip"
            android:orientation="horizontal">
        <Button
                android:layout_height="wrap_content"
                android:id="@+id/back"
                android:text="Back"
                android:layout_width="wrap_content" />

        <Button
                android:layout_height="wrap_content"
                android:id="@+id/home"
                android:text="Home"
                android:layout_width="wrap_content" />

        <Button
                android:layout_height="wrap_content"
                android:id="@+id/next"
                android:text="Next"
                android:layout_width="wrap_content" />


    </LinearLayout>
</RelativeLayout>

Answer 1

I accomplished what you're trying to do in a similar way, using IDs and the layout_below/layout_above attributes. The Views are arranged in a different way, but the end result is the same. A ListView between two other LinearLayouts, one on top and one on bottom.

In the ListView you can see I have:

android:layout_above="@+id/event_list_buttons"
android:layout_below="@id/title_container"

Those attributes position the ListView between my top and bottom LinearLayouts.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/RelativeLayout01"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"&gt;

    <LinearLayout style="@style/TitleBar">
        <ImageView style="@style/TitleBarLogo" android:src="@drawable/logo_small_transparent" />

        <View style="@style/TitleBarSpring" />

        <ImageView style="@style/TitleBarSeparator" />
        <ImageButton style="@style/TitleBarAction" android:src="@drawable/ic_title_refresh"
            android:id="@+id/title_refresh_button" android:onClick="onClick" />
        <ProgressBar style="@style/TitleBarProgressIndicator"
            android:id="@+id/title_refresh_progress" android:visibility="gone" />

        <ImageView style="@style/TitleBarSeparator" />
        <ImageButton style="@style/TitleBarAction" android:src="@drawable/ic_title_search" />
    </LinearLayout>

    <ListView android:layout_width="fill_parent"
        android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/android:list" android:layout_above="@+id/event_list_buttons"
        android:layout_below="@id/title_container" android:fastScrollEnabled="true"
        android:background="@color/white"></ListView>

    <LinearLayout android:layout_width="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android" android:id="@id/event_list_buttons"
        android:layout_height="wrap_content" android:layout_alignParentBottom="true"
        android:gravity="center_horizontal">

        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:id="@+id/events_list_view_organizing_button"
            android:text="Organizing" android:onClick="onClick"></Button>
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:id="@+id/events_list_view_attending_button"
            android:text="Attending" android:onClick="onClick"></Button>

    </LinearLayout>
</RelativeLayout>

Answer 2

The problem with OPs layout is that the first linear layout is set as android:layout_height="fill_parent" which will cause the first linear layout to fill the parent. It doesn't know that you're going to add further views. What you have to do is add views in the order that they know their size. So you know the size of the top par and the bottom bar, you can add those as android:layout_height="wrap_content". Then add the listview since it's size is unknown at compile time.

Answer 3

Here comes a simple suggestion. Make a new XML and have a go with this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <TextView
        android:text="Header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    <TextView
        android:text="Footer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:layout_gravity="bottom"/>
</LinearLayout>