material-components_material-components-android/docs/components/TextField.md

Text fields

Text fields let users enter and edit text. There are two variants of text fields.

1. Filled text field
2. Outlined text field

Note: Images use various dynamic color schemes.

Design & API documentation

• Material 3 (M3) spec
• API reference

Anatomy

Filled text field

1. Container
2. Leading icon (optional)
3. Label text (empty)
4. Label text (populated)
5. Trailing icon (optional)
6. Active indicator (focused)
7. Caret
8. Input text
9. Supporting text (optional)
10. Active Indicator (enabled)

Outlined text field

1. Container outline (enabled)
2. Leading icon (optional)
3. Label text (unpopulated)
4. Label text (populated)
5. Trailing icon (optional)
6. Container outline (focused)
7. Caret
8. Input text
9. Supporting text (optional)

More details on anatomy items in the component guidelines.

Key properties

Filled text field

Container attributes

Element	Attribute	Related method(s)	Default value
Color	app:boxBackgroundColor	setBoxBackgroundColor setBoxBackgroundColorResource getBoxBackgroundColor	?attr/colorSurfaceContainerHighest (see all states)
Shape	app:shapeAppearance	N/A	?attr/shapeAppearanceCornerExtraSmall
Text field enabled	android:enabled	setEnabled	true

Leading icon attributes

Element	Attribute	Related method(s)	Default value
Icon	app:startIconDrawable	setStartIconDrawable getStartIconDrawable	null
Content description	app:startIconContentDescription	setStartIconContentDescription getStartIconContentDescription	null
Color	app:startIconTint	setStartIconTintList	?attr/colorOnSurfaceVariant (see all states)
Checkable	app:startIconCheckable	setStartIconCheckable isStartIconCheckable	false
Size	app:startIconMinSize	setStartIconMinSize getStartIconMinSize	48dp
Scale type	app:startIconScaleType	setStartIconScaleType getStartIconScaleType	ScaleType.CENTER

Label attributes

Element	Attribute	Related method(s)	Default value
Text	android:hint	setHint getHint	null
Color	android:textColorHint	setDefaultHintTextColor getDefaultHintTextColor	?attr/colorOnSurfaceVariant (see all states)
Collapsed (floating) color	app:hintTextColor	setHintTextColor getHintTextColor	?attr/colorPrimary (see all states)
Typography	app:hintTextAppearance	setHintTextAppearance	?attr/textAppearanceBodySmall
Animation	app:hintAnimationEnabled	setHintAnimationEnabled isHintAnimationEnabled	true
Expanded enabled	app:expandedHintEnabled	setExpandedHintEnabled isExpandedHintEnabled	true

Note: The android:hint should always be set on the TextInputLayout instead of on the EditText in order to avoid unintended behaviors.

Input text attributes (set on the TextInputEditText)

Element	Attribute	Related method(s)	Default value
Input text	android:text	setText getText	@null
Typography	android:textAppearance	setTextAppearance	?attr/textAppearanceBodyLarge
Input text color	android:textColor	setTextColor getTextColors getCurrentTextColor	?attr/colorOnSurface
Cursor color	N/A (color comes from the theme attr ?attr/colorControlActivated)	N/A	?attr/colorPrimary
Text highlight color	N/A (color comes from the theme attr ?android:attr/textColorHighlight)	N/A	@color/m3_highlighted_text

Input text attributes (set on the TextInputLayout)

Element	Attribute	Related method(s)	Default value
Cursor color	app:cursorColor on API levels 28+	setCursorColor getCursorColor on API levels 28+	@null (uses ?attr/colorControlActivated by default)
Cursor error color	app:cursorErrorColor on API levels 28+	setCursorErrorColor getCursorErrorColor on API levels 28+	?attr/colorError on API levels 28+, ?attr/colorControlActivated otherwise

Trailing icon attributes

Element	Attribute	Related method(s)	Default value
Mode	app:endIconMode	setEndIconMode getEndIconMode	END_ICON_NONE
Color	app:endIconTint	setEndIconTintList	colorOnSurfaceVariant (see all states)
Custom icon	app:endIconDrawable	setEndIconDrawable getEndIconDrawable	null
Custom icon content description	app:endIconContentDescription	setEndIconContentDescription getEndIconContentDescription	null
Custom icon checkable	app:endIconCheckable	setEndIconCheckable isEndIconCheckable	true
Error icon	app:errorIconDrawable	setErrorIconDrawable getErrorIconDrawable	@drawable/mtrl_ic_error
Error icon color	app:errorIconTint	setErrorIconTintList	?attr/colorError
Size	app:endIconMinSize	setEndIconMinSize getEndIconMinSize	48dp
Scale type	app:endIconScaleType	setEndIconScaleType getEndIconScaleType	ScaleType.CENTER

Activation indicator attributes

Element	Attribute	Related method(s)	Default value
Color	app:boxStrokeColor	setBoxStrokeColor setBoxStrokeColorStateList getBoxStrokeColor	?attr/colorOutline and ?attr/colorPrimary (focused) (see all states)
Error color	app:boxStrokeErrorColor	setBoxStrokeErrorColor getBoxStrokeErrorColor	?attr/colorError
Width	app:boxStrokeWidth	N/A	1dp
Focused width	app:boxStrokeWidthFocused	N/A	2dp

Helper/error/counter text attributes

Element	Attribute	Related method(s)	Default value
Helper text enabled	app:helperTextEnabled	setHelperTextEnabled isHelperTextEnabled	false
Helper text	app:helperText	setHelperText getHelperText	null
Helper text color	app:helperTextColor	setHelperTextColor getHelperTextColor	?attr/colorOnSurfaceVariant (see all states)
Helper text typography	app:helperTextAppearance	setHelperTextAppearance	?attr/textAppearanceBodySmall
Error text enabled	app:errorEnabled	setErrorEnabled isErrorEnabled	false
Error text	N/A	setError getError	null
Error text accessibility live region	app:errorAccessibilityLiveRegion	setErrorAccessibilityLiveRegion getErrorAccessibilityLiveRegion	ViewCompat.ACCESSIBILITY_LIVE_REGION_POLITE
Error text color	app:errorTextColor	setErrorTextColor getErrorCurrentTextColors	?attr/colorError
Error text typography	app:errorTextAppearance	setErrorTextAppearance	?attr/textAppearanceBodySmall
Counter text enabled	app:counterEnabled	setCounterEnabled isCounterEnabled	false
Counter text length	app:counterMaxLength	setCounterMaxLength getCounterMaxLength	-1
Counter text typography	app:counterTextAppearance app:counterOverflowTextAppearance	setCounterTextAppearance setCounterOverflowTextAppearance	?attr/textAppearanceBodySmall
Counter text color	app:counterTextColor app:counterOverflowTextColor	setCounterTextColor setCounterOverflowTextColor getCounterTextColor getCounterOverflowTextColor	?attr/colorOnSurfaceVariant (app:counterTextColor) (see all states) ?attr/colorError (app:counterOverflowTextColor)

Prefix/suffix attributes

Element	Attribute	Related method(s)	Default value
Prefix	app:prefixText	setPrefixText getPrefixText	null
Prefix color	app:prefixTextColor	setPrefixTextColor getPrefixTextColor	?attr/colorOnSurfaceVariant (see all states)
Prefix typography	app:prefixTextAppearance	setPrefixTextAppearance	?attr/textAppearanceTitleMedium
Suffix	app:suffixText	setSuffixText getSuffixText	null
Suffix color	app:suffixTextColor	setSuffixTextColor getSuffixTextColor	?attr/colorOnSurfaceVariant (see all states)
Suffix typography	app:suffixTextAppearance	setSuffixTextAppearance	?attr/textAppearanceTitleMedium

Styles

Element	Style	Default style theme attribute
Default style	Widget.Material3.TextInputLayout.FilledBox	?attr/textInputFilledStyle
Dense style	Widget.Material3.TextInputLayout.FilledBox.Dense	?attr/textInputFilledDenseStyle
Exposed dropdown menu style	Widget.Material3.TextInputLayout.FilledBox.ExposedDropdownMenu	?attr/textInputFilledExposedDropdownMenuStyle
Dense exposed dropdown menu style	Widget.Material3.TextInputLayout.FilledBox.Dense.ExposedDropdownMenu	N/A

For the full list, see styles and attrs.

Outlined text field

Container attributes

Element	Attribute	Related method(s)	Default value
Stroke color	app:boxStrokeColor	setBoxStrokeColor setBoxStrokeColorStateList getBoxStrokeColor	?attr/colorOutline and ?attr/colorPrimary (focused) (see all states)
Stroke error color	app:boxStrokeErrorColor	setBoxStrokeErrorColor getBoxStrokeErrorColor	?attr/colorError
Stroke width	app:boxStrokeWidth	N/A	1dp
Stroke focused width	app:boxStrokeWidthFocused	N/A	2dp
Shape	app:shapeAppearance	N/A	?attr/shapeAppearanceCornerExtraSmall
Text field enabled	android:enabled	setEnabled	true

Leading icon attributes

Element	Attribute	Related method(s)	Default value
Icon	app:startIconDrawable	setStartIconDrawable getStartIconDrawable	null
Content description	app:startIconContentDescription	setStartIconContentDescription getStartIconContentDescription	null
Color	app:startIconTint	setStartIconTintList	?attr/colorOnSurfaceVariant (see all states)
Checkable	app:startIconCheckable	setStartIconCheckable isStartIconCheckable	false

Label attributes

Element	Attribute	Related method(s)	Default value
Text	android:hint	setHint getHint	null
Color	android:textColorHint	setDefaultHintTextColor getDefaultHintTextColor	?attr/colorOnSurfaceVariant (see all states)
Collapsed (floating) color	app:hintTextColor	setHintTextColor getHintTextColor	?attr/colorPrimary
Typography	app:hintTextAppearance	setHintTextAppearance	?attr/textAppearanceBodySmall
Max number of lines	app:hintMaxLines	setHintMaxLines getHintMaxLines	1

Note: The android:hint should always be set on the TextInputLayout instead of on the EditText in order to avoid unintended behaviors.

Input text attributes (set on the TextInputEditText)

Element	Attribute	Related method(s)	Default value
Input text	android:text	setText getText	@null
Typography	android:textAppearance	setTextAppearance	?attr/textAppearanceBodyLarge
Input text color	android:textColor	setTextColor getTextColors getCurrentTextColor	?attr/colorOnSurface
Cursor color	N/A (color comes from the theme attr ?attr/colorControlActivated)	N/A	?attr/colorPrimary
Text highlight color	N/A (color comes from the theme attr ?android:attr/textColorHighlight)	N/A	@color/m3_highlighted_text

Input text attributes (set on the TextInputLayout)

Element	Attribute	Related method(s)	Default value
Cursor color	app:cursorColor on API levels 28+	setCursorColor getCursorColor on API levels 28+	@null (uses ?attr/colorControlActivated by default)
Cursor error color	app:cursorErrorColor on API levels 28+	setCursorErrorColor getCursorErrorColor on API levels 28+	?attr/colorError on API levels 28+, ?attr/colorControlActivated otherwise

Trailing icon attributes

Element	Attribute	Related method(s)	Default value
Mode	app:endIconMode	setEndIconMode getEndIconMode	END_ICON_NONE
Color	app:endIconTint	setEndIconTintList	?attr/colorOnSurfaceVariant (see all states)
Custom icon	app:endIconDrawable	setEndIconDrawable getEndIconDrawable	null
Custom icon content description	app:endIconContentDescription	setEndIconContentDescription getEndIconContentDescription	null
Custom icon checkable	app:endIconCheckable	setEndIconCheckable isEndIconCheckable	true
Error icon	app:errorIconDrawable	setErrorIconDrawable getErrorIconDrawable	@drawable/mtrl_ic_error
Error icon color	app:errorIconTint	setErrorIconTintList	?attr/colorError

Helper/error/counter text attributes

Element	Attribute	Related method(s)	Default value
Helper text enabled	app:helperTextEnabled	setHelperTextEnabled isHelperTextEnabled	false
Helper text	app:helperText	setHelperText getHelperText	null
Helper text color	app:helperTextColor	setHelperTextColor getHelperTextColor	?attr/colorOnSurfaceVariant (see all states)
Helper text typography	app:helperTextAppearance	setHelperTextAppearance	?attr/textAppearanceBodySmall
Error text enabled	app:errorEnabled	setErrorEnabled isErrorEnabled	false
Error text	N/A	setError getError	null
Error text accessibility live region	app:errorAccessibilityLiveRegion	setErrorAccessibilityLiveRegion getErrorAccessibilityLiveRegion	ViewCompat.ACCESSIBILITY_LIVE_REGION_POLITE
Error text color	app:errorTextColor	setErrorTextColor getErrorCurrentTextColors	?attr/colorError
Error text typography	app:errorTextAppearance	setErrorTextAppearance	?attr/textAppearanceBodySmall
Counter text enabled	app:counterEnabled	setCounterEnabled isCounterEnabled	false
Counter text length	app:counterMaxLength	setCounterMaxLength getCounterMaxLength	-1
Counter text typography	app:counterTextAppearance app:counterOverflowTextAppearance	setCounterTextAppearance setCounterOverflowTextAppearance	?attr/textAppearanceBodySmall
Counter text color	app:counterTextColor app:counterOverflowTextColor	setCounterTextColor setCounterOverflowTextColor getCounterTextColor getCounterOverflowTextColor	?attr/colorOnSurfaceVariant (app:counterTextColor) (see all states) ?attr/colorError (app:counterOverflowTextColor)

Prefix/suffix attributes

Element	Attribute	Related method(s)	Default value
Prefix	app:prefixText	setPrefixText getPrefixText	null
Prefix color	app:prefixTextColor	setPrefixTextColor getPrefixTextColor	?attr/colorOnSurfaceVariant (see all states)
Prefix typography	app:prefixTextAppearance	setPrefixTextAppearance	?attr/textAppearanceTitleMedium
Suffix	app:suffixText	setSuffixText getSuffixText	null
Suffix color	app:suffixTextColor	setSuffixTextColor getSuffixTextColor	?attr/colorOnSurfaceVariant (see all states)
Suffix typography	app:suffixTextAppearance	setSuffixTextAppearance	?attr/textAppearanceTitleMedium

Styles

Element	Style	Default style theme attribute
Default style	Widget.Material3.TextInputLayout.OutlinedBox	?attr/textInputStyle and ?attr/textInputOutlinedStyle
Dense style	Widget.Material3.TextInputLayout.OutlinedBox.Dense	?attr/textInputOutlinedDenseStyle
Exposed dropdown menu style	Widget.Material3.TextInputLayout.OutlinedBox.ExposedDropdownMenu	?attr/textInputOutlinedExposedDropdownMenuStyle
Dense exposed dropdown menu style	Widget.Material3.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu	N/A

For the full list, see styles and attrs.

Variants of text fields

Filled text field

Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.

Filled text field examples

The following example shows a filled text field with a label.

In the layout:

<com.google.android.material.textfield.TextInputLayout
    style="?attr/textInputFilledStyle"
    android:id="@+id/filledTextField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label">

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

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

In code:

// Get input text
val inputText = filledTextField.editText?.text.toString()

filledTextField.editText?.doOnTextChanged { inputText, _, _, _ ->
    // Respond to input text change
}

See the code implementation section below for more examples.

Outlined text field

Outlined text fields have less visual emphasis than filled text fields. When they appear in forms, for example, where many text fields are placed together, their reduced emphasis helps simplify the layout.

Note: The outlined text field is the default style.

Outlined text field examples

The following example shows an outlined text field.

In the layout:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/outlinedTextField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label">

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

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

In code:

// Get input text
val inputText = outlinedTextField.editText?.text.toString()

outlinedTextField.editText?.doOnTextChanged { inputText, _, _, _ ->
    // Respond to input text change
}

See the code implementation section below for more examples.

Code implementation

Before you can use Material text fields, you need to add a dependency to the Material components for Android library. For more information, go to the Getting started page.

Adding text field

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label">

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

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

Note: A text field is composed of a TextInputLayout and a TextInputEditText as a direct child. Using an EditText as the child might work, but TextInputEditText provides accessibility support for the text field and allows TextInputLayout greater control over the visual aspects of the input text. If an EditText is being used, make sure to set its android:background to @null so that TextInputLayout can set the proper background on it.

Making text fields accessible

Android's text field component APIs support both label text and helper text, which explain what is requested for a text field. While optional, their use is strongly encouraged.

Content description

When using custom icons, you should set a content description on them so that screen readers, like TalkBack, are able to announce their purpose or action.

For the leading icon, that can be achieved via the app:startIconContentDescription attribute or setStartIconContentDescription method. For the trailing icon, that can be achieved via the app:endIconContentDescription attribute or setEndIconContentDescription method.

When setting an error message that contains special characters that screen readers or other accessibility systems are not able to read, you should set a content description via the app:errorContentDescription attribute or setErrorContentDescription method. That way the error will announce the content description instead of the error message.

Note: Icons that don't have click listeners set on them work as decorative elements, and are therefore skipped by screen readers.

Custom EditText

If you are using a custom EditText as TextInputLayout's child and your text field requires different accessibility support than the one offered by TextInputLayout, you can set a TextInputLayout.AccessibilityDelegate via the setTextInputAccessibilityDelegate method. This method should be used in place of providing an AccessibilityDelegate directly on the EditText.

Using text fields programmatically

If you construct the TextInputEditText child of a TextInputLayout programmatically, you should use TextInputLayout's context to create the view. This will allow TextInputLayout to pass along the appropriate styling to the edit text.

val textInputLayout = TextInputLayout(context)
val editText = TextInputEditText(textInputLayout.context)

Adding a leading icon to a text field

<com.google.android.material.textfield.TextInputLayout
    ...
    app:startIconDrawable="@drawable/ic_search_24dp"
    app:startIconContentDescription="@string/content_description_start_icon">

    ...

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

Adding a trailing icon to a text field

Password toggle:

When the TextInputEditText is set to display a password, an icon can be added to toggle between masking the password or displaying the password as plain-text.

<com.google.android.material.textfield.TextInputLayout
    ...
    app:endIconMode="password_toggle">

    <com.google.android.material.textfield.TextInputEditText
        ...
        android:inputType="textPassword"
    />

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

Clear text:

An icon can be set to display when text is present. The icon can be pressed to clear the input text.

<com.google.android.material.textfield.TextInputLayout
    ...
    app:endIconMode="clear_text">

    ...

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

Custom icon:

It is possible to set a custom Drawable as the text field's trailing icon via app:endIconMode="custom". You should specify a drawable and content description for the icon, and you have the option to specify custom behaviors.

In the layout:

<com.google.android.material.textfield.TextInputLayout
    ...
    app:endIconMode="custom"
    app:endIconDrawable="@drawable/ic_accelerator_24dp"
    app:endIconContentDescription="@string/content_description_end_icon">

    ...

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

Optionally, in code:

textField.setEndIconOnClickListener {
  // Respond to end icon presses
}

textField.addOnEditTextAttachedListener {
  // If any specific changes should be done when the edit text is attached (and
  // thus when the trailing icon is added to it), set an
  // OnEditTextAttachedListener.

  // Example: The clear text icon's visibility behavior depends on whether the
  // EditText has input present. Therefore, an OnEditTextAttachedListener is set
  // so things like editText.getText() can be called.
}

textField.addOnEndIconChangedListener {
  // If any specific changes should be done if/when the endIconMode gets
  // changed, set an OnEndIconChangedListener.

  // Example: If the password toggle icon is set and a different EndIconMode
  // gets set, the TextInputLayout has to make sure that the edit text's
  // TransformationMethod is still PasswordTransformationMethod. Because of
  // that, an OnEndIconChangedListener is used.
}

Note: You should opt to use the EndIconMode API instead of setting an end/right compound Drawable on the TextInputEditText. The same applies to the now-deprecated passwordToggle* attributes.

Important: Calling setEndIconMode will initialize the icon with its default features, such as default drawables, and in the case of the custom mode, an empty drawable. You can add customizations after calling setEndIconMode. The exception for this is if a drawable was specified in XML via the app:endIconDrawable attribute. An end icon drawable set in XML will take precedence and override an existing default icon.

For the full list, see end icon modes.

Implementing an exposed dropdown menu

In the layout:

<com.google.android.material.textfield.TextInputLayout
    ...
    style="@style/Widget.Material3.TextInputLayout.*.ExposedDropdownMenu">

    <AutoCompleteTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="none"
        app:simpleItems="@array/simple_items"
    />

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

The string array specified by app:simpleItems will be used as the default item strings for auto-completion. Or you can also set it programmatically:

val items = arrayOf("Item 1", "Item 2", "Item 3", "Item 4")
(textField.editText as? MaterialAutoCompleteTextView)?.setSimpleItems(items)

Alternatively, to have more control over the auto-completion items rendering, you can also provide a custom item adapter by:

val items = listOf("Item 1", "Item 2", "Item 3", "Item 4")
val adapter = ArrayAdapter(requireContext(), R.layout.list_item, items)
(textField.editText as? AutoCompleteTextView)?.setAdapter(adapter)

And a custom item layout (list_item.xml):

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:textAppearance="?attr/textAppearanceTitleMedium"
/>

Adding helper text to a text field

<com.google.android.material.textfield.TextInputLayout
    ...
    app:helperTextEnabled="true"
    app:helperText="@string/helper_text">

    ...

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

Adding a counter to a text field

<com.google.android.material.textfield.TextInputLayout
    ...
    app:counterEnabled="true"
    app:counterMaxLength="20">

    ...

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

Adding errors to a text field

In the layout:

<com.google.android.material.textfield.TextInputLayout
    ...
    app:errorEnabled="true">

    ...

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

In code:

// Set error text
passwordLayout.error = getString(R.string.error)

// Clear error text
passwordLayout.error = null

Note: Non-null error text will replace any existing helper text, and non-null helper text will replace any existing error text.

Adding a prefix/suffix to a text field

<com.google.android.material.textfield.TextInputLayout
    ...
    app:prefixText="@string/prefix"
    app:suffixText="@string/suffix">

    ...

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

Setting text field dimensions

The recommended default android:layout_width is 245dp.

By default, text fields have a maximum width of 488dp, and a minimum width of 56dp for layouts without a label. If a label is present, the minimum width recommended is 88dp. android:minWidth and android:maxWidth (as well as android:minEms and android:maxEms) should be set on the TextInputLayout instead of on the TextInputEditText to avoid unintended behaviors.

You can override those values in a custom style that inherits from a TextInputLayout style or by making changes directly on the layout:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="@dimen/custom_min_width"
    android:maxWidth="@dimen/custom_max_width"
    android:hint="@string/label">

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

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

Note: The android:layout_width of the TextInputLayout should be wrap_content in order for those minimum and maximum dimensions to be used.

Customizing text fields

Theming text fields

Text fields support the customization of color, typography, and shape.

Text field theming example

API and source code:

• TextInputLayout
  • Class definition
  • Class source
• TextInputEditText
  • Class definition
  • Class source

The following example shows filled and outlined text field types with Material theming.

Implementing text field theming

Using theme attributes and styles in res/values/styles.xml adds themes to all text fields and affects other components:

<style name="Theme.App" parent="Theme.Material3.*">
    ...
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
    <item name="colorError">@color/shrine_red</item>
    <item name="textAppearanceTitleMedium">@style/TextAppearance.App.TitleMedium</item>
    <item name="textAppearanceBodySmall">@style/TextAppearance.App.BodySmall</item>
    <item name="shapeAppearanceCornerExtraSmall">@style/ShapeAppearance.App.Corner.ExtraSmall</item>
</style>

<style name="TextAppearance.App.TitleMedium" parent="TextAppearance.Material3.TitleMedium">
    <item name="fontFamily">@font/rubik</item>
    <item name="android:fontFamily">@font/rubik</item>
</style>

<style name="TextAppearance.App.BodySmall" parent="TextAppearance.Material3.BodySmall">
    <item name="fontFamily">@font/rubik</item>
    <item name="android:fontFamily">@font/rubik</item>
</style>

<style name="ShapeAppearance.App.Corner.ExtraSmall" parent="ShapeAppearance.Material3.Corner.ExtraSmall">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">4dp</item>
</style>

Using default style theme attributes, styles and theme overlays adds themes to all text fields but does not affect other components:

<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.*">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.TextInputLayout</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.Corner.ExtraSmall</item>
    <item name="hintTextColor">?attr/colorOnSurface</item>
</style>

<style name="ThemeOverlay.App.TextInputLayout" parent="">
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
    <item name="colorError">@color/shrine_red</item>
    <item name="textAppearanceTitleMedium">@style/TextAppearance.App.TitleMedium</item>
    <item name="textAppearanceBodySmall">@style/TextAppearance.App.BodySmall</item>
    <item name="editTextStyle">@style/Widget.Material3.TextInputEditText.*</item>
</style>

Using the style in the layout affects only this text field:

<com.google.android.material.textfield.TextInputLayout
    ...
    style="@style/Widget.App.TextInputLayout">

    ...

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

Note: When setting a materialThemeOverlay on a custom TextInputLayout style, don't forget to set editTextStyle to either a @style/Widget.Material3.TextInputEditText.* style or to a custom one that inherits from that.
The TextInputLayout styles set materialThemeOverlay to override editTextStyle with the specific TextInputEditText style needed. Therefore, you don't need to specify a style tag on the edit text.