How to create editext boarder line in Android

Question

I need to create an Edittext's boarder line as shown in the image below. How can I do it?

Answer 1

If you want to change EditText background and bottom color you just do two ways:

1.Normal way just changes do in activity_main.xml 2.custom edittext.xml write your own code for changes in edittext.

For your requirement i think just follow the custom way(Second Method) method:

COde:-

Just create edittext.xml in drawable folder and paste this code.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1.0dp"
        android:left="1.0dp"
        android:right="1.0dp">
        <shape>
            <solid android:color="#fff" />
        </shape>
    </item>
    <item android:bottom="2.0dp">
        <shape>
            <solid android:color="#ff0b79fe" />
        </shape>
    </item>
</layer-list>

and goto activity_main.xml file and just paste this code.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="100dp"
    android:layout_width="fill_parent"
    android:background="#ff0b79fe"
    android:orientation="vertical"
    android:layout_gravity="top|center"
    android:gravity="left">
    <EditText
        android:id="@+id/edit1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:hint="Friend's Name"
        android:textColorHint="#fff"
        android:textColor="#fff7fef6"
        android:inputType="text"
        android:gravity="center"
        android:layout_gravity="center"
        android:background="@drawable/edittext_bg"
        />
    <EditText
        android:id="@+id/edit2"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:hint="Friend's Email"
        android:textColorHint="#fff"
        android:textColor="#fff7fef6"
        android:inputType="text"
        android:gravity="center"
        android:layout_gravity="center"
        android:background="@drawable/edittext_bg"
        />
    <EditText
        android:id="@+id/edit3"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:hint="Friend's Phone Number"
        android:textColorHint="#fff"
        android:textColor="#fff7fef6"
        android:inputType="text"
        android:gravity="center"
        android:layout_gravity="center"
        android:background="@drawable/edittext_bg"
        />
    </LinearLayout>

Output:-

Answer 2

Try this: in xml:

<EditText
            android:id="@+id/searchEdittext"
            android:layout_width="fill_parent"
            android:layout_height="30dp"
            android:singleLine="true"
            android:background="@drawable/edit_text_design"
            android:hint="@string/enter_keyword"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp" />

and create edit_text_design.xml in drawable:

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#e163859f" />
            <size android:width="5dp" />
        </shape>
    </item>

    <!-- main color -->
    <item
        android:bottom="1.5dp"
        android:left="1.5dp"
        android:right="1.5dp">
        <shape>
            <solid android:color="#f4f3f8" />
        </shape>
    </item>

    <!-- draw another block to cut-off the left and right bars -->
    <item android:bottom="5.0dp">
        <shape>
            <solid android:color="#f4f3f8" />
        </shape>
    </item>
</layer-list>

I hope this will help, it worked for me