Android EditText Control Drawable

  • by

Android EditText Control Drawable : Android EditText Control is a thin veneer over TextView that configures itself to be editable. Its base class is android.widget. User can enter text values in Edit text control. You can configure Android EditText control to accept different values. For instance, EditText control can be configured to accept only numeric values where user is required to enter his/her age, or EditText control can be configured to accept only alphabets  where name is required.Android EditText control can be styled using draw-able files, which can create a great looking design.

Android EditText Control Drawable:

Make a new folder in your res folder named drawable. (res>drawable).

Make three drawable layout file in drawable folder as :

1.res > drawable > edittext.xml :

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item 
 android:state_pressed="true" 
 android:state_enabled="true"
 android:drawable="@drawable/edittext_focused" />
 <item 
 android:state_focused="true" 
 android:state_enabled="true"
 android:drawable="@drawable/edittext_focused" />
 <item 
 android:state_enabled="true"
 android:drawable="@drawable/edittext_normal" />
</selector>

2.res > drawable >edittext_normal.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:padding="7dp"
 android:shape="rectangle" >

<solid android:color="#FFFFFF" />

<stroke
 android:width="2dp"
 android:color="#FF0000" />

<corners
 android:bottomLeftRadius="2dp"
 android:bottomRightRadius="2dp"
 android:topLeftRadius="2dp"
 android:topRightRadius="2dp" />

</shape>

3.res > drawable > edittext_focused.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:padding="7dp"
 android:shape="rectangle" >

<solid android:color="#ffff80" />

<stroke
 android:width="2dp"
 android:color="#FF0000" />

<corners
 android:bottomLeftRadius="2dp"
 android:bottomRightRadius="2dp"
 android:topLeftRadius="2dp"
 android:topRightRadius="2dp" />

</shape>

And in your res > layout > activity_main.xml supply this drawable as background to our EditText control :

res>layout>activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#fff"
 android:orientation="vertical"
 android:padding="10dp" >

<EditText
 android:id="@+id/edtName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:hint="Enter your Name"
 android:inputType="text"
 android:padding="10dp"
 android:textColor="#000" />


 <EditText
 android:id="@+id/edtPasscode"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:background="@drawable/edittext"
 android:hint="Enter your Password"
 android:inputType="textPassword"
 android:padding="10dp"
 android:textColor="#000" />

</LinearLayout>

This will generate following EditText control :

Please also see : Android Beginners Tutorial.

 


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.