Ultimate Guide to Material 3 Text Fields in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Material 3 Text Fields enable users to enter and edit text, featuring animated floating labels and available in Filled and Outlined variants. This guide covers their implementation, accessibility, and theming for 2025 using TextInputLayout and TextInputEditText. 📝

Design and API Documentation 🔗

Using Text Fields 🤖

Add the Material Components for Android library dependency to use Material 3 Text Fields. See the Get Started guide. Use TextInputLayout with a TextInputEditText child for optimal accessibility and styling, with a Theme.Material3.* theme. 🛠️

Making Text Fields Accessible ♿

Set android:hint on TextInputLayout for labels and app:helperText for helper text. Use app:startIconContentDescription and app:endIconContentDescription for icons, and app:errorContentDescription for errors with special characters. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

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

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

Text Field Variants 🌟

Material 3 Text Fields come in two variants: Filled (emphasized background) and Outlined (subtle border), with Outlined as the default. 📝

Filled Text Field: High visual emphasis.
Outlined Text Field: Minimal, clean look.

Filled Text Field 📌

Filled Text Fields stand out with a filled background, ideal for sparse layouts. 📌

Filled Text Field Example 💻

API and source code:

TextInputLayout
- Class description
- Class source
TextInputEditText
- Class description
- Class source

The following example shows a filled text field with a trailing icon.

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

Outlined Text Field 📏

Outlined Text Fields use a subtle border, ideal for dense forms, and are the default style. 📏

Outlined Text Field Example 💻

The following example shows an outlined text field with a prefix and error.

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

Anatomy and Key Properties 📏

Text fields include a container, label, input text, optional icons, and helper/error/counter text. 📝

Container: Filled or outlined, holds content.
Label: Floating hint text. ✍️
Input Text: User-entered content. 🖌️
Icons: Leading/trailing, optional. 🖼️

Attributes 📋

Element	Attribute	Related method(s)	Default value
Container	`app:boxStrokeColor`	`setBoxStrokeColor`	`?attr/colorPrimary` (focused)
Label	`android:hint`	`setHint`	`null`
Trailing Icon	`app:endIconMode`	`setEndIconMode`	`END_ICON_NONE`
Error	`app:errorEnabled`	`setErrorEnabled`	`false`

Styles 🎨

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

See the full list of styles and attrs. 🔗

Theming Text Fields 🖌️

Material Theming customizes text field colors, typography, and shapes. 🎨

Theming Example 💻

Theming example for text fields:

Specific styles for outlined text fields:

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, and icon content descriptions for TalkBack. 🗣️

Can I customize appearance? 🎨

Yes, theme colors, typography, and shapes via res/values/styles.xml. 🖌️

How to add the Material 3 library? 📦

Include the Material Components for Android library. See the Get Started guide. 🛠️

Are there updates for 2025? 🗓️

This guide reflects 2025 Material 3 standards for text fields. 🚀

Search This Blog

BoltUiX

Ultimate Guide to Material 3 Text Fields in Android XML (2025 Tutorial + Examples)