Skip to content

Latest commit

 

History

History
161 lines (120 loc) · 7.52 KB

TextInputLayout.md

File metadata and controls

161 lines (120 loc) · 7.52 KB
Raw

Text Fields

Text Fields

TextInputLayout provides an implementation for Material text fields. Used in conjunction with a TextInputEditText, TextInputLayout makes it easy to include Material text fields in your layouts.

Design & API Documentation

Usage

To create a material text field, add a TextInputLayout to your XML layout and a TextInputEditText as a direct child.

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

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

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

Note: A TextInputEditText should be used instead of an EditText as your input text component. An EditText might work, but TextInputEditText provides accessibility support for the text field and allows TextInputLayout greater control over the visual aspects of the input text.

Material Styles

To use an updated TextInputLayout, apply one of the updated Material styles directly to your widget in XML.

Filled Box

Filled text fields have a solid background color and draw more attention, especially in layouts where the field is surrounded by other elements. To use a filled text field, apply the following style to your TextInputLayout:

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"

To change the background color of a filled text field, you can set the boxBackgroundColor attribute on your TextInputLayout.

Outline Box

Outline text fields have a stroked border and are less emphasized. To use an outline text field, apply the following style to your TextInputLayout:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

To change the stroke color and width for an outline text field, you can set the boxStrokeColor and boxStrokeWidth attributes on your TextInputLayout, respectively.

Height Variations

TextInputLayout provides two height variations for filled and outline text fields, standard and dense. Both box styles default to the standard height.

In order to reduce the height of a text box, you can use a dense style, which will reduce the vertical padding within the text box. You can achieve this by applying the appropriate styles to your TextInputLayout and TextInputEditText, depending on whether you are using a filled or outline text field:

Dense Filled Box

Apply this style to your TextInputLayout: xml style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"

Dense Outline Box

Apply this style to your TextInputLayout: xml style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"

To change a text box's internal padding and overall dimensions, you can adjust the android:padding attributes on the TextInputEditText.

Corner Radius
  • boxCornerRadiusTopLeft
  • boxCornerRadiusTopRight
  • boxCornerRadiusBottomLeft
  • boxCornerRadiusBottomRight

Common features

TextInputLayout provides functionality for a number of Material text field features. These are some commonly used properties you can update to control the look of your text field:

Text field element Relevant attributes/methods
Label (also called a “Floating Label”) android:hint
app:hintEnabled
Error message app:errorEnabled
#setError(CharSequence)
Helper text app:helperTextEnabled
app:helperText
Password redaction app:passwordToggleEnabled
app:passwordToggleDrawable
Character counter app:counterEnabled
app:counterMaxLength

Notes about setting the hint

The hint should be set on TextInputLayout, rather than the TextInputEditText or EditText. If a hint is specified on the child EditText in XML, the TextInputLayout might still work correctly; TextInputLayout will use the EditText's hint as its floating label. However, future calls to modify the hint will not update TextInputLayout's hint. To avoid unintended behavior, call setHint() and getHint() on TextInputLayout, instead of on EditText.

Notes about using TextInputLayout programmatically

If you construct the EditText 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 TextInputEditText or EditText.

TextInputEditText editText = new TextInputEditText(textInputLayout.getContext());

Related concepts