ab2fec6da4
Bazel is happier if Java/Java test roots are named 'java' and 'javatests', and
this will mean that once we create a BUILD file for
android/support/design/{widget,internal}/ we'll no longer need a custom package
specified in our build (which tends to cause build problems that manifest quite
weirdly). This commit doesn't attempt to refactor the build at all yet, and is
just a pure move.
PiperOrigin-RevId: 178060739
7.1 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).
Box Styles
TextInputLayout provides two box styles, filled and outline. Here's how to use
each of them:
Filled Text Fields
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 Text Fields
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.OutlineBox"
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, depending on whether you are using a filled or outline
text field:
style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlineBox.Dense"
Additionally, to change a text field's internal padding as well as other values like corner
radii, you can apply the following attributes to your TextInputLayout:
Padding
boxPaddingLeftboxCollapsedPaddingTopboxExpandedPaddingTopboxPaddingRightboxCollapsedPaddingBottomboxExpandedPaddingBottom
Corner Radius
boxCornerRadiusTopLeftboxCornerRadiusTopRightboxCornerRadiusBottomLeftboxCornerRadiusBottomRight
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
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.