4.7 KiB
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 |
Notes about setting the hint
If a hint is specified on the child EditText in XML, then the
TextInputLayout will use the EditText's hint as its floating label. To
specify or change the hint programmatically, make sure to call the setHint()
method on TextInputLayout, instead of on the EditText.