Mastering Material Design Text Fields in Android Apps
Explore the world of Android Material Text Fields in our latest blog post! Dive into the variety of design options for text fields in your apps and learn how to create an impressive user experience with the Material Design Components Library. From standard and dense text fields to shaped and contoured variants – optimize your UI with our expert tips!
Material TextFields and TextInputLayout
The TextInputLayout class provides an implementation for Material text fields. For this, we simply use the TextInputEditText. First, we need to import the new Material components dependency and set the MaterialComponent theme in our activity.
implementation 'com.google.android.material:material:1.1.0-alpha09'
An input text field by default has a filled background to attract the user’s attention. A simple text field can be created as follows:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Filled Field (Default)">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Standard and Dense Text Fields
Text fields can have two height variants: standard and dense. The dense text field is slightly shorter in height.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Filled Field (Standard)">
<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 Field (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>
Outlined Text Fields
To achieve the outlined look for text fields, apply the following style to the TextInputLayout:
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Similar to filled fields, there are two height variants here: standard and dense.
End Icon Modes
End icons are symbols that can be placed to the right of the text field. Three types of built-in icons are available: password_toggle, clear_text, and custom.
<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>
Shaped Text Fields
With ShapeAppearance, we can customize the shape of the text field. There are two built-in shapes: ‘cut’ and ’round’.
<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>
Conclusion
The Material Design Components Library offers a variety of options for customizing text fields in Android apps. From filled and outlined fields to custom end icons and shaped text fields, developers have numerous options to design an appealing user interface.
