Pages

Tuesday, June 8, 2010

Customizing Android ListView Colors

Since I struggled through getting a ListView to have custom colors, I am going to share exactly what is needed so others can avoid the struggle.

Below are the details for the resources required to accomplish this.  These resources will give your list items a white background with a highlighted color of blue and a clicked of green.

I've highlighted the key attributes in bold.  These are the attributes that differ from your default list.

File: res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 <ListView
  android:id="@android:id/list"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:listSelector="@android:color/transparent"
  />
 <TextView
  android:id="@android:id/empty"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/empty"
  />
</LinearLayout>
File: res/layout/item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent"
 android:orientation="horizontal" 
 android:padding="10sp"
 android:background="@drawable/item_selector">
 <CheckBox
  android:id="@+id/checkbox"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:focusable="false"
  />
 <TextView 
  android:id="@+id/title" 
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:ellipsize="end"
  android:singleLine="true" 
  android:textStyle="bold"
  android:padding="7dip"
  android:textSize="18sp"
  android:layout_toRightOf="@id/checkbox"
  android:textColor="@color/black"
  />
</RelativeLayout>


File: res/drawable/item_selector.xml



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


File: res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources> 
 <color name="red">#ff00</color>
 <color name="green">#f0f0</color>
 <color name="blue">#f00f</color>
 <color name="white">#ffff</color>
 <color name="black">#f000</color>
</resources>

Related Links:
Resource Types
Color State List
Color

23 comments:

Anonymous said...

it works great!. Thanks!

Anonymous said...

Just checked tons of tutorials on the net, but yours was the only one that came right to the point.

Good work !!!!
Thanks :-)

Hambonious said...

Glad it could help!

Anonymous said...

It really helped me. I spent almost 2 days before that trying to make it. It seems that android:listSelector does not work as it mentioned.
Thanks for your article!

Done Car said...

Thanks !
May force be with you!

Anonymous said...

Thanks!

May force be with you!

Bùi Minh Triết said...

OMG, it works :D Thanks very much for this article. I search this solution for over a week but find nothing. Luckily, your article helps me.

Anonymous said...

Hey, ty for your helpful example. I wonder what must be done to change the item text's color on state change.

Regards!

Anonymous said...

Don't know how to thank you. This drove me crazy... I hope everything goes well in your life and you get laid like hell because you revealed this code.
You're android GOD!!!

Anonymous said...

Many thanks for this solution.. finally it got it working now ;)

Anonymous said...

I hava checked many suggestions to try it out. Yours is just great. Many many Thanks for your helpful article.

Anonymous said...

thanks a lot, now all clear

Anonymous said...

Great tutorial, thanks guy!

Anonymous said...

Doesn't work, just gives me a normal listview. How do you associate listview with the other files? There's also an error in android:text="@string/empty"

Anonymous said...

Simple, and working... thank you bro... #2 thumbs up

Anonymous said...

I appreciate you pointing out that the RelativeLayout's "background" is the list selector... how unintuative (and undocumented) by Google!

Anonymous said...

Worked great for me..Thanks!

cr8 said...

Mantap Gan.....
nice work...:)

cr8 said...

Mantap Gan....
Nice Work.....:)

cr8 said...
This comment has been removed by the author.
cr8 said...
This comment has been removed by the author.
konvertpro said...

Excellent.. just used it to solve my problem..


Anonymous said...

Thanks! Much better than any stack overflow answers I've found in the past few days.