How to make a static button under a ScrollView?

Question

I have the following XML. I'm trying to make a static button underneath my ScrollView. I've tried to set weights, set the button to be below the scrollview, etc. Can someone give me a way that I can get the button to stay at the bottom and the scrollview only take up the middle of the screen?

<?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="wrap_content">



    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/menuButtons"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <Button xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/newItems"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Items" />
        <Button xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/categories"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Categories" />

    </LinearLayout>


    <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/contentScroller"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/menuButtons">

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">


            <TableLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:stretchColumns="1" >


                <TableRow android:layout_marginTop="5dip"
                          android:layout_marginBottom="5dip" >
                    <ImageView
                        android:src="@drawable/thumbdrive"/>"
                    <TextView
                        android:layout_column="1"            
                        android:text="Thumb Drives"            
                        android:padding="3dip" 
                        android:textSize="20dip"/>
                </TableRow>
                <TableRow android:layout_marginTop="5dip"
                          android:layout_marginBottom="5dip">
                    <ImageView
                        android:src="@drawable/laptop"/>
                    <TextView
                        android:layout_column="1"
                        android:text="Laptops"
                        android:padding="3dip"
                        android:textSize="20dip"/>
                </TableRow>
                <TableRow android:layout_marginTop="5dip"
                          android:layout_marginBottom="5dip">
                    <ImageView
                        android:src="@drawable/sdcard"/>
                    <TextView
                        android:layout_column="1"
                        android:text="SD Cards"
                        android:padding="3dip"
                        android:textSize="20dip"/>
                </TableRow>
                <TableRow android:layout_marginTop="5dip"
                          android:layout_marginBottom="5dip">
                    <TextView
                        android:layout_column="1"
                        android:text="Other"
                        android:padding="3dip"
                        android:textSize="20dip"/>
                </TableRow>
                <TableRow android:layout_marginTop="5dip"
                          android:layout_marginBottom="5dip">
                    <TextView
                        android:layout_column="1"
                        android:text="Other"
                        android:padding="3dip"
                        android:textSize="20dip"/>
                </TableRow>
                <TableRow android:layout_marginTop="5dip"
                          android:layout_marginBottom="5dip">
                    <TextView
                        android:layout_column="1"
                        android:text="Other"
                        android:padding="3dip"
                        android:textSize="20dip"/>
                </TableRow>
                <TableRow android:layout_marginTop="5dip"
                          android:layout_marginBottom="5dip">
                    <TextView
                        android:layout_column="1"
                        android:text="Other"
                        android:padding="3dip"
                        android:textSize="20dip"/>
                </TableRow>
                <TableRow android:layout_marginTop="5dip"
                          android:layout_marginBottom="5dip">
                    <TextView
                        android:layout_column="1"
                        android:text="Other"
                        android:padding="3dip"
                        android:textSize="20dip"/>
                </TableRow>
                <TableRow android:layout_marginTop="5dip"
                          android:layout_marginBottom="5dip">
                    <TextView
                        android:layout_column="1"
                        android:text="Other"
                        android:padding="3dip"
                        android:textSize="20dip"/>
                </TableRow>
            </TableLayout>
        </LinearLayout>
    </ScrollView>

    <Button
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Submit New Item"
        android:layout_below="@id/contentScroller"/>

</RelativeLayout>

I solved exactly the same issue yesterday but i found another trick, Just by curiosity, Could you tell me how is the visual in landscape mode? Thank you — tuandroid, Nov 25 '11 at 16:48

score 65 · Answer 1 · answered Apr 12 '13 at 00:51

65

I know this is really late but there is a better solution. The problem with the RelativeLayout approach and aligning the buttons to the bottom of the relative layout is that it forces the layout height to essentially be the same as fill_parent (or match_parent).

The proper way to do this is as follows:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:fillViewport="true">
            <!-- Your Scrollview content goes here -->
    </ScrollView>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:text="Button Text Goes Here" />
</LinearLayout>

The key is to set the height to 0 and then give it a layout weight of 1... From what I can tell from reading up on the layout sizing process, giving it a size of 0 and a layout weight causes it to hold off on sizing the view until after it has processed all the children in the layout... It then comes around on a second pass and is able to size the scrollview properly.

answered Apr 12 '13 at 00:51

Justin

6,564
6
37
34

3

Excellent thanks ! Worked perfectly for me (I haven't got my head around relative layouts yet). – IanB Dec 03 '13 at 22:18
Thank you. Your solution allowed me to have a the (outer) `LinearLayout` to **not stretch** all the way to the bottom of its container if the contents of the `ScrollView` were few (short) but did properly display the `Button` below without squishing it to `1px` (as when you use a `RelativeLayout` and have the `Button` be below the `ScrollView`). If you do not care about the `LinearLayout` stretching down all of the way (i.e. always stretching the scroll area to fill as much space as possible) some of the other solutions seem clearer to me. – jtooker Apr 18 '14 at 21:13
3

Best solution I have seen thus far. – Juan Acevedo Dec 10 '15 at 23:59
2

You should specify `android:orientation="vertical"`. The default one is horizontal. – WindRider Jun 10 '16 at 17:16
2

it actually worked. you deserved it,. heres a +1 for you fella. – ralphgabb Jun 17 '16 at 06:23
Inside a Dialog, the weight and height worked for me, but I had to set `fillViewport` to false. – brandall Mar 07 '18 at 20:44
LinearLayout has better performance than RelativeLayout, so this answer is more sensible than the accepted one. – opsenes Apr 05 '18 at 11:02

score 45 · Accepted Answer · edited Nov 12 '14 at 21:27

45

Use a RelativeLayout. Start with the Button on the bottom, and position the ScrollView above the Button.

Relative Layout - Android Developers

<RelativeLayout
  (...)>

    <LinearLayout android:id="@+id/ll1"
        android:layout_alignParentTop="true"
        (...)/>

    <Button android:id="@+id/button"
        android:layout_alignParentBottom="true"
        (...)/>

    <ScrollView
         android:layout_above="@id/button"
         android:layout_below="@id/ll1"
         (...)/>

</RelativeLayout>

Something like this. Written out of my head, so some errors may occur.

edited Nov 12 '14 at 21:27

john-salib

724
1
12
27

answered Nov 25 '11 at 15:48

nhaarman

98,571
55
246
278

Thanks. I had tried this before, but I had the button after the scrollview so it didn't work, but it works the way you wrote it. – kieblera5 Nov 25 '11 at 16:00
1

This will cause the `RelativeLayout` to stretch down to the bottom of its container. This may be ok. _Note that you cannot have a circular dependency between the size of the RelativeLayout and the position of its children. For example, you cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a child set to ALIGN_PARENT_BOTTOM._ -[RelativeLayout Reference](http://developer.android.com/reference/android/widget/RelativeLayout.html) – jtooker Apr 18 '14 at 21:20
perfect one for my problem... (y) – Elizabeth Feb 12 '16 at 05:34

score 0 · Answer 3 · answered Nov 25 '11 at 15:52

place the button in a relativeLayout and align it to parent bottom:

<RelativeLayout android:layout_alignParentBottom="true" android:layout_width="fill_parent" android:orientation="horizontal"
    android:layout_height="50px">
<Button
    android:id="@+id/submit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:text="Submit New Item"
    android:layout_below="@id/contentScroller"/>
 </RelativeLayout>

How to make a static button under a ScrollView?

3 Answers3

Linked