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.
When the ListView
does not need to scroll (this is correct):
When the ListView
needs to scroll, the footer and the gray box are pushed off screen (wrong):
<?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>
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.
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>
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"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With