Question

I need to have a user form that is larger than the screen. The layout consists of a fixed “title area”, the form (in a scrollview possibly) and a button on the bottom. I have created three layouts and the middle layout is a ScrollView with a vertically-oriented LinearLayout. Unfortunately, the form pushes the buttons off the screen?!

Is there a simple example to do this?

I suppose that I can use a ListView, but I would think my ScrollView is easier to manage. Here is my layout …

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

    <!-- Title Area on top -->
    <LinearLayout
    android:id="@+id/layout_form"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="0dip"
            android:layout_marginBottom="0dip"
            android:paddingTop="20dip"
            android:paddingBottom="20dip"
            android:paddingLeft="5dip"
            android:paddingRight="10dip"
            android:src="@drawable/logo"
            android:layout_gravity="center"
            android:layout_weight="1"
            />
        <TextView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_gravity="center"
            android:layout_weight="2"
            android:layout_marginTop="0dip"
            android:layout_marginBottom="0dip"
            android:layout_marginLeft="4dip"
            android:layout_marginRight="4dip"
            android:text="@string/title_create"
            />
    </LinearLayout>

    <!-- Form entry on top -->

        <ScrollView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:clipChildren="true"
            >
            <LinearLayout 
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
            >
        <TextView  
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="8dip"
            android:layout_marginRight="8dip"
            android:text="@string/label_field_one"
            />
        <EditText
            android:id="@+id/edit_field_one"
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:singleLine="true"
            android:layout_marginLeft="10dip"
            android:layout_marginRight="10dip"
            android:hint="@string/hint_field_one"
            />
        <TextView  
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="8dip"
            android:layout_marginRight="8dip"
            android:text="@string/label_field_two"
            />
        <EditText
            android:id="@+id/edit_field_two"
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:singleLine="true"
            android:layout_marginLeft="10dip"
            android:layout_marginRight="10dip"
            android:hint="@string/hint_field_two"
            />

            <!-- Repeat label-text and edit-text until done ... -->

            </LinearLayout>
            </ScrollView>


    <!-- "spring" between form and wizard buttons. -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
    />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_weight="2"
        >
        <Button
            android:id="@+id/btn_submit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_weight="1"
            android:text="@string/button_submit"
        />
    </LinearLayout>
        </LinearLayout>


</LinearLayout>

Answer 1

If I understand correctly, this is something that’s brought up pretty commonly – having a fixed header and footer, and fill the middle with whatever (in your case, a ScrollView). Is that what you’re looking for? If so, you’ll want to try something like below:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
        android:id="@+id/header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        >
        //.....stuff here
    </LinearLayout>
    <LinearLayout
        android:id="@+id/footer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        >
        //.....stuff here
    </LinearLayout>
    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/footer"
        android:layout_below="@id/header"
        >
        //......stuff here
    </ScrollView>
</RelativeLayout>

Basically, you define a header, give it a fixed height (wrap_content in this case), and set it to align to the top of the parent (the RelativeLayout). Then, do the same for the footer, aligning it to the bottom of the parent. You could substitute just a Button for the LinearLayout for the footer, for your situation, or you can just place the button inside the LinearLayout. It’s probably slightly faster to inflate the layout without the extra LinearLayout. But anyway, next, define your form, the scrolling area. Set the height to fill_parent, and tell it to be above the footer, and below the header. This will cause it to take up all the remaining space between the header and footer.