Question

I am currently working on an android project where I want to have the screen split into three sections.

The first section would be a title which doesn’t move positioned at the top of the screen.
The second section is the main content which is scrollable
The third section are two buttons which are fixed to the bottom of the screen.

In this setup the top and bottom would stay on screen and only the centre part of the screen would be scrollable.

For some reason, when I have tried to do this the top and middle work fine but the bottom which have the buttons have never be shown.

Below is the code that I have used to try to get this working

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/start_eulaTitle"
            android:textSize="15dp"
            android:textStyle="bold" />
        <ScrollView 
            android:layout_width="fill_parent"
            android:layout_height="match_parent">
            <TextView 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/start_eula" />
        </ScrollView>
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        <Button android:id="@+id/start_btnAgree"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/button_agree" />
        </LinearLayout>
    </LinearLayout>

Thanks for any help you can provide.

Answer 1

A RelativeLayout is probably the way to go to accomplish what you’re looking for. Something like:

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

    <TextView
        android:id="@+id/title_textview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/start_eulaTitle"
        android:textSize="15dp"
        android:textStyle="bold" />

    <ScrollView
        android:id="scrolling_layout"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/button_layout"
        android:layout_below="@+id/title_textview" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/start_eula" />
    </ScrollView>

    <LinearLayout
        android:id="@+id/button_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/start_btnAgree"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/button_agree" />

        <Button
            android:id="@+id/start_btnAgree"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/button_agree" />
    </LinearLayout>

</RelativeLayout>

This basically tells the LinearLayout with the buttons to always align to the bottom of the screen, while the title TextView will by default sit at the left top. The scrollable area is defined to stay inbetween these two: below the title but above the buttons.

//Edit: If you really want to stick with a LinearLayout as root, you could potentially also do the following:

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/start_eulaTitle"
        android:textSize="15dp"
        android:textStyle="bold" />

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="0dp" 
        android:layout_weight="1">

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/start_eula" />
    </ScrollView>

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

        <Button
            android:id="@+id/start_btnAgree"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/button_agree" 
            android:layout_weight="1"/>

        <Button
            android:id="@+id/start_btnAgree"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/button_agree"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

The magic happens by setting a weight of 1 to the ScrollView. This will dynamically stretch the view as much as possible, without pushing anything off-screen.