Android: How to create custom UI of TextInputLayout

Question

I am trying to create custom TextInputLayout. How can I create below custom TextInputLayout?

Any help or guidance will be well appreciated.

Answer 1

Just use the TextInputLayout provided by the Material Components Library.

Something like:

    <com.google.android.material.textfield.TextInputLayout
       app:boxBackgroundColor="@color/...."    
       app:boxStrokeColor="@color/..."
       android:hint="..."
       ..>

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

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

About the rounded corners:

The default behaviour for the FilledBox (Widget.MaterialComponents.TextInputLayout.FilledBox) is a rounded box on the top corners (4dp) and a rectangular box on the bottom (0dp) as you can see in the image above.
If you would like a rounded box, I suggest you using the OutlinedBox style:

 <com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    ..>

The resul is:

Otherwise you can force a workaround like this (I don't like it since it breaks the material guideline):

<com.google.android.material.textfield.TextInputLayout       
app:shapeAppearanceOverlay="@style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox"
            app:boxStrokeWidth="0dp"
            app:boxStrokeColor="yourActivityBackgroundColor"
            ..>

where the app:shapeAppearanceOverlay attribute changes the shape of the bottom corners:

  <style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox" parent="">
    <item name="cornerSizeBottomLeft">@dimen/mtrl_shape_corner_size_small_component</item>
    <item name="cornerSizeBottomRight">@dimen/mtrl_shape_corner_size_small_component</item>
  </style>

where mtrl_shape_corner_size_small_component=4dp