In this tutorial, we’ll implement Text Fields using the new Material Design Components Library.
We have already implemented TextInputLayout here.
Material TextFields
TextInputLayout provides an implementation for Material text fields. We just need to use TextInputEditText!
First and foremost, import the new material components dependency. Also, set the MaterialComponent theme in your Activity.
|
1 2 3 |
implementation 'com.google.android.material:material:1.1.0-alpha09' |
By default, an input text field has a filled background to draw users attention.
Now let’s create a default text field:
|
1 2 3 4 5 6 7 8 9 10 11 |
<com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="12dp" android:hint="Filled box(default)"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout> |
In the next few sections, we’ll customize text fields in different ways.
Standard and Dense Text Fields
Text Fields have two types of height variants:
- Standard – This is used by default if nothing else is there.
- Dense –
@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense
The dense Text field is slightly shorter in height.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="12dp" android:hint="Filled box(default)"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout> <com.google.android.material.textfield.TextInputLayout style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="12dp" android:hint="Filled box dense" app:boxBackgroundColor="#20D81B60"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout> |
By default the FilledBox.Standard style is used
app:boxBackgroundColor is used to set the filled box color.
Here’s how this looks on the screen:
Android Material Text Field Dense Standard Filled Box
Outline Box Text Fields
Apply the following style on the TextInputLayout to get the outlined look text fields:
|
1 2 3 |
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" |
Similar to FilledBox, this has the two height variants as well – Standard and Dense.
To set the corner radius, following attributes are used:
- boxCornerRadiusTopStart
- boxCornerRadiusTopEnd
- boxCornerRadiusBottomStart
- boxCornerRadiusBottomEnd
boxStrokeColor is used to set the stroke color of the outline.
Here’s how it looks:
Android Material Text Field Outlined Box
End Icon Modes
Moving forward, now let’s set end icon modes.
These are basically icons set at the right of the text field.
Currently, the three types of icons that are available built-in are :
password_toggleclear_textcustom
The above attributes are self-explanatory.
We can set our own icon tint on these icons using endIconTint attribute.
For the custom icon, we use the endIconDrawable attribute
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<com.google.android.material.textfield.TextInputLayout style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="12dp" android:hint="Enter password" app:endIconMode="password_toggle"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout> <com.google.android.material.textfield.TextInputLayout style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="12dp" android:hint="Enter password" app:endIconMode="password_toggle" app:endIconTint="@color/colorAccent"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout> <com.google.android.material.textfield.TextInputLayout style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="12dp" android:hint="Clear text" app:endIconMode="clear_text" app:endIconTint="@color/colorPrimaryDark"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout> <com.google.android.material.textfield.TextInputLayout style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="12dp" android:hint="Custom end icon" app:endIconCheckable="true" android:id="@+id/custom_end_icon" app:endIconDrawable="@android:drawable/ic_input_add" app:endIconMode="custom" app:endIconTint="@color/colorPrimaryDark"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout> |
Here’s how it looks on the screen:
Android Material Text Field End Icons
For the custom icon, we can use setEndIconOnClickListener callback to listen to clicks and do stuff.
Shaped Text Fields
ShapeAppearance is a powerful style. It lets us customize the shape of the text field.
We have two built-in shapes – cut and round.
|
1 2 3 4 5 6 7 8 9 10 |
<style name="Cut" parent="ShapeAppearance.MaterialComponents.MediumComponent"> <item name="cornerFamily">cut</item> <item name="cornerSize">12dp</item> </style> <style name="Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent"> <item name="cornerFamily">rounded</item> <item name="cornerSize">16dp</item> </style> |
Setting the above styles in the shapeAppearance attributes gives us this –
Android Material Text Field Shapes
That sums up Material Components Text Fields for now. In the below source code you’ll find all the above concepts.