Edit text fields snapping into view

Question

So I've been designing in XML in Android Studio a standard log in page - with an image covering about half of the screen, and then the edit text fields occupying the bottom half, asking for the log in details. My problem is that when I tap on the edit text fields on smaller mobile displays, it will only snap to and show the field I have selected, when I think it's far better if it were to automatically snap to show all fields and the 'Next' button at once.

An overview of the page

When I click on 'UserID' field

What I WANT to see when I click on 'UserID' field

How do I achieve this result?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"

tools:context="com.example.android.brunelplanner.LoginActivity">

<!-- Login progress -->
<ProgressBar
    android:id="@+id/login_progress"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:visibility="gone" />

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/logo"
            android:layout_width="match_parent"
            android:layout_height="250sp"
            android:background="@color/colorPrimary"
            android:orientation="vertical"></LinearLayout>

        <RelativeLayout
            android:id="@+id/email_login_form"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/logo"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/login_fields"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingBottom="16dp"
                android:paddingLeft="16dp"
                android:paddingRight="16dp"
                android:paddingTop="16dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:alpha="0.87"
                    android:gravity="center"
                    android:text="eVision Log in"
                    android:textColor="#000000"
                    android:textSize="20sp" />

                <android.support.design.widget.TextInputLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <AutoCompleteTextView
                        android:id="@+id/email"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/prompt_userID"
                        android:inputType="textEmailAddress"
                        android:maxLines="1"
                        android:singleLine="true" />

                </android.support.design.widget.TextInputLayout>

                <android.support.design.widget.TextInputLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <EditText
                        android:id="@+id/password"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/prompt_password"
                        android:imeActionId="@+id/login"
                        android:imeActionLabel="@string/action_sign_in_short"
                        android:imeOptions="actionUnspecified"
                        android:inputType="textPassword"
                        android:maxLines="1"
                        android:singleLine="true" />

                </android.support.design.widget.TextInputLayout>
            </LinearLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/login_fields">

                <Button
                    android:id="@+id/email_sign_in_button"
                    style="?android:textAppearanceSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:text="@string/action_sign_in"
                    android:textStyle="bold" />

            </RelativeLayout>

        </RelativeLayout>

    </RelativeLayout>

</ScrollView>

Try to look at this [thread](https://stackoverflow.com/questions/16411056/how-to-adjust-layout-when-soft-keyboard-appears), I think thats basically what you need. — SILL, Feb 07 '17 at 23:50
Well it's certainly talking about the same problem, but the solution doesn't seem to do anything for me. — j panton, Feb 08 '17 at 13:09

SILL · Accepted Answer · 2017-02-08T17:24:53.427

Cant comment so I have to write here. If you XML in question is current, you have to align parent bottom the whole layout that you want to move up. The bottom alignment must have the whole login form not just button. Also you have linear layout on top which has fixed height, that could be a problem too.

EDIT: Ok, try this, it works on my end. BUT I simplified the XML for testing so dont copy it, just try to edit your xml.

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/login_form"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/logo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/email_login_form"
            android:layout_alignParentTop="true"
            android:background="@color/colorPrimary"
            android:orientation="vertical">

        </LinearLayout>

        <RelativeLayout
            android:id="@+id/email_login_form"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true">

            <LinearLayout
                android:id="@+id/login_fields"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingBottom="16dp"
                android:paddingLeft="16dp"
                android:paddingRight="16dp"
                android:paddingTop="16dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:alpha="0.87"
                    android:gravity="center"
                    android:text="eVision Log in"
                    android:textColor="#000000"
                    android:textSize="20sp" />

                <android.support.design.widget.TextInputLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <android.support.design.widget.TextInputEditText
                        android:id="@+id/email"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="textEmailAddress"
                        android:maxLines="1"
                        android:singleLine="true" />

                </android.support.design.widget.TextInputLayout>

                <android.support.design.widget.TextInputLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <android.support.design.widget.TextInputEditText
                        android:id="@+id/password"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="textPassword"
                        android:maxLines="1"
                        android:singleLine="true" />

                </android.support.design.widget.TextInputLayout>

            </LinearLayout>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/email_login_form"
            android:layout_alignParentBottom="true">

            <Button
                android:id="@+id/email_sign_in_button"
                style="?android:textAppearanceSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_alignParentRight="true"
                android:layout_alignParentBottom="true"
                android:text="sign in"
                android:textStyle="bold" />
        </RelativeLayout>

    </RelativeLayout>
</ScrollView>

Hmm I'm not sure exactly what you mean - where exactly would you place the alignParentBottom? — j panton, Feb 08 '17 at 15:52

Edit text fields snapping into view

1 Answers1