Material Components for Android

Android

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.

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <android.support.design.widget.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="@string/hint_text"/>

</android.support.design.widget.TextInputLayout>

Note: You can also use an EditText for your input text component. However, using TextInputEditText allows TextInputLayout greater control over the visual aspects of the input text - it allows TextInputLayout to display hint in the text field when in “extract mode” (such as landscape mode).

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)
Password redaction app:passwordToggleEnabled
  app:passwordToggleDrawable
Character counter app:counterEnabled
  app:counterMaxLength