How do I style selected item in Android ListView?

codedog picture codedog · Oct 29, 2010 · Viewed 29.2k times · Source

I am an Android newbie trying to learn the UI side of things and it's doing my head in. Here's what I have right now:

breeds_listing.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content">
    <ListView android:id="@+id/breedsListView"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:dividerHeight="0px" android:divider="#00000000"></ListView>
</LinearLayout>

breeds_listing_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:background="@drawable/list_item_background"
    android:orientation="horizontal" >
    <TextView android:id="@+id/allbreeds_single_item"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:gravity="center_horizontal"></TextView>
</LinearLayout>

list_item_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#043402" />
    <stroke android:width="3dp" color="#ffff8080" />
    <corners android:radius="8dp" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp"
        android:bottom="10dp" />
</shape>

What I am struggling to figure out is how do I style the selected item? At the moment the selected item has a ghastly orange background which, under the rounded green rectangle, gives an orange outline effect. I'm sure I have not done things in line with best practices so any suggestions or improvements would be greatly appreciated.

Many thanks, D.

Answer

William Remacle picture William Remacle · Oct 29, 2010

I do this :

 <selector xmlns:android="http://schemas.android.com/apk/res/android">

   <item android:state_pressed="true">
       <shape  >
         <solid android:color="#929292" />
       </shape>
   </item>



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

 </selector>

So you can use this property android:state_pressed="true"

In my example, the cell background will only be white, and grey when pressed.

I hope it helps!