EditText - Tùy chỉnh EditText

Below is the code for each EditText:

Standard EditText:
<EditText
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:hint=”Standard” />

---

Rounded Corners:
create round.xml file in /drawable folder of your android project and add the following code

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android&#8221; >

<corners android:radius=”5dp” />

<stroke
android:width=”1dp”
android:color=”#44433A” />

<solid android:color=”#FFF” />

</shape>

Add this xml as a background for EditText Widget

<EditText
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”@drawable/round”
android:hint=”Round Corners”
android:padding=”8dp” />

---

Oval Corners:
create oval.xml file in /drawable folder of your android project and add the following code

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android&#8221; >

<corners android:radius=”50dp” />

<stroke
android:width=”1dp”
android:color=”#44433A” />

<solid android:color=”#FFF” />

</shape>

Add this xml as a background for EditText Widget

<EditText
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”@drawable/oval”
android:hint=”Oval Corners”
android:padding=”8dp” />

---

Fill Colors:
create fillcolor.xml file in /drawable folder of your android project and add the following code

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android&#8221; >

<corners android:radius=”5dp” />

<stroke
android:width=”1dp”
android:color=”#CC0000″ />

<solid android:color=”#FFCACA” />

</shape>

Add this xml as a background for EditText Widget

<EditText
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”@drawable/fillcolor”
android:hint=”Fill Colors”
android:padding=”8dp” />

---

Search box 1:
This goes  a bit different from above.

Create a noborder.xml file in /drawable folder of your android project and add the following code.

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android&#8221; >

<stroke
android:color=”@android:color/transparent” />

<solid android:color=”@android:color/transparent” />

</shape>

Note: Also need round.xml file as explained above.

Now in your main layout where you need the search box, add the following code

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:background=”@drawable/roundborder”
android:gravity=”center”
android:orientation=”horizontal” >

<EditText
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:layout_weight=”1″
android:background=”@drawable/noborder”
android:hint=”search box 1″
android:padding=”8dp”
android:singleLine=”true” />

<ImageView
android:layout_width=”40dp”
android:layout_height=”40dp”
android:padding=”5dp”
android:src=”@android:drawable/ic_menu_search” />
</LinearLayout>

---

Search box 2
Now here a bit more interesting things go on. Slightly different from above search box 1. You need to create two layouts as below.

Create a leftroundborder.xml in /drawable folder of your android project and add the following code

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android&#8221; >

<corners
android:bottomLeftRadius=”0dp”
android:bottomRightRadius=”5dp”
android:topLeftRadius=”5dp”
android:topRightRadius=”0dp” />

<stroke
android:width=”1dp”
android:color=”#44433A” />

<solid android:color=”#FFF” />

</shape>

Create a rightroundborder.xml in /drawable folder of your android project and add the following code

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android&#8221; >

<corners
android:bottomLeftRadius=”5dp”
android:bottomRightRadius=”0dp”
android:topLeftRadius=”0dp”
android:topRightRadius=”5dp” />

<stroke
android:width=”1dp”
android:color=”#44433A” />

<solid android:color=”#FFF” />

</shape>

Now in your main layout where you need the search box, add the following code

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:gravity=”center”
android:orientation=”horizontal” >

<EditText
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:layout_weight=”1″
android:background=”@drawable/leftroundborder”
android:hint=”search box 2″
android:padding=”8dp”
android:singleLine=”true” />

<ImageView
android:layout_width=”40dp”
android:layout_height=”41dp”
android:layout_marginLeft=”-1dp”
android:background=”@drawable/rightroundborder”
android:padding=”5dp”
android:src=”@android:drawable/ic_menu_search” />
</LinearLayout>

All together, download layouts as code from here