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"
android:hint="@string/hint_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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
Using TextInputLayout
with an updated Material theme
(Theme.MaterialComponents
) will provide the correct updated Material styles to
your text fields by default. If you need to use an updated Material text field
and your application theme does not inherit from an updated Material theme, you
can apply one of the updated Material styles directly to your widget in XML.
Filled Box (Default)
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());