Create different Selectors in Android

           

In Android GUI is always an important part of any application, because ordinary users don't know and don't care about what's behind the scene; they want something easy to work with and now a days attractive GUI is a must for most applications.

Although making an appealing and innovative interface needs something more than just programming skills and knowledge, every programmer should know how to customize different GUI components within whatever framework and environment they are working.When designing GUIs, most of the times you want to change the appearance of buttons, input Fields, menus etc.. 

Android Selectors have been provided to solve all these kind of problems, they enable us to decide what to show and how to show based on different states of each components.

For example. You can tell a button to have black background color with red text color when it is in pressed state or whatever else.

So today i am going to show you how you can create selectors for Buttons with single color,two color and three color of layers.

Step 1: Create Project and add resources.

First of all create a simple android project in your workspace. 
After creating project Prepare/select any two images for Button states and put it into res/drawable folder.

1. "btn_selector_img.png"  -Default image of Button
2. "btn_selector_hv_img.png" - Display when the Button is Pressed.

Step 2: Create xml resources for the different types of selectors in res/drawable folder

1. Simple Image selector for showing images for pressed and unpressed states 

 image_selector.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <selector xmlns:android="http://schemas.android.com/apk/res/android">  
   <item android:drawable="@drawable/btn_selector_hv_img" android:state_pressed="true"/>  
   <item android:drawable="@drawable/btn_selector_img"/>  
 </selector>  
 2.Simple Color selector to show different colors on Button when pressed or unpressed.  
   color_selector.xml  
 <?xml version="1.0" encoding="utf-8"?>  
 <selector xmlns:android="http://schemas.android.com/apk/res/android">  
   <item android:drawable="@color/yellow" android:state_pressed="true"/>  
   <item android:drawable="@color/pink"/>  
 </selector>  

2.Simple Color selector to show different colors on Button when pressed or unpressed.

  color_selector.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <selector xmlns:android="http://schemas.android.com/apk/res/android">  
   <item android:drawable="@color/yellow" android:state_pressed="true"/>  
   <item android:drawable="@color/pink"/>  
 </selector>  

3.Two Color selector to show different colors on Button when pressed or unpressed.

two_color_selector.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <selector xmlns:android="http://schemas.android.com/apk/res/android">  
   <item android:state_pressed="true">  
     <shape xmlns:android="http://schemas.android.com/apk/res/android">  
       <gradient android:angle="90" android:endColor="@color/yellow" android:startColor="@color/pink"   
         android:type="linear" />  
     </shape>  
     </item>  
   <item>  
     <shape xmlns:android="http://schemas.android.com/apk/res/android">  
       <gradient android:angle="90" android:endColor="@color/pink" android:startColor="@color/yellow"  
          android:type="linear" />  
     </shape>  
     </item>  
 </selector>  

4.Three Color selector to show different colors on Button when pressed or unpressed.

three_color_selector.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <selector xmlns:android="http://schemas.android.com/apk/res/android">  
   <item android:state_pressed="true">  
     <shape xmlns:android="http://schemas.android.com/apk/res/android">  
       <gradient android:angle="90" android:centerColor="@color/white" android:endColor="@color/pink"   
         android:startColor="@color/yellow" android:type="linear" />  
     </shape>  
   </item>  
   <item>  
     <shape xmlns:android="http://schemas.android.com/apk/res/android">  
       <gradient android:angle="90" android:centerColor="@color/white" android:endColor="@color/yellow"   
         android:startColor="@color/pink" android:type="linear" />  
     </shape>  
    </item>  
 </selector>  

Step 3: Create layout xml 

 <?xml version="1.0" encoding="utf-8"?>  
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent" >  
   <LinearLayout  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:gravity="center_vertical|center"  
     android:orientation="vertical" >  
     <TextView  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_marginTop="20dip"  
       android:text="@string/title_selector_type"  
       android:textSize="20dp"  
       android:textStyle="bold" />  
     <!-- When you use image view then the attribute "android:clickable" must be set to "true" -->  
     <Button  
       android:layout_width="250dp"  
       android:layout_height="60dp"  
       android:layout_marginTop="20dip"  
       android:background="@drawable/image_selector"  
       android:text="@string/image_selector" />  
     <Button  
       android:layout_width="250dp"  
       android:layout_height="60dp"  
       android:layout_marginTop="20dip"  
       android:background="@drawable/color_selector"  
       android:text="@string/single_color_selector" />  
     <Button  
       android:layout_width="250dp"  
       android:layout_height="60dp"  
       android:layout_marginTop="20dip"  
       android:background="@drawable/two_color_gradiant_selector"  
       android:text="@string/two_color_selector" />  
     <Button  
       android:layout_width="250dp"  
       android:layout_height="60dp"  
       android:layout_marginTop="20dip"  
       android:background="@drawable/three_color_gradiant_selector"  
       android:text="@string/three_color_selector" />  
     <Button  
       android:layout_width="250dp"  
       android:layout_height="60dp"  
       android:layout_marginTop="20dip"  
       android:textStyle="bold"  
       android:background="@drawable/color_selector"  
       android:text="@string/gradiant_font_selector"  
       android:textColor="@color/text_selector" />  
   </LinearLayout>  
 </ScrollView>  

Output:

Download Source