Android: How can you align the button below and the listview above?

Question

I want to have a button at the bottom of the list.

If I use relativeLayout / FrameLayout, it is aligned, but listView jumps to very fast.

(Behind the button below)

Framelayout:

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="wrap_content" /> <FrameLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentBottom="true"> <Button android:id="@+id/btnButton" android:text="Hello" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" /> </FrameLayout> </FrameLayout> 

RelativeLayout:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent" /> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true"> <Button android:id="@+id/btnButton" android:text="Hello" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" /> </RelativeLayout> </RelativeLayout> 

The above two codes only work as the first image. What I want is the second image.

Does anyone help?

Thank.

Answer 1

A FrameLayout The goal is to FrameLayout things on top of each other. This is not what you want.

In your RelativeLayout example, you set the height and width of the ListView to MATCH_PARENT , this will force it to take up the same amount of space as its parent, and thus take up all the space on the page (and cover the button).

Try something like:

 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ListView android:layout_width="match_parent" android:layout_height="0dip" android:layout_weight="1"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0"/> </LinearLayout> 

layout_weight determines how the extra space will be used. Button does not want to stretch beyond the required space, so it has a weight of 0. ListView wants to take all the extra space, so it has a weight of 1.

You can do something similar with RelativeLayout , but if these are just these two elements, I think LinearLayout simpler.

Answer 2

I need two buttons side by side at the bottom. I used horizontal linear layout, but the purpose of android:layout_height="0dp" and android:layout_weight="0" for the linear layout of the buttons did not help. Purpose android:layout_height="wrap_content" for linear button layouts only. Here is my working layout:

 <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/listView1" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/new_button" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="New" /> <Button android:id="@+id/suggest_button" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Suggest" /> </LinearLayout> </LinearLayout> 

Answer 3

  <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff" > <ListView android:id="@+id/ListView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> </ListView> <FrameLayout android:id="@+id/FrameLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content"> <Button android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button" android:layout_gravity="center_horizontal"> </Button> </FrameLayout> </LinearLayout> 

Here is the design you are looking for. Give it a try.

Answer 4

I use Xamarin Android, and my requirement is exactly the same as William T. Mallard above, that is, a ListView with two side-by-side buttons below it. Solution - this answer did not work in Xamarin Studio, however, when I set the height of the ListView to "0dp", the ListView just disappeared.

My working Xamarin Android code is as follows:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:id="@+id/ListView1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:layout_above="@+id/ButtonsLinearLayout" /> <LinearLayout android:id="@id/ButtonsLinearLayout" android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:layout_alignParentBottom="true"> <Button android:id="@+id/Button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> <Button android:id="@+id/Button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout> </RelativeLayout> 

I aligned the ButtonsLinearLayout at the bottom of the screen and set the ListView to be above the ButtonsLinearLayout.

Answer 5

At your relative height of the listview layout is match_parent , which is fill_parent (for version 2.1 and older), so the best solution is if you want to use the relative layout, then first declare your button, then browse the list, make the list position above your button identifier. If you want the button to always be at the bottom, make it alignParentBottom .. Snippet

 <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/rl1"><Button android:layout_width="MATCH_PARENT" android:layout_height="WRAP_CONTENT" /><ListView android:layout_width="MATCH_PARENT" android:layout_height="0" android:layout_above="@id/listview"/></RelativeLayout> 

This prevents your list from being displayed whole and showing your button.

Answer 6

@jclova another thing you can do is use layout-below=@+id/listviewid in relative layout

Answer 7

RelativeLayout will ignore its child attributes android:layout_width or android:layout_height if children have attributes that correctly define their left and right or top and bottom values, respectively.

To achieve the result on the desired image, showing the list above the button, your layout should look like this:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@android:id/button1" android:layout_alignParentTop="true"/> <Button android:id="@android:id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="@android:string/ok"/> </RelativeLayout> 

The key is to define android:layout_alignParentTop (defines the top value) and android:layout_above (defines the bottom value) in your RecyclerView . That way, the RelativeLayout will ignore android:layout_height="match_parent" , and the RecyclerView will be placed above the Button .

Also, make sure you look in android:layout_alignWithParentIfMissing if you have a more complex layout and you still need to define these values.