Custom EditText borders in android

Question

enter image description here

How can I get two textboxes like this in android? By using Edittext I always get a box of old style.. Please help

With the help of the following xml I got it this far:

enter image description here

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

    <solid android:color="#0193DE" />

    <stroke
        android:width="1.5dp"
        android:color="#FFFFFF" />

    <corners
        android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp" />

</shape>

How to get rid of the border lines on the top, left and right? I also want to display the hint in white color. Please help me with this too please..

add custom textfield. (with your own background and fonts) – Rince Thomas Apr 06 '15 at 11:18 — Rince Thomas, Apr 06 '15 at 11:18

score 2 · Answer 1 · answered Apr 06 '15 at 11:22

You can use drawable left for this, check below sample code -

<EditText
            android:layout_width="280dp"
            android:layout_height="40dp"
            android:inputType="textPassword"
            android:ems="10"
            android:paddingLeft="10dp"
            android:imeOptions="actionDone"
            android:background="@android:color/white"
            android:drawableLeft="@drawable/password_ico"
            android:hint="@string/password"
            android:layout_marginTop="10dp"
            android:id="@+id/editText2"
            android:drawablePadding="10dp"
            android:layout_below="@+id/emailIdEditText"
            android:layout_centerHorizontal="true" />

Edit this code and use your drawable.

Anjali · Accepted Answer · 2015-04-08T10:16:17.157

2

Try this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
    <item android:bottom="2dp">
        <shape android:shape="rectangle" >
            <solid android:color="#0193DE" />
        </shape>
    </item>
</layer-list>

For color of hint text add this to your EditText

android:textColorHint="@android:color/white"

edited Apr 08 '15 at 10:16

answered Apr 08 '15 at 09:01

Anjali

598
2
5
15

thank you :) can you help me with the hint color too? – Veronika Gilbert Apr 08 '15 at 09:04

score 1 · Answer 3 · edited May 23 '17 at 10:32

1

This is just to EditText containers. Bottom line added as background:

TextView.setBackgroundDrawable(Drawable drawable)

User and key icons added as drawable into EditText like in this answer:

How to add image in a TextView text?

edited May 23 '17 at 10:32

Community

1
1

answered Apr 06 '15 at 11:22

Alexander Myznikov

295
3
9

score 1 · Answer 4 · answered Apr 06 '15 at 11:24

You can achieve it by changing the targetSdkVersion level of your project. Make it 16 or higher.

And in order to add icons in your EditText just add the following attribute in you <EditText>...</Edittext>

android:drawableLeft="@drawable/yourIcon"

and place the icon in drawable folder

Custom EditText borders in android

4 Answers4