EditText with TextInputlayout layout With hint and Border

Question

I want EditText like one in above image. The problem is that if I use TextInputLayout it shows default bar at the bottom and I want it with custom borders around it.

I also tried using the below examples,

Custom TextInputLayout android

Solution 1

You can do it either using vector drawable as background of TextView or by the following method:

  <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <LinearLayout
            android:id="@+id/input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:background="@drawable/edittextround"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="40dp"
                android:includeFontPadding="false"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:visibility="invisible" />

            <EditText
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="10dp"
                android:maxLines="1"
                android:background="@android:color/transparent" />

        </LinearLayout>

        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="40dp" />



            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="40dp"
                android:layout_alignBottom="@+id/view"
                android:background="@color/white"
                android:includeFontPadding="false"
                android:paddingBottom="10dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:text="Name"
                android:textColor="@color/colorPrimary"
                android:textAppearance="@android:style/TextAppearance.Medium" />
</RelativeLayout>

edittextround.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:radius="3dp" />
            <stroke android:width="1dp" android:color="@color/gray" />
        </shape>
    </item>

</selector>

Solution 2

Use the Material Design Outline Box style

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

See the design guide here

Comments

[Yamini Balakrishnan]

Yeah Mr.Brown.. I have.. Its working for me.. Let me know your feedback..

[Kishore Jethava]

see my answer