Android Selectors

GUI is always an important part of any application, because ordinary users dont know and don't care what's behind the scene; they want something easy to work with and nowadays 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.
Today I'm gonna talk about one of the beautiful features of Android which gives you the ability to change the default behavior of GUI components.
when designing GUIs, most of the times you want to change the appearance of buttons, input Fields, menus and.... 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.
In this post i will show you an example of customizing a ListView which is gonna look like this :







It is nothing but a simple ListView... believe me, and here is the XML which is being used to create it :

<ListView android:id="@+id/list" 
      android:layout_width="fill_parent"
      android:layout_height="wrap_content" 
      android:dividerHeight="0dip"
      android:divider="@null" 
      android:listSelector="@drawable/list_selector"
      android:layout_gravity="center" />

the code which I've used to populate the list :

 
  ListView view = (ListView)findViewById(R.id.list);
  view.setAdapter(new ArrayAdapter(this, R.layout.menu_item, ITEMS));
  view.setOnItemClickListener(this);    

and finally, here is the content of menu_item.xml file :

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


 <TextView xmlns:android="http://schemas.android.com/apk/res/android" 
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:textSize="12dip"
           android:textStyle="bold"
           android:paddingTop="20dip"
           android:paddingBottom="20dip"
           android:layout_gravity="center" 
           android:gravity="center"
           android:background="@drawable/selector"
           android:textColor="@drawable/color_selector"/>:
 

see? it's a simple, ordinary list, there is no secret here but a simple trick; I've used selectors for both background and text color for our TextView, what do you think "selector" and "color_selector" are?
they actually refer to selector.xml and color_selector.xml files inside drawable directory, you can see the content of them below :

<selector xmlns:android="http://schemas.android.com/apk/res/android">:
    <item android:state_selected="true" android:drawable="@drawable/selector_s" />:
    <item android:state_pressed="true" android:drawable="@drawable/selector_s" />:
    <item android:drawable="@drawable/selector_d" />:  
</selector>:

<selector xmlns:android="http://schemas.android.com/apk/res/android">:
    <item android:state_selected="true" android:color="@color/black" />:
    <item android:state_pressed="true" android:color="@color/red" />:
    <item android:color="@color/white" />:  
</selector>:

what does the content of color_selector file mean? it says that the text color will be black in "selected" state, red in "pressed" state and white otherwise, and i reckon now you should be able to figure out what the content of selector file means.
here is the content of selector_s and selector_d :

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/pill"
    android:gravity="center" />

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/pill_s"
    android:gravity="center" />

as you might have noticed,I've also used "listSelector" attribute of our ListView to customize the behavior of the list when user is going through options in the list.
list_selector.xml file looks like this :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@drawable/wood01" />
    <item android:drawable="@drawable/wood02" />  
</selector> 

and here are all the drawable objects i used in this application if you wanna give it a try and see how easy it works ;)