Ever wonder how to make rounded corners for your EditText?

If you have ever worked on User Interface, you have probably wondered how to get some of your widgets such as the EditText to have rounded corners. Of course, in html/css and other platforms, all you have to do is designate a border-radius; however, in the android xml files, it’s not as simple as assigning a border radius. What you end up having to do is to create a drawable of a rounded corner EditText xml file that your actual layout can reference to have rounded corners for your EditText.

Here is a quick how to for making the roundedcorners.xml and using that roundedcorners.xml in your layout.xml:

First, lets create roundedcorners.xml in one of your drawable resource folders, it would look like this…

<!– ::START roundedcorners.xml:: –>

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

<item android:state_pressed="true" android:state_focused="true">
    <shape>
<!-- HERE, you have where you add borders -->
         <corners
            android:radius="15dp" />
    </shape>
</item>

<item android:state_pressed="true" android:state_focused="false">
    <shape>
        <corners
            android:radius="15dp" />       
    </shape>
</item>

<item android:state_pressed="false" android:state_focused="true">
    <shape>
        <corners
            android:radius="15dp" />                          
    </shape>
</item>

<item android:state_pressed="false" android:state_focused="false">
    <shape>
        <gradient 
            android:startColor="#F2F2F2"
            android:centerColor="#FFFFFF"
            android:endColor="#FFFFFF"
            android:angle="270"
        />
        <stroke
            android:width="0.7dp"                
            android:color="#BDBDBD" /> 
        <corners
            android:radius="15dp" />            
    </shape>
</item>

<item android:state_enabled="true">
    <shape>
        <padding 
                android:left="4dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="4dp"
            />
    </shape>
</item>

</selector>

<!– ::END roundedcorners.xml:: –>

Now, this file contains the border radius within the bracketed items, “<corner/>” simply adding rounded corners with a radius of 15dp.

You can also note that there are different states that an EditText can be, pressed, focused, or even neither pressed, nor focused.

There are also other User Interface editing options such as gradient :

        <gradient 
            android:startColor="#F2F2F2"
            android:centerColor="#FFFFFF"
            android:endColor="#FFFFFF"
            android:angle="270"
        />

or even padding (which can be done in the xml file as well):

            <padding 
                android:left="4dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="4dp"
            />

Now let’s look at how we can incorporate this roundedcorners.xml file into our layout!

Open up your layout file layout.xml and locate your EditText that you want to have rounded corners.

Then, all you have to do is to add the attribute of “background=”@drawable/roundedcorners”” and you’re done!

<!– ::layout.xml:: Comment: ^Above is your layout^ –>

<EditText

android:layout_height=”match_parent”

android:layout_width=”match_parent” >

android:background=”@drawable/roundedcorners”

</EditText>

Try it out!