Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ListView pushes other Views off the screen

I'm struggling to get a layout looking correctly, and I've tried to produce the shortest, smallest possible example of my problem.

My goal is to have a header and footer View, at the top and bottom of the screen, with a ListView in between the two, with another View (let's call it the label, it's the gray box from the screen shots) directly below the ListView. This label, and the footer should always be shown when ListView needs to scroll.

Visual Result

When the ListView does not need to scroll (this is correct):

when the ListView doesn't need to scroll

When the ListView needs to scroll, the footer and the gray box are pushed off screen (wrong):

when the ListView needs to scroll

Layout

<?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:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="header"
            android:padding="20dp"
            android:textSize="18sp"
            android:background="@color/red"/>
    <ListView android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:id="@android:id/list" />
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="this should be directly below the ListView, but not pushed off screen when the ListView needs to scroll"
            android:padding="5dp"
            android:background="@color/light_gray"
            android:textColor="@color/black"/>
    <!-- Used to push the footer to the bottom -->
    <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1"/>
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="footer"
            android:padding="20dp"
            android:textSize="18sp"
            android:background="@color/blue"/>
</LinearLayout>

Test Activity

public class TestActivity extends ListActivity
{
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        ArrayList<String> items = new ArrayList<String>();
        items.add("one");
        items.add("two");
        items.add("three");
        items.add("four");
        items.add("five");
        items.add("six");
        items.add("seven");
        items.add("eight");
        items.add("nine");
        items.add("ten");
        setListAdapter(new ArrayAdapter<String>(this, R.layout.simple_list_item_1, items));
        setContentView(com.myproject.android.R.layout.test);
    }
}

I've tried a few different approaches, such as giving the ListView layout_weight="1" and removing the blank View that I use to push the footer to the bottom. This is almost what I want, it keeps the footer and label visible when the ListView scrolls, but when it only has 1 or 2 items, I need the gray box right below the ListView. I've also attempted to use a RelativeLayout, without success. I guess I'm completely misunderstanding things.

EDIT

Here's my attempt with a RelativeLayout which still isn't correct.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="header"
            android:padding="20dp"
            android:textSize="18sp"
            android:background="@color/red"
            android:id="@+id/header"
            />
    <ListView android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:id="@android:id/list"
              android:layout_below="@id/header"/>
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="this should be directly below the ListView, but not pushed off screen when the ListView needs to scroll"
            android:padding="5dp"
            android:background="@color/light_gray"
            android:textColor="@color/black"
            android:layout_below="@android:id/list"/>

    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="footer"
            android:padding="20dp"
            android:textSize="18sp"
            android:background="@color/blue"
            android:layout_alignParentBottom="true"
            android:id="@+id/footer"/>
</RelativeLayout>

Relative Layout (Still Wrong):

relative layout attempt

like image 887
wsanville Avatar asked Mar 09 '12 15:03

wsanville


1 Answers

A solution that worked for me was to add positive padding to the bottom of the list view and negative padding to the top of the "footer". This will work in a linear layout or a relative layout.

<ListView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="50dp"/>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="-50dp"/>
like image 85
Jenny Pushkarskaya Avatar answered Oct 05 '22 23:10

Jenny Pushkarskaya