Outlined Edit Text from Material Design

Question

How can I implement an outlined text field (as shown on this material design page)?

Answer 1

Read 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.OutlinedBox"

Dependencies

implementation 'com.android.support:design:28.0.0-alpha1' 

XML

   <android.support.design.widget.TextInputLayout
   android:id="@+id/name_text_input"
   style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   >

   <android.support.design.widget.TextInputEditText
       android:id="@+id/name_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="@string/label_name" />
</android.support.design.widget.TextInputLayout>

DEMO

FYI

Legacy support ended in Android 28 . Now onward use

implementation 'com.google.android.material:material:1.3.0'