layout_above not working correctly with layout_alignParentBottom

Question

I'm trying to create a login screen with an EditText where you can enter an email, a TextView that you can press when you've forgotten your password and a Button to go to the next step in the login process.

My current implementation in XML is based on the example code for login screens that you can automatically generate in ADT:

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".LoginActivity" >    

    <!-- Login progress -->    

    <LinearLayout
        android:id="@+id/login_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:visibility="gone" >    

        <ProgressBar
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp" />    

        <TextView
            android:id="@+id/login_status_message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:fontFamily="sans-serif-light"
            android:text="@string/login_progress_signing_in"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </LinearLayout>    

    <!-- Login form -->    

    <ScrollView
        android:id="@+id/login_form"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >    

        <RelativeLayout
            style="@style/LoginFormContainer"
            android:layout_gravity="center"
            android:layout_centerInParent="true"
            android:layout_width="250dp"
            android:layout_height="350dp"
            android:background="@drawable/shop_background"
            android:paddingLeft="16dp"
            android:paddingRight="16dp">    

            <EditText
                android:id="@+id/email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_email"
                android:inputType="textEmailAddress"
                android:maxLines="1"
                android:singleLine="true" />
            <TextView
                android:text="Forgot password"
                android:layout_above="@id/sign_in_button"
                android:id="@+id/forgot_password"
                android:layout_centerHorizontal="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <Button
                android:id="@+id/sign_in_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:paddingLeft="32dp"
                android:paddingRight="32dp"
                android:background="@drawable/button_login"
                android:textColor="@android:color/white"
                android:text="@string/action_sign_in_register"
                android:layout_alignParentBottom="true"/>
        </RelativeLayout>
    </ScrollView>
</merge>

The first part of the MergeLayout shows this when a log in attempt is in progress. The second part of the MergeLayout, the ScrollLayout, shows this.

The TextView that I've created and is in the xml document does not show up on that last screen. In the preview in Android Studio you can also see that it is in the wrong place.

Changing the layout_above to layout_below results in this preview. So it seems as if the TextView thinks that the Button is still at the top instead of at the bottom.

A suggestion I got at /r/androiddev was changing the order of the views in the RelativeLayout such that the TextView is at the bottom and all other views are declared before that. Unfortunately that didn't help.

So is there simply something I'm doing wrong or should I use another way to get the text above the button?

Answer 1

Here is my suggestion, put TextView and Button in a LinearLayout and set android:layout_alignParentBottom="true" to that layout as follows...

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/forgot_password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Forgot password" />

    <Button
        android:id="@+id/sign_in_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:paddingLeft="32dp"
        android:paddingRight="32dp"
        android:background="@drawable/button_login"
        android:text="@string/action_sign_in_register"
        android:textColor="@android:color/white" />

</LinearLayout>