ListView pops other views

Question

I try my best to make the layout look right, and I tried to create the shortest and smallest possible example of my problem.

My goal is to have a header and footer at the top and bottom of the screen with a ListView between, with a different view (call it a label, this is a gray square from the screen snapshots) immediately below the ListView . This label and footer should always be displayed when the ListView needs to scroll.

Visual result

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

When you need to scroll through the ListView , the footer and the gray window are forced out of the screen (wrong):

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> 

Testing

 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 tried several different approaches, for example, giving ListView layout_weight="1" and removing the empty View , which I use to push the footer from the bottom. This is almost what I want, it keeps the footer and label visible when the ListView scrolls, but when it has only 1 or 2 elements, I need a gray window right below the ListView . I also tried using RelativeLayout without success. I guess I totally don’t understand.

EDIT

Here is my attempt with RelativeLayout , which is still incorrect.

 <?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):

Answer 1

Add android:layout_weight="1" to the list. This will make it the biggest element in LinearLayout without pushing others away from the screen.

Answer 2

This layout adds a header to the top of the screen, as well as a footer. The list fills the rest of the screen. With the thesis, aproach list items will never be closed by footer. See how to add a gray box under XML ...

 <?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" /> <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"/> <ListView android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@android:id/list" android:layout_below="@id/header" android:layout_above="@id/footer"/> </RelativeLayout> 

Ok This XML solves the missing footer problem. Now we need to add a gray box at the end of the list. I think there are two ways to do this:

• Use the addFooterView method: http://developer.android.com/reference/android/widget/ListView.html#addFooterView(android.view.View )

• Play with the adapter and the getViewTypeCount () method so that you can define two types or elements: regular elements and a footer element. http://developer.android.com/reference/android/widget/BaseAdapter.html#getViewTypeCount ()

Answer 3

Two years late to answer the question, but I will leave my decision to help someone with the same problem. I solve this problem using 2 nested LinearLayouts and using layout_weigth. This may not be the best layout, but it achieves the desired effect.

You need to arrange the layout in this way:

• Your ListView will have wrap_content height to accept only the necessary space if it does not fill the entire screen.
• Your ListView will be inside the layout with the height using layout_weight, so the list will only have the necessary space if you do not fill the entire screen and do not occupy the limited screen space when it has size to push the views out of the screen.
• The view of the gray window should be immediately below the list, it will have wrap_content height and will distort the layout of step 2.
• This layout and gray box will be inside the second layout with wrap_content height so that they can stay together.

• Now you have a list layout and a gray view, and the list will not push other views out of the screen if it gets too large; you only need to move the footer to the bottom of the screen.

  5a. If you use RelativeLayout as the root layout, you can do it like sgallego and use android: layout_alignParentBottom.

  5 B. But if you use LinearLayout, you need to create a third layout with layout_weigth and put in the layout of step 4 and an empty view also with layout_weigth to fill the empty space.

Here is a comment.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!-- Header --> <TextView android:id="@+id/RecordStudy_StudyLabel" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/RecordStudy_StudyLabel" android:textSize="@dimen/text_large" /> <!-- Body --> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:orientation="vertical" > <!-- This layout encapsules the list and the button that must be immediately below the list with a wrap_content height, so the list plus the button fills only as much space as they need (if the list is not big enouth to fill the entire screen). --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <!-- Layout with varaible size with a list inside. Using layout_weight tells android that this layout should not grow greater then the screen, but uses only the free space. --> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:orientation="vertical" > <!-- Inside this limited height layout, there is a list with height wrap_content so it can grow as much as it needs INSIDE the layout (through scrolling). --> <ListView android:id="@+id/RecordStudy_StudyList" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <!-- Button immediately below the list --> <Button android:id="@+id/RecordStudy_AddStudy" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/RecordStudy_AddStudy" /> </LinearLayout> <!-- Space between the list and the footer --> <View android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> <!-- Footer --> <Button android:id="@+id/RecordStudy_ConfirmButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/RecordStudy_ConfirmButton" /> </LinearLayout> 

Answer 4

One solution that I implemented and found useful was to save the list in a linear layout with a fixed height so that it would not expand and overlap other elements.

Something like that:

 <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" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="150dip" //assume 150dip height is sufficient <ListView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@android:id/list" android:layout_below="@id/header"/> </LinearLayout> <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"/> 

Answer 5

The solution that worked for me was to add a positive addition to the bottom of the list and a negative addition to the top of the "footer". This will work in linear layout or 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"/>