androidviewandroid-edittextrounded-cornersandroid-shapedrawable

How to create EditText with rounded corners?


How to create an EditText that has rounded corners instead of the default rectangular-shaped corners?


Solution

  • There is an easier way than the one written by CommonsWare. Just create a drawable resource that specifies the way the EditText will be drawn:

    <?xml version="1.0" encoding="utf-8"?>
    <!--  res/drawable/rounded_edittext.xml -->
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" 
        android:padding="10dp">
    
        <solid android:color="#FFFFFF" />
        <corners
            android:bottomRightRadius="15dp"
            android:bottomLeftRadius="15dp"
            android:topLeftRadius="15dp"
            android:topRightRadius="15dp" />
    </shape>
    

    Then, just reference this drawable in your layout:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    
        <EditText  
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:padding="5dip"
            android:background="@drawable/rounded_edittext" />
    </LinearLayout>
    

    You will get something like:

    alt text

    Edit

    Based on Mark's comment, I want to add the way you can create different states for your EditText:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- res/drawable/rounded_edittext_states.xml -->
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item 
            android:state_pressed="true" 
            android:state_enabled="true"
            android:drawable="@drawable/rounded_focused" />
        <item 
            android:state_focused="true" 
            android:state_enabled="true"
            android:drawable="@drawable/rounded_focused" />
        <item 
            android:state_enabled="true"
            android:drawable="@drawable/rounded_edittext" />
    </selector>
    

    These are the states:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- res/drawable/rounded_edittext_focused.xml -->
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" android:padding="10dp">
    
        <solid android:color="#FFFFFF"/>
        <stroke android:width="2dp" android:color="#FF0000" />
        <corners
            android:bottomRightRadius="15dp"
            android:bottomLeftRadius="15dp"
            android:topLeftRadius="15dp"
            android:topRightRadius="15dp" />
    </shape>
    

    And... now, the EditText should look like:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    
        <EditText  
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:text="@string/hello"
            android:background="@drawable/rounded_edittext_states"
            android:padding="5dip" />
    </LinearLayout>