65.9K
CodeProject is changing. Read more.
Home

How to make EditText With Border and Gradient Background in Android Using XML

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.60/5 (12 votes)

Nov 24, 2014

CPOL
viewsIcon

227475

Here, I am going to apply a good look and feel on EditText in Android. For this purpose, we can use image also but I'll use XML here.

Introduction

Actually, there are lots of links you can find to design view using XML in Android, but here I am going to give a good look and feel.

EditText view with border and gradient background

Using the Code

Create an XML file with the name "EditTextStyle.xml" in the drawable folder in your project and write the following code:

<?xml version="1.0" encoding="utf-8" ?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:thickness="0dp"
       android:shape="rectangle">
  <stroke android:width="3dp"
         android:color="#4799E8"/>
  <corners android:radius="5dp" />
  <gradient
   android:startColor="#C8C8C8"
   android:endColor="#FFFFFF"
   android:type="linear"
   android:angle="270"/>
</shape>

Now add the following attribute to your EditText:

<EditText
            android:id="@+id/inputSearchEditText"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="20dp"
            android:layout_marginRight="15dp"
            android:layout_centerVertical="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="start"
            android:gravity="center"
            android:hint="Search text"
            android:inputType="text"
            android:background="@drawable/EditTextStyle"/>

Or you can apply the style by using C# code if you are using Xamarin to develop Android app:

inputSearchEditText.SetBackgroundResource(Resource.Drawable.EditTextStyle);

Now it's finished. Actually, it's very simple.