Search This Blog

Loading...

Wednesday, December 30, 2009

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 ;)




















13 comments:

Alessio Grumiro said...

good guide....

saad said...

thank you very much

Saad BOUCHEHBOUN

TheBones said...

Thanks for the thorough explanation...you go over details that many other people gloss over and it's very much appreciated. So far your posts have been very useful.

Pavan said...

Wow. It is very nice. Thanks. It helped my application where I wanted to change the text color in selected list item.

Slayer said...

This is just I was looking for. THanks very much...

Kitman said...

Great Post.
Thanks Amir!

Firewall_Sudhan said...

Cool one man..

Anonymous said...

can you please post a url that has all of the possibilities for using selectors?
i wonder what i can and what i can't do using this cool feature.

Goutom said...

very very helpful tutorial.Just need the source code.where I can find the full project.

davidiz said...

Nice posting. Any chance you can supply a complete running sample that I can import into eclipse?

Shanmugam said...

This was good... Awesome....

It was helpful for me too...

But one small suggestion you have used color_selector xml and in that android:color which accepts hex decimal value seems....
if i give @color/white its error.. Please check to it

Chris Lacy said...

Thanks for this tutorial. FYI a working demo can be found here

Gagan said...

Have been looking for a good and simple article on it since long. Thanks, a good one.