Designing Forms and Authentication Screens

# CHAPTER 13

Designing Forms and Authentication Screens #

1. Introduction #

2. Learning Objectives #

• Use TextInputLayout to wrap your input fields.

• Customize the style of input fields (Filled vs. Outlined).

• Implement password visibility toggles (the "eye" icon).

• Design clear error states and form validation feedback.

• Build a complete Login/Signup UI.

3. Introducing TextInputLayout #

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email Address"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

4. Customizing the Input Fields #

• FilledBox (style="...FilledBox"): A solid background with a dark bottom indicator line. Great for forms with many fields.

• OutlinedBox (style="...OutlinedBox"): A clean, rounded stroke border around the entire field. Great for simple, high-impact forms like Login screens.

Customizing Colors: You can change the outline color or the floating label color by customizing attributes like app:boxStrokeColor and app:hintTextColor.

5. Password Fields and Icons #

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Password"
    app:endIconMode="password_toggle"> <!-- This adds the Eye icon! -->

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />

</com.google.android.material.textfield.TextInputLayout>

You can also add icons to the *start* of the field using app:startIconDrawable="@drawable/ic_lock".

6. Error States and Form Validation #

In XML, enable errors: app:errorEnabled="true"

In your Kotlin code, set the error text:

val emailLayout = findViewById<TextInputLayout>(R.id.emailInputLayout)
// If email is invalid:
emailLayout.error = "Please enter a valid email address."
// To clear the error:
emailLayout.error = null

When error is set, the outline and the floating label automatically turn red (or your defined error color).

7. Mini Project: Authentication Screen #

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp"
    android:background="#FFFFFF">

    <!-- Hero Image -->
    <ImageView
        android:id="@+id/loginImage"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/ic_secure_login"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="32dp"/>

    <TextView
        android:id="@+id/welcomeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome Back"
        android:textSize="28sp"
        android:textStyle="bold"
        android:layout_marginTop="24dp"
        app:layout_constraintTop_toBottomOf="@+id/loginImage"
        app:layout_constraintStart_toStartOf="parent"/>

    <!-- Email Field -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/emailLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email Address"
        android:layout_marginTop="24dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:startIconDrawable="@drawable/ic_email"
        app:layout_constraintTop_toBottomOf="@+id/welcomeText">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress" />
    </com.google.android.material.textfield.TextInputLayout>

    <!-- Password Field -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/passwordLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:layout_marginTop="16dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:startIconDrawable="@drawable/ic_lock"
        app:endIconMode="password_toggle"
        app:layout_constraintTop_toBottomOf="@+id/emailLayout">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword" />
    </com.google.android.material.textfield.TextInputLayout>

    <!-- Login Button -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/loginButton"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:text="LOGIN"
        android:layout_marginTop="32dp"
        app:cornerRadius="8dp"
        app:layout_constraintTop_toBottomOf="@+id/passwordLayout" />

</androidx.constraintlayout.widget.ConstraintLayout>

8. Design Principles #

• Appropriate Input Types: Always set android:inputType. If asking for an email, textEmailAddress shows the "@" symbol on the keyboard. If asking for a phone number, phone shows the dialpad.

• Clear Call to Action (CTA): The submit button (e.g., LOGIN) should be the most visually prominent element on the screen.

• Avoid Clutter: Only ask for the information you absolutely need.

9. Common Mistakes #

• Hiding Hints: Using a standard EditText where the placeholder text disappears once the user types. If they forget what field they are filling, they have to delete their input to see the hint again. TextInputLayout solves this.

• Tiny Touch Targets: Making input fields too short. The Material recommendation is a minimum height of 56dp for text inputs.

10. Best Practices #

• Auto-focus the first input field when the screen opens so the keyboard pops up immediately, saving the user a tap.

• Provide a "Forgot Password?" link positioned logically near the password field or the login button.

11. Exercises #

1. 1. Modify the inputType of the email field to text and test it on an emulator. Notice how the keyboard changes. Then change it back to textEmailAddress.

1. 2. Add a "Forgot Password?" TextView below the Password input layout, aligned to the End (right) of the parent.

12. UI Design Challenges #

13. MCQ Quiz with Answers #

14. Interview Questions #

• Q: How does setting android:inputType affect the user experience?

• Q: Explain how you would display a validation error on a specific text field without using a Toast or Dialog.

15. Summary #

16. Next Chapter Recommendation #