Placing a button at the bottom of the page and bottom of a list

Question

I am trying to make a button anchored to the bottom of the view and also bottom of the list if the list gets bigger than the view.

So I want them to look like this when list is smaller than screen:

enter image description here

and like this when bigger:

enter image description here

I know I should use RelativeLayout to place the button at the bottom of the page with android:layout_alignParentBottom="true" but when I also add android:layout_below="@id/table_wrapper" my button's height will get messed up if content is smaller than view:

enter image description here

Is there anyone who know how I can accomplish this?

The simplified version of my code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/book_layout_whole"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
    <ScrollView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:fillViewport="true">

        <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
            <LinearLayout
                    android:id="@+id/table_wrapper"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                <LinearLayout
                        android:id="@+id/vertical_header_table"
                        android:layout_width="85dp"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:text="Day"
                            android:gravity="center"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:text="Day"
                            android:gravity="center"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:text="Day"
                            android:gravity="center"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:text="Day"
                            android:gravity="center"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:text="Day"
                            android:gravity="center"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:text="Day"
                            android:gravity="center"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:text="Day"
                            android:gravity="center"/>
                </LinearLayout>

                <LinearLayout
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">
                    <View
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:background="#444444"></View>
                    <View
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:background="#444444"></View>
                    <View
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:background="#444444"></View>
                    <View
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:background="#444444"></View>
                    <View
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:background="#444444"></View>
                    <View
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:background="#444444"></View>
                    <View
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:background="#444444"></View>
                </LinearLayout>
            </LinearLayout>
            <Button
                    android:text="load more"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/table_wrapper"
                    android:layout_alignParentBottom="true"
                    android:gravity="center"
                    android:padding="20dp"
                    />
        </RelativeLayout>
    </ScrollView>
</LinearLayout>

Note 1:

removing android:layout_below="@id/table_wrapper" will result in the button always being at the bottom of the screen, even when there list is bigger than the screen.

Note 2

Adding layout_weight would not work, because the size of my view is dynamic.

What do you mean by aligned with view? the reason for the two LinearLayouts is to create the effect of header (text view) with some icons coming in the gray area — maclir, Jul 15 '13 at 18:42
I can't use ListView because for the icons I'm capturing swipe gesture and scrolling populating the data dynamically. — maclir, Jul 15 '13 at 18:48

score 1 · Accepted Answer · edited Jul 15 '13 at 19:19

1

Then use following, it will surely help you, i have tested it !

      <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:layout_alignParentBottom="true"
        android:layout_below="@id/table_wrapper" >

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="20dp"
            android:text="load more" />
    </LinearLayout>

edited Jul 15 '13 at 19:19

maclir

3,218
26
39

answered Jul 15 '13 at 18:44

Tarsem Singh

14,139
7
51
71

This will result in the button always being at the bottom of the screen, even when there list is bigger than the screen. – maclir Jul 15 '13 at 18:47
hmm :) @maclir test and let me know whats the result ? – Tarsem Singh Jul 15 '13 at 19:14
Thanks a lot :D it worked :) Dont know why I never thought of this solution... I was struggling with this for a long time! – maclir Jul 15 '13 at 19:16

score 0 · Answer 2 · answered Jul 15 '13 at 19:19

I don't know why my post was deleted By George Stocker

Check it maclir should work for you:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/book_layout_whole"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:fillViewport="true" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:id="@+id/table_wrapper"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <LinearLayout
                    android:id="@+id/vertical_header_table"
                    android:layout_width="85dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:gravity="center"
                        android:text="Day" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:gravity="center"
                        android:text="Day" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:gravity="center"
                        android:text="Day" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:gravity="center"
                        android:text="Day" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:gravity="center"
                        android:text="Day" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:gravity="center"
                        android:text="Day" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:gravity="center"
                        android:text="Day" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >

                    <View
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:background="#444444" >
                    </View>

                    <View
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:background="#444444" >
                    </View>

                    <View
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:background="#444444" >
                    </View>

                    <View
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:background="#444444" >
                    </View>

                    <View
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:background="#444444" >
                    </View>

                    <View
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:background="#444444" >
                    </View>

                    <View
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:background="#444444" >
                    </View>
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="5.5"
                android:orientation="vertical" >

                <Button
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:padding="20dp"
                    android:text="load more" />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

</LinearLayout>

Adding layout_weight would not work, because the size of my view is dynamic. — maclir, Jul 15 '13 at 19:21
This would not have any effect since layout_height has to be set to 0dp. http://stackoverflow.com/a/3996104/1432239 — maclir, Jul 15 '13 at 19:24
Like Knight Comented:"Yeah, no need of 0PX. I am referring Android For Programmers book from Dietel, they also don't use that 0px", — Guilherme Gregores, Jul 15 '13 at 19:40
And I'm just using the weight to place the Button to the bottom — Guilherme Gregores, Jul 15 '13 at 19:41
If you insist on using 0dp as height just change the weight of the linear layout of the Button with the table wrapper. — Guilherme Gregores, Jul 15 '13 at 19:59
The answer form Tarsem is working for me. Your answer seems to be working as well, but I don't understand it... Can you explain how it works? — maclir, Jul 15 '13 at 20:26

Placing a button at the bottom of the page and bottom of a list

Note 1:

Note 2

2 Answers2