CODEWITHSUNDEEP
androidandroid-edittext
Ryan Sun
Ryan Sun

Reputation: 291

How to add border to EditText in android

edittext pic

Hi, I want to add an textbox just like the image above in android app. I used the edittext control,but cannot show border.

Upvotes: 24

Views: 63630

Answers (5)

Subhan Ali
Subhan Ali

Reputation: 1430

Create a new xml file edit_text_border.xml in drawable folder, or give name of your choice. Then add the following code:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="@android:color/transparent"/>

    <corners
        android:bottomRightRadius="12dp"
        android:bottomLeftRadius="12dp"
        android:topLeftRadius="12dp"
        android:topRightRadius="12dp"/>
    <stroke
        android:color="#ffffff"
        android:width="1dp"/>
</shape>

You can adjust the stroke color and radius values to your requirements. Finally, in your edittext set it as background like following.

<EditText
    android:id="@+id/edit_text"
    android:background="@drawable/edit_text_border"/>

Upvotes: 65

Leo DroidCoder
Leo DroidCoder

Reputation: 15046

Nowadays, the correct way would be to use TextInputLayout with the corresponding style.
It will not only draw an outline background but will preserve a nice hint animation.

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:hint="@string/some_hint"
        app:boxCornerRadiusBottomEnd="5dp"
        app:boxCornerRadiusBottomStart="5dp"
        app:boxCornerRadiusTopEnd="5dp"
        app:boxCornerRadiusTopStart="5dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            tools:ignore="KeyboardInaccessibleWidget" />

    </com.google.android.material.textfield.TextInputLayout>

If you want to change the line color - it's a little tricky:

Create a style:

<style name="Til" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
      <item name="boxStrokeColor">@color/text_input_box_stroke</item>
</style>

Where color res/color/text_input_box_stroke.xml is:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--    TODO play with these around -->
    <item android:color="#0cc" android:state_focused="true"/>
    <item android:color="#fcc" android:state_hovered="true"/>
    <item android:color="#f0f"/>
</selector>

Apply your new style to TextInputLayout as style="@style/Til"

Not forget to add a dependency to your app/build.gradle: 

implementation "com.google.android.material:material:1.1.0-alpha09"

Upvotes: 16

Milad Mohamadi
Milad Mohamadi

Reputation: 135

create xml file in drawable shape_border_and_background_login.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle"
    >
    <corners android:radius="25dip" />
    <solid android:color="#55ffffff">

    </solid>
    <stroke
        android:width="2dp"
        android:color="@color/white" />
</shape>

add shape file to EditText background:

 <EditText
                      android:id="@+id/edt_email"
                      android:layout_width="0dp"
                      android:layout_height="wrap_content"
                      android:layout_weight="10"
                    android:background="@drawable/shape_border_and_background_login"
                      android:inputType="textPersonName"
                      android:padding="@dimen/size15"
                      android:textSize="@dimen/size17"
                     />

Upvotes: 1

Firoz Memon
Firoz Memon

Reputation: 4650

Try following code:

  1. Create shape.xml file in drawable folder and write following code in it:

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

<!-- Background Color -->
<solid android:color="#ffffff" />

<!-- Border Color -->
<stroke android:width="1dp" android:color="#ff9900" />

<!-- Round Corners -->
<corners android:radius="5dp" />
</shape>
    1. Now inside your EditText use this xml by adding android:background="@drawable/shape"

Upvotes: 3

Adib Faramarzi
Adib Faramarzi

Reputation: 4054

You could do this in multiple ways.

You can create a drawable in xml ( a selector drawable that has shape items with round corners and border) - Similar Question (and example code)

Or you can create a 9-patch image and just use that. (Documentation and Example)

Upvotes: 0

Related Questions