Text Input Layout for Sign up and Sign in Android.

Designing is a very important part of every application. The first impression of every application is designing and today we will learn one of the parts of the Text Input Layout. So, let's start.

For Sign up design first of all we need to create one empty activity.

activity_sign_up.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SignUpActivity">

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/txt_hello"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintHeight_percent="0.06"
        android:gravity="center"
        android:text="@string/hello"
        android:textColor="#3F51B5"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/txt_signup"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="Sign Up!"
        android:textColor="#3F51B5"
        android:textSize="32sp"
        android:textStyle="bold"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_hello"
        app:layout_constraintWidth_percent="0.4" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/txtLay_username"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.9"
        app:layout_constraintHeight_percent="0.1"
        android:hint="USERNAME"
        app:endIconMode="clear_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.3">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/txtInput_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLength="20" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/txtLay_emailAdd"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.9"
        app:layout_constraintHeight_percent="0.1"
        android:hint="@string/email_address"
        app:endIconMode="clear_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.4">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/txtInput_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLength="20" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/txtLay_pass_signup"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.9"
        app:layout_constraintHeight_percent="0.1"
        android:hint="PASSWORD"
        app:endIconMode="password_toggle"
        app:endIconDrawable="@drawable/ic_lock"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtLay_emailAdd">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/txt_pass"
            android:inputType="textPassword"
            android:maxLength="15"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </com.google.android.material.textfield.TextInputLayout>


    <!--switchCompact layout direction right is used for switching the text in right direction.-->
    <!--TextAllCaps is used for capitalization-->

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/sh_remember"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:layoutDirection="rtl"
        android:text="@string/i_accept_the_policy_and_terms"
        app:layout_constraintHeight_percent="0.06"
        app:layout_constraintTop_toBottomOf="@id/txtLay_pass_signup"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintVertical_bias="0.8"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintWidth_percent="0.7"
        />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_signup"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHeight_percent="0.07"
        app:layout_constraintWidth_percent="0.5"
        android:background="@drawable/shape"
        android:text="Sign up"
        android:textSize="16sp"
        android:textAllCaps="false"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.7"
        />
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintHeight_percent="0.08"
    app:layout_constraintWidth_percent="0.6"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintVertical_bias="0.8"
    android:gravity="center"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:padding="8dp"
        app:srcCompat="@drawable/ic_googleplus"
        />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="40dp"
        android:padding="8dp"
        android:layout_height="40dp"
        app:srcCompat="@drawable/ic_linkedin"
         />

    <ImageView
        android:id="@+id/imageView3"
        android:padding="8dp"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:srcCompat="@drawable/ic_twitter"
        />
</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Signup activity UI.

Now we will create UI for sign-in activity.

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LoginActivity">

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/txt_welcome"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintHeight_percent="0.06"
        android:gravity="center"
        android:text="@string/welcome_back"
        android:textColor="#3F51B5"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/txt_reg"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="@string/log_in"
        android:textColor="#3F51B5"
        android:textSize="32sp"
        android:textStyle="bold"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_welcome"
        app:layout_constraintWidth_percent="0.4" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/txtLay_user"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.9"
        app:layout_constraintHeight_percent="0.1"
        android:hint="@string/email_address"
        app:endIconMode="clear_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.4">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/txtInput_user"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLength="20" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/txtLay_pass"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.9"
        app:layout_constraintHeight_percent="0.1"
        android:hint="PASSWORD"
        app:endIconMode="password_toggle"
        app:endIconDrawable="@drawable/ic_lock"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtLay_user">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/txt_pass"
            android:inputType="textPassword"
            android:maxLength="15"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/txt_forPassword"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        app:layout_constraintWidth_percent="0.4"
        app:layout_constraintHeight_percent="0.06"
        android:text="@string/forgot_password"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/txtLay_pass"/>

<!--switchCompact layout direction right is used for switching the text in right direction.-->
    <!--TextAllCaps is used for capitalization-->

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/sh_remember"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:layoutDirection="rtl"
        android:text="@string/remember_me"
        app:layout_constraintHeight_percent="0.06"
        app:layout_constraintTop_toBottomOf="@id/txtLay_pass"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintVertical_bias="0.8"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintWidth_percent="0.4"
         />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_login"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHeight_percent="0.07"
        app:layout_constraintWidth_percent="0.5"
        android:background="@drawable/shape"
        android:text="@string/login"
        android:textSize="16sp"
        android:textAllCaps="false"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.8"
         />


</androidx.constraintlayout.widget.ConstraintLayout>

Login Activity UI.

That's it.