Creating Custom EditText Selector

Hello Friends,

    Today you  will see how we can create combined EditText’s with nice rounder borders and click effect. Starting with most of ours EditText would look like.

Lets start with a layout file which contains EditText as below :

 <EditText  
  android:layout_width="fill_parent"  
  android:layout_height="wrap_content"  
 />  
 <EditText  
  android:layout_width="fill_parent"  
  android:layout_height="wrap_content"  
 />  
 <EditText  
  android:layout_width="fill_parent"  
  android:layout_height="wrap_content"  
 />  

Now we will create some backgrounds for these.Name this as group_top.xml in your drawable folder.

group_top.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <inset android:insetBottom="-2px" xmlns:android="http://schemas.android.com/apk/res/android">  
 <selector>  
  <item android:state_pressed="true">  
  <shape android:shape="rectangle">  
   <corners android:topLeftRadius="4dip"   
        android:topRightRadius="4dip"   
        android:bottomLeftRadius="0dip"  
        android:bottomRightRadius="0dip" />  
   <gradient android:startColor="#FF058bf5" android:endColor="#FF015ee6" android:angle="270" />  
   <stroke android:width="2px" android:color="#E6E6E6" />  
  </shape>  
  </item>  
  <item>  
  <shape android:shape="rectangle">  
   <corners android:topLeftRadius="4dip"   
        android:topRightRadius="4dip"   
        android:bottomLeftRadius="0dip"  
        android:bottomRightRadius="0dip" />  
   <solid android:color="#FFFFFFFF" />  
   <stroke android:width="2px" android:color="#E6E6E6" />  
  </shape>  
  </item>  
 </selector>  
 </inset>  

Key point here is how the corner radius are placed. Because this would be the background for top most edittext the top left and top right corners are round. Next comes the group_row.xml . this one will be the background of our inner edittexts.

group_row.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <inset android:insetBottom="-2px" android:insetTop="-1px" xmlns:android="http://schemas.android.com/apk/res/android">  
 <selector>  
  <item android:state_pressed="true">  
  <shape android:shape="rectangle">  
   <gradient android:startColor="#FF058bf5" android:endColor="#FF015ee6" android:angle="270" />  
   <stroke android:width="2px" android:color="#E6E6E6" />  
  </shape>  
  </item>  
  <item>  
  <shape android:shape="rectangle">  
   <solid android:color="#FFFFFFFF" />  
   <stroke android:width="2px" android:color="#E6E6E6" />  
  </shape>  
  </item>  
 </selector>  
 </inset>  

 Lets move to our next drawable which will make the footer edittext. Name this group_bottom.xml .

group_bottom.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <inset android:insetTop="-1px" xmlns:android="http://schemas.android.com/apk/res/android">  
 <selector>  
  <item android:state_pressed="true">  
  <shape android:shape="rectangle">  
   <corners android:bottomLeftRadius="4dip"  
    android:bottomRightRadius="4dip"   
        android:topLeftRadius="0dip"  
        android:topRightRadius="0dip" />  
   <gradient android:startColor="#FF058bf5" android:endColor="#FF015ee6" android:angle="270" />  
   <stroke android:width="2px" android:color="#E6E6E6" />  
  </shape>  
  </item>  
  <item>  
  <shape android:shape="rectangle">  
   <corners android:bottomLeftRadius="4dip"  
     android:bottomRightRadius="4dip"   
        android:topLeftRadius="0dip"  
     android:topRightRadius="0dip" />  
   <solid android:color="#FFFFFFFF" />  
   <stroke android:width="2px" android:color="#E6E6E6" />  
  </shape>  
  </item>  
 </selector>  
 </inset>  

Done with our drawables. Add these to your edit text backgrounds now.

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:layout_margin="20dp"  
   tools:context="com.example.demoproject.MainActivity" >  
   <EditText  
     android:id="@+id/et1"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_marginTop="10dp"  
     android:background="@drawable/group_top"  
     android:ems="10"  
     android:hint="username"  
     android:padding="10dp"  
     android:text="ajksdgkjasdgbiksdgbf" />  
   <EditText  
     android:id="@+id/et2"  
     android:layout_width="fill_parent"  
     android:layout_height="1dp"  
      android:layout_below="@+id/et1"  
     android:background="@drawable/group_row" />  
   <EditText  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_below="@+id/et2"  
     android:background="@drawable/group_bottom"  
     android:ems="10"  
     android:padding="10dp"  
     android:text="ajksdgkjasdgbiksdgbf" >  
     <requestFocus />  
   </EditText>  
 </RelativeLayout>  

Thanks !!