Material Component- Text Fields

Mridul Rathore
2 min readJan 22, 2021

How to Make different Material Edit Text in Android..??

Both types of text fields use a container to provide a clear affordance for interaction, making the fields discoverable in layouts.

Types

Text fields come in two forms: filled and outlined.

Text fields come in two types:

  • Filled text fields
  • Outlined text fields

Basic usage 🏁

A MaterialTextField can be included in your layout like:

<com.google.android.material.textfield.TextInputLayout
android:id=”@+id/textField”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”@string/label”>

<com.google.android.material.textfield.TextInputEditText
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
/>

</com.google.android.material.textfield.TextInputLayout>

Text Field Containers

Fill and stroke

A text field container has a fill and a stroke (either around the entire container, or just the bottom edge). The color and thickness of a stroke can change to indicate when the text field is active.

Rounded corners

The container of an outlined text field has rounded corners, while the container of a filled text field has rounded top corners and square bottom corners.

More resources 📚

I hope this post has provided some insight into Material Edit Text(Text Fields) and how they can be used in your Android app(s). If you have any questions, thoughts or suggestions then I’d love to hear from you!

Find me on Instagram @bitwittechno, Facebook @mridulmr

--

--