CODEWITHSUNDEEP
androidandroid-layout
Sumanth Jois
Sumanth Jois

Reputation: 3234

How to have EditText with border in Android Lollipop

I am developing an Android app. I need to know how we can have a EditText with border. In Lolipop they have completely changed the EditText style. Can we do it without using drawables?

Upvotes: 61

Views: 132890

Answers (6)

Mohamed Nabil Essefaihi
Mohamed Nabil Essefaihi

Reputation: 217

To the option border in TextView doesn't exist, so the create border for your TextView you should do these steps:

  1. Steps 1.1 create xml file in drawable folder and use this code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="3dp"
        android:color="@color/black" />
    <solid
        android:color="#00FFFFFF"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"/>
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

⚠️ warning: do not create xml file in the layout because

2.1 call the drawable in your TextView as background

  1. Overview 👁️ enter image description here

Upvotes: 0

jcshar
jcshar

Reputation: 31

A quick and dirty solution I have used is to place the EditText inside of a FrameLayout. The margins of the EditText control the thickness of the border and the border color is determined by the background color of the FrameLayout.

Example:

<FrameLayout
    android:id="@+id/frameLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#000000">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:background="@android:color/white"
        android:ems="10"
        android:inputType="text"
        android:textSize="24sp" />
</FrameLayout>

But I would recommend, and the vast majority of the time I do, drawables for borders. Elite's answer is what I would go for in that case.

Upvotes: 2

Ghasem
Ghasem

Reputation: 15563

You can do it using xml.

Create an xml layout and name it like my_edit_text_border.xml

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
            <corners android:radius="5dp" />
            <stroke
                android:width="2dp"
                android:color="#949494"
                />
        </shape>
    </item>
</selector>

Add background to your Edittext

<EditText
 android:id="@+id/editText1"
 ..
 android:background="@layout/my_edit_text_border">

Upvotes: 14

Дмитро Яковлєв
Дмитро Яковлєв

Reputation: 435

For correct work your shape should be with selector and item tags

<?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" />
            <stroke android:width="1dp"
                    android:color="@color/shape_border_active"/>
        </shape>
    </item>

</selector>

Upvotes: 3

ELITE
ELITE

Reputation: 5940

Write editTextBackground.xml in drawable folder in resources

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="@color/borderColor" />
</shape>

don't forget to declare color in resources named borderColor.

and assign this background to the EditText in xml background attribute

<EditText
    android:id="@+id/text"
    android:background="@drawable/editTextBackground"
    />

and it'll set border to EditText.

UPDATE

You can change border of edit text without drawable by using style attribute

style="@style/Widget.AppCompat.EditText"

for more details visit customize edit text

Upvotes: 112

Inducesmile
Inducesmile

Reputation: 2493

You can use a drawable. Create a drawable layout file in your drawable folder. Paste this code. You can as well modify it - border.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
    android:width="1dp"
    android:color="@color/divider" />
<solid
    android:color="#00FFFFFF"
    android:paddingLeft="10dp"
    android:paddingTop="10dp"/>
<padding
    android:left="10dp"
    android:top="10dp"
    android:right="10dp"
    android:bottom="10dp" />
</shape>

in your EditText view, add 

android:background="@drawable/border"

Upvotes: 28

Related Questions