Customize Text Input Layout

Question

I want to apply border to TextInputLayout as shown in image.

right now i have implemented like this.

but, I want as following as shown in image (i.e. label is placed within border).

The code i have implemented for EditText is as below.

<customviews.MyEditText
             android:id="@+id/email"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/edittext_border_background"
             android:layout_marginEnd="30dp"
             android:layout_marginStart="30dp"
             android:layout_marginTop="45dp"
             android:gravity="start"
             android:hint="@string/hint_username"
             android:imeOptions="actionNext|actionDone"
             android:inputType="textEmailAddress|text"
             android:padding="10dp"
             android:textColor="@color/primary_text"
             android:textColorHint="@color/secondary_text"
             android:textSize="16sp"
            />

and, for border i have applied background editetext_border_background.xml is as follow

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="20dp">
    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>

when I tried to apply border to TextInputLayout it doesn't give expected output.

Can anyone help me??

Answer 1

You should use Material Design style for Outline Box. Just simple use:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

in TextInputLayout. See Text Field for Android in Material Design Guide