Material 3 Text Field

Overview

Text fields allow users to enter and edit text.

Material 3 Text Fields, built with TextInputLayout and TextInputEditText, feature animated floating labels in Filled and Outlined variants, adhering to Material Design guidelines. This guide covers implementation, accessibility, and theming.

Using Text Fields

• Add Material Components for Android library dependency
• Use TextInputLayout with TextInputEditText child
• Apply Theme.Material3.* theme for styling

Accessibility

• Set android:hint on TextInputLayout for labels
• Use app:helperText for helper text
• Set app:startIconContentDescription, app:endIconContentDescription for icons
• Use app:errorContentDescription for errors with special characters

Behavior and Configuration

• Configure labels, icons, helper text, errors, counters, dropdown menus
• Use endIconMode for trailing icon behaviors (e.g., password toggle)
• Monitor text changes with doOnTextChanged

      
val textField = findViewById<TextInputLayout>(R.id.text_field)
textField.editText?.doOnTextChanged { inputText, _, _, _ ->
    if (inputText.isNullOrEmpty()) textField.error = "Field cannot be empty"
    else textField.error = null
}
      
    

Text Field Variants

1. Filled Text Field: High visual emphasis
2. Outlined Text Field: Minimal, clean look (default)

Filled Text Field

• Emphasized background, ideal for sparse layouts
• Uses TextInputLayout, TextInputEditText

Example

      
<com.google.android.material.textfield.TextInputLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="?attr/textInputFilledStyle"
    android:id="@+id/filled_text_field"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/username"
    app:endIconMode="clear_text"
    app:endIconContentDescription="@string/clear_text">
    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
      
    

      
val textField = findViewById<TextInputLayout>(R.id.filled_text_field)
textField.editText?.doOnTextChanged { inputText, _, _, _ ->
    // Validate input
}
      
    

Outlined Text Field

• Subtle border, ideal for dense forms
• Default style for Material 3

Example

      
<com.google.android.material.textfield.TextInputLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/outlined_text_field"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/email"
    app:prefixText="@string/email_prefix"
    app:errorEnabled="true">
    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
      
    

      
val textField = findViewById<TextInputLayout>(R.id.outlined_text_field)
textField.editText?.doOnTextChanged { inputText, _, _, _ ->
    textField.error = if (inputText?.contains("@") == true) null else "Invalid email"
}
      
    

Anatomy and Key Properties

Outlined Text Field:

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Component Type
Container	app:boxStrokeColor	setBoxStrokeColor	?attr/colorPrimary (focused)	Sets outline color for outlined style	Outlined
Label	android:hint	setHint	null	Sets floating hint text	All variants
Trailing Icon	app:endIconMode	setEndIconMode	END_ICON_NONE	Sets trailing icon behavior (e.g., clear text)	All variants
Error	app:errorEnabled	setErrorEnabled	false	Enables error display	All variants
Helper Text	app:helperText	setHelperText	null	Provides additional guidance	All variants

Styles

• Filled: Widget.Material3.TextInputLayout.FilledBox
• Outlined: Widget.Material3.TextInputLayout.OutlinedBox
• Default theme attributes: ?attr/textInputFilledStyle, ?attr/textInputOutlinedStyle

Theming Text Fields

• Customize colors, typography, shapes
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="textInputStyle">@style/Widget.App.TextInputLayout</item>
</style>
<style name="Widget.App.TextInputLayout" parent="Widget.Material3.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/shrine_pink_100</item>
    <item name="hintTextColor">@color/shrine_pink_900</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Text Fields
• Covers design, behavior, theming specifications
• Includes structure, variants, accessibility requirements
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Text Fields?

• Controls for entering and editing text with floating labels

---

How many variants are there?

• Two variants: Filled and Outlined (default)

---

When to use Filled Text Fields?

• Use for high emphasis in sparse layouts

---

How to make them accessible?

• Set hints, helper text, icon content descriptions for TalkBack

---

Can I customize appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for text fields