Question

I’m trying to implement a login view where several EditTexts and a logo are displayed on the screen with a ButtonBar at the bottom, something like this:

alt text http://russellhaering.com/media/addAccount.png

The problem is that on very small screens, especially when they are rotated sideways, the entire main view doesn’t fit onto the screen.

I currently have

<?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"
    android:background="#234C59"  >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:paddingTop="5dip"
        android:paddingLeft="15dip"
        android:paddingRight="15dip"
        android:orientation="vertical" >
        <ImageView
            android:id="@+id/logo"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:layout_centerHorizontal="true"
            android:src="@drawable/logo" />
        <EditText
            android:id="@+id/input_email"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dip"
            android:inputType="textEmailAddress"
            android:singleLine="true"
            android:hint="Username or email" />
        <EditText
            android:id="@+id/input_password"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop=""
            android:inputType="textPassword"
            android:singleLine="true"
            android:hint="Password" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/buttonbar_login"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        style="@android:style/ButtonBar" >
        <Button
            android:id="@+id/button_signup"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Sign Up" />
        <Button
            android:id="@+id/button_login"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Log In" />
    </LinearLayout>
</RelativeLayout>

I’ve tried encapsulating the first LinnearLayout in a ScrollView that looks like this:

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
            <!-- Linear Layout Here -->
</ScrollView>

But that introduces two problems:

1. The ScrollView doesn’t scroll, even on screens where the data doesn’t all fit

2. The ButtonBar floats on top of the onscreen keyboard, obscuring even more of the screen when the keyboard comes up.

Everything worked great when I had the buttons inside the ScrollView, but now that I have them in the ButtonBar I’m having a lot of trouble figuring this out.

Answer 1

It turned out that the solution required two steps:

1. The inability to scroll was a result of the ScrollView being behind the Button Bar. To fix this, I defined the ScrollView below the Button Bar, then used android:layout_above="@id/buttonbar_login" to force the ScrollView to reside entirely above the Button Bar.

2. Apparently when the onscreen keyboard is opened, if you have a ScrollView it will be resized allowing the Button Bar to float up with the keyboard. To fix this I modified the manifest and added android:windowSoftInputMode=”adjustPan” to prevent the ScrollView from resizing.