EditText with rounded corners in android

EditText is a most commonly used widget in android applications. This will allow the user to type text and do required action on button click or any other actions. By default edittext is just a rectangular box with a line on bottom, which height and width can be specified through xml.

What if we want to give border to a EditText or if we want to give rounded edges to EditText . For achieving a custom design for an edittext we need to specify another layout as background . This file will be located in drawable folder and use that as edittext background drawable. Here we will implement an example of a custom design with rounded corners.

Steps

  1. Create new project in android studio
  2. Implement the background drawable file for edittext
  3. Add the edittext with custom background to your layout file

Create New project in android studio

Refer Android beginners app development guide (if you are beginner or if you don’t know how to create project in android studio). This is a tutorial contains all the basic information for start learning to implement an android application.

Implement the background drawable file for edittext

Next step is to create an xml file under res/drawable/edit_text_border.xml. This will be custom background for edittext widget which will define the border color,radius and width of the edittext layout

edit_text_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<stroke
android:width="1dip"
android:color="#C0C0C0" />
<corners
android:bottomLeftRadius="12dp"
android:bottomRightRadius="12dp"
android:topLeftRadius="12dp"
android:topRightRadius="12dp"></corners>
</shape>

Add the edittext with custom background to your layout file

Once we created the custom background drawable file, all we have to do is to set that file as the background of the edittext which is using in your layout file.

android:background="@drawable/edit_text_border"

Following is the complete EditText code which should be add the layout file with the above line added , you can add your own features as well.

<EditText
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="10dp"
android:background="@drawable/edit_text_border"
android:hint="Title"
android:padding="5dp"
android:textColor="#000000" />

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *