Android: TextInputLayout stacking on eachother

Question

I am trying to implement TextInputLayout to my layout. I have 3 EditText's. I am wrapping each one within an individual TextInputLayout.

Instead of seperating, they are stacking on top of eachother.

---

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_colour">

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:paddingBottom="16dp">

    <RelativeLayout
        android:id="@+id/sign_in_form_relative"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:padding="8dp">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/username_input_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/sign_in_username"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_alignParentTop="true"
                android:background="@drawable/apptheme_edit_text_holo_light"
                android:drawableLeft="@drawable/ic_action_unread"
                android:drawablePadding="8dp"
                android:drawableStart="@drawable/ic_action_unread"
                android:hint="@string/sign_in_username_field"
                android:imeOptions="actionNext"
                android:inputType="textEmailAddress|textNoSuggestions"
                android:textAppearance="?android:textAppearanceMedium" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/password_input_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/sign_in_password"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_below="@+id/username_input_layout"
                android:background="@drawable/apptheme_edit_text_holo_light"
                android:drawableLeft="@drawable/ic_action_secure_dark"
                android:drawablePadding="8dp"
                android:drawableStart="@drawable/ic_action_secure_dark"
                android:hint="@string/reg_password"
                android:imeOptions="actionNext"
                android:inputType="textPassword"
                android:textAppearance="?android:textAppearanceMedium" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/server_api_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/sign_in_api_url"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_below="@+id/password_input_layout"
                android:background="@drawable/apptheme_edit_text_holo_light"
                android:drawableLeft="@drawable/ic_action_private_server"
                android:drawablePadding="8dp"
                android:drawableStart="@drawable/ic_action_private_server"
                android:hint="@string/sign_in_server_field"
                android:imeOptions="actionDone"
                android:inputType="textUri"
                android:textAppearance="?android:textAppearanceMedium" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/sign_in_button"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_below="@id/server_api_layout"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="16dp"
            android:background="@drawable/selector_normal_to_bright"
            android:padding="8dp"
            android:text="@string/reg_sign_in"
            android:textAppearance="?android:textAppearanceMedium"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/sign_in_forgot_pwd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/sign_in_button"
            android:layout_margin="12dp"
            android:layout_marginBottom="24dp"
            android:clickable="true"
            android:gravity="end"
            android:paddingBottom="16dp"
            android:text="@string/reg_forgot_password"
            android:textAlignment="textEnd"
            android:textAppearance="?android:textAppearanceMedium"
            android:textColor="@color/flavor_hyperlink_text_colour"
            android:textStyle="bold" />
    </RelativeLayout>

</ScrollView>

Please assist.

Thanks

Answer 1

You seem to have the android:layout_below="@+id/username_input_layout" on your EditTextwith ID: android:id="@+id/sign_in_password"

Instead you should have it on your TextInputLayout with ID: android:id="@+id/password_input_layout" like so:

    <android.support.design.widget.TextInputLayout
        android:id="@+id/username_input_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/sign_in_username"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentTop="true"
            android:background="@drawable/apptheme_edit_text_holo_light"
            android:drawableLeft="@drawable/ic_action_unread"
            android:drawablePadding="8dp"
            android:drawableStart="@drawable/ic_action_unread"
            android:hint="@string/sign_in_username_field"
            android:imeOptions="actionNext"
            android:inputType="textEmailAddress|textNoSuggestions"
            android:textAppearance="?android:textAppearanceMedium" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/password_input_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android.layou_below="@+id/username_input_layout">

        <EditText
            android:id="@+id/sign_in_password"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@drawable/apptheme_edit_text_holo_light"
            android:drawableLeft="@drawable/ic_action_secure_dark"
            android:drawablePadding="8dp"
            android:drawableStart="@drawable/ic_action_secure_dark"
            android:hint="@string/reg_password"
            android:imeOptions="actionNext"
            android:inputType="textPassword"
            android:textAppearance="?android:textAppearanceMedium" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/server_api_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android.layou_below="@+id/password_input_layout">

        <EditText
            android:id="@+id/sign_in_api_url"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@drawable/apptheme_edit_text_holo_light"
            android:drawableLeft="@drawable/ic_action_private_server"
            android:drawablePadding="8dp"
            android:drawableStart="@drawable/ic_action_private_server"
            android:hint="@string/sign_in_server_field"
            android:imeOptions="actionDone"
            android:inputType="textUri"
            android:textAppearance="?android:textAppearanceMedium" />
    </android.support.design.widget.TextInputLayout>

This is the way to use layout_below

container1
    editText
container below container1
    editText

You try to do this:

container
    editText
container
    editText below container1

Try this and please report back your progress