bdb25ff7e3
Move to use native android:padding attrs instead of custom boxPadding attributes for text fields. This is accomplished by creating box styles for TextInputEditText, and setting android:padding attributes in those. The TextInputLayout box styles set the appropriate TextInputEditText style on its child by wrapping the TextInputEditText style in theme overlays. This is kind of neat, since it allows for the user not to have to set a style on both the TextInputLayout and TextInputEditText - the user does not even have to know about the TextInputEditText styles with this pattern. It should also help clear up some confusion over where to set the hint and other areas of haziness between TextInputLayout and TextInputEditText. The default editTextStyle is set to the filled box style, to match the default TextInputLayout style. This change removes the box padding attributes, and it also removes the dimension resources in favor of setting them in the style to improve readability. This commit also changes TextInputEditText constructors to both use a theme attribute in the 3-arg constructor and call through to the TextInputEditText overloaded constructors rather than call the super's constructor from each. This allows the theme attribute set in the theme overlays to take effect. PiperOrigin-RevId: 198051251
7.5 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.
<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: An EditText may work for your input text component. However, using
TextInputEditText allows TextInputLayout greater control over the visual
aspects of the input text and provides accessibility support for the text field.
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.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 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.OutlineBox.Dense"
To change a text box's internal padding and overall dimensions, you can adjust
the android:padding attributes on the TextInputEditText.
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:hintapp:hintEnabled |
| Error message | app:errorEnabled#setError(CharSequence) |
| Helper text | app:helperTextEnabledapp:helperText |
| Password redaction | app:passwordToggleEnabledapp:passwordToggleDrawable |
| Character counter | app:counterEnabledapp: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.
Notes about using TextInputLayout and TextInputEditText programmatically
If you construct a TextInputEditText programmatically, you should use
TextInputLayout's context to create the view. This will allow TextInputLayout
to pass along the appropriate styling to the TextInputEditText.
TextInputEditText editText = new TextInputEditText(textInputLayout.getContext());