[ACCEPTED]-Android: How can you align a button at the bottom and listview above?-alignment

Accepted answer
Score: 185

A FrameLayouts purpose is to overlay things on top 14 of each other. This is not what you want.

In 13 your RelativeLayout example you set the ListViews height and width 12 to MATCH_PARENT this is going to make it take up the 11 same amount of space as its parent, and 10 thus take up all of the space on the page 9 (and covers the button).

Try something 8 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 7 to be used. The Button does not want to stretch 6 beyond the space it requires, so it has 5 a weight of 0. The ListView wants to take up all 4 of the extra space, so it has a weight of 3 1.

You could accomplish something similar 2 using a RelativeLayout, but if it is just these two items 1 then I think a LinearLayout is simpler.

Score: 4
  <?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 1 it.

Score: 4

I needed two buttons side-by-side at the 5 bottom. I used a horizontal linear layout, but 4 assigning android:layout_height="0dp" and android:layout_weight="0" for the buttons' linear 3 layout didn't work. Assigning android:layout_height="wrap_content" for just 2 the buttons' linear layout did. Here's 1 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>
Score: 2

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

To 8 achieve the result on the right image, showing 7 the list above the button, your layout should 6 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 5 top value) and android:layout_above (defines bottom value) in your RecyclerView. This 4 way, RelativeLayout will ignore android:layout_height="match_parent", and the RecyclerView will be placed 3 above the Button.

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

Score: 1

I am using Xamarin Android, and my requirement 9 is exactly the same as William T. Mallard, above, i.e. a 8 ListView with 2 side-by-side buttons under 7 it. The solution is this answer didn't work 6 in Xamarin Studio however - when I set the 5 height of the ListView to "0dp", the ListView 4 simply disappeared.

My working Xamarin Android 3 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 ButtonsLinearLayout 2 to the bottom of the screen, and set the 1 ListView to be above ButtonsLinearLayout.

Score: 0

In your relative layout height of listview 8 is match_parent which is fill_parent(for 2.1 and older) so 7 best solution is if you want to use relative 6 layout then first Declare your button then 5 your list view, make list view position 4 as above your button id, If you want button 3 always at bottom then make it alignParentBottom.. Snippet 2 is

<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 view taking whole 1 place and make your button appear..

Score: 0

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

Score: 0

This will be the best and the most simple 3 solution to the problem. Just add android:layout_above="@id/nameOfId" in the 2 layout that you want to move above with 1 respect to that layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sumeru.commons.activity.CommonDocumentUploadActivity">

    <ListView

        android:id="@+id/documentList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/verifyOtp" />


    <com.sumeru.commons.helper.CustomButton
        android:id="@+id/verifyOtp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="@string/otp_verification" />
</RelativeLayout>

More Related questions