Custom EditText

Hi friends, this is my second post on XML designing. So let me start with an Android EditText widget.

 

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>