Android: How can you align a button at the bottom and listview above?
A FrameLayout
s purpose is to overlay things on top of each other. This is not what you want.
In your RelativeLayout
example you set the ListView
s height and width to MATCH_PARENT
this is going to make it take up the same amount of space as its parent, and thus take up all of the space on the page (and covers 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>
The layout_weight
dictates how the extra space is to be used. The Button
does not want to stretch beyond the space it requires, so it has a weight of 0. The ListView
wants to take up all of the extra space, so it has a weight of 1.
You could accomplish something similar using a RelativeLayout
, but if it is just these two items then I think a LinearLayout
is simpler.
<?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. Try it.
I needed two buttons side-by-side at the bottom. I used a horizontal linear layout, but assigning android:layout_height="0dp"
and android:layout_weight="0"
for the buttons' linear layout didn't work. Assigning android:layout_height="wrap_content"
for just the buttons' linear layout did. Here's 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>
RelativeLayout
will ignore its children android:layout_width
or android:layout_height
attributes, if the children have attributes that properly define their left
and right
or top
and bottom
values, respectively.
To achieve the result on the right 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 top
value) and android:layout_above
(defines bottom
value) in your RecyclerView
. This way, RelativeLayout
will ignore android:layout_height="match_parent"
, and the RecyclerView
will be placed above the Button
.
Also, make sure you look into android:layout_alignWithParentIfMissing
, if you have a more complex layout and you still need to define these values.