Is there any way to create EditText
that has rounded corners?
views:
302answers:
2
A:
By my way of thinking, it already has rounded corners.
In case you want them more rounded, you will need to:
- Clone all of the nine-patch PNG images that make up an
EditText
background (found in your SDK) - Modify each to have more rounded corners
- Clone the XML
StateListDrawable
resource that combines thoseEditText
backgrounds into a singleDrawable
, and modify it to point to your more-rounded nine-patch PNG files - Use that new
StateListDrawable
as the background for yourEditText
widget
CommonsWare
2010-09-05 15:31:46
+2
A:
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:
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>
Cristian
2010-09-05 15:44:11
@Cristian: Except that your solution uses the same drawable for all states. A regular `EditText` has different backgrounds for focused, disabled, pressed, and selected, besides the default. Focused, in particular, may be important going forward if we get some Android devices that lack touchscreens, like Google TV.
CommonsWare
2010-09-05 15:47:13
You are right... I just edited to show how to use states. Thanks, Mark!
Cristian
2010-09-05 16:36:19