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? enter image description here

mmm... really I don't understand you.. Edittext already have that line... right? — Aspicas, Jun 05 '15 at 07:30
You should follow this answer http://stackoverflow.com/questions/17449169/how-to-change-style-of-a-default-edittext — Salmaan, Jun 05 '15 at 07:31
No, Edittext by default will have only one line at the bottom. But here in the edittext's the half of the left and right sides will have boarders. — Srinivas69, Jun 05 '15 at 07:35
@Srinivas69 i have answer to your question,please check and let me know. — RaMeSh, Jun 05 '15 at 09:50

score 1 · Answer 1 · answered Jun 05 '15 at 07:33

EditText Already have That Line but if u wanna change its Style than you can do something like this

You can set a drawable for your edittext.

edittext_bg.xml:(put this file in your drawable folder)

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

 <item>
    <shape>
    <solid android:color="#c2c2c2" />
     </shape>
  </item>

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

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

 </layer-list>

and for the EditText user attribute

android:background="@drawable/edittext_bg"

score 0 · Answer 2 · answered Jun 05 '15 at 07:36

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

RaMeSh · Answer 3 · 2015-06-05T10:21:16.257

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:-

enter image description here

How to create editext boarder line in Android

3 Answers3