Android: Custom ListView Selector

The following tutorial will show you how to create a custom list selector as shown in the image below. I use an orange frame around the selected list item in this example, but you can virtually design anything you like.
To make it easier we use the original files for the list selector and transition from the Android SDK as a draft and modify them instead of starting from scratch.


1) Copy files from the Android SDK:
Go to android-sdk/platforms/android-1.6/data/res/drawable and copy the following .xml files to your project's /res/drawable folder:
  • list_selector_background.xml
  • list_selector_background_transition.xml
You also need the following 9-patch images from the same folder, because they're referenced by the above .xml-files. You have to copy them, because within the SDK they're not a public resource, which means you can't just access them through the android: namespace as you could do with other public resources.
  • list_selector_background_focus.9.png
  • list_selector_background_longpress.9.png
  • list_selector_background_pressed.9.png
  • list_selector_background_disabled.9.png
2) Edit the two xml files and add to all resource values, which are publicly accessible the "android:namespace"

In our case this is only the following item:
All the other elements can point to the local namespace, because we copied the resources (images) into our local project's /res/drawable/ folder.

3) Modify whatever you like

Instead of having the selected list item been overpainted by a transparent orange color (as it is default in Android), I prefered to have a full opaque (non-transparent) border around the selected list item. Therefor I opened up the list_selector_background_focus.9.png file in gimp and removed everything except of a thin orange frame (→ make sure the center is transparent). The black pixels around the image are 9-patch parameters. Don't remove them. If you want to modify them read up on it first here.

4) Creating a new style

Open up your /res/values/styles.xml (create it if it doesn't exist) and add this new style to it:

The @drawable/list_selector_background is a reference to your list_selector_background.xml file in /res/drawable/

5) Applying the new style to your layout

Open up your layout's xml file and add the style attribute.


I also added android:drawSelectorOnTop=“true” so that the orange image frame will be drawn with full opacity (no transparency effects).



I've just launched a new side project of mine:

Bugfender - A modern remote logger tailor-made for mobile development

It's currently free and you can sign up here: https://app.bugfender.com/signup

Any kind of feedback is more than appreciated :-)

9 comments:

  1. Hey , thanks for Sharing
    i am at the final step with your sample
    us said :
    The word '@drawable' is not correctly spelled

    @drawable/list_selector_background

    at /res/values/styles.xml/

    thanks

    ReplyDelete
  2. Hey zOro,

    Thanks for your feedback. However, I can't find the misspelt word. Can point out where exactly? Thanks.

    ReplyDelete
  3. Hi , Stefan this is what i meant :

    http://www.wave-site.com/wave-site/images/Android_Style.gif

    it's only a mark , not getting any error but still my list appear with out no style ..

    maybe it because the android:list id that i use:



    this is my style.xml :

    http://www.wave-site.com/wave-site/images/Android_Style.gif


    at onCreate I give id for the list

    lvFeed =(ListView)findViewById(android.R.id.list);

    keep doing my staff OK

    lvFeed.setOnItemClickListener(new OnItemClickListener() {

    public void onItemClick(AdapterView _av, View _v, int _index,

    long arg3) {

    selectedFeed = m_data.get(_index);

    showDialog(UrlDialog);

    }

    });

    thanks
    zOro

    ReplyDelete
  4. Hi Stefan,
    I am trying hard to make it work

    its keep saying :

    [2010-03-16 13:41:59 - MoreLists]ERROR: Failure processing PNG image C:\Documents and Settings\Zoro\workspace\MoreLists\res\drawable\list_selector_background_focus.9.png
    [2010-03-16 13:41:59 - MoreLists]C:\Documents and Settings\Zoro\workspace\MoreLists\res\drawable\list_selector_background.xml:7: ERROR Error: No resource found that matches the given name (at 'drawable' with value '@drawable/list_selector_background_disabled').
    [2010-03-16 13:41:59 - MoreLists]C:\Documents and Settings\Zoro\workspace\MoreLists\res\drawable\list_selector_background.xml:9: ERROR Error: No resource found that matches the given name (at 'drawable' with value '@drawable/list_selector_background_disabled').
    [2010-03-16 13:41:59 - MoreLists]C:\Documents and Settings\Zoro\workspace\MoreLists\res\drawable\list_selector_background.xml:12: ERROR Error: No resource found that matches the given name (at 'drawable' with value '@drawable/list_selector_background_transition').
    [2010-03-16 13:41:59 - MoreLists]C:\Documents and Settings\workspace\MoreLists\res\drawable\list_selector_background.xml:14: ERROR Error: No resource found that matches the given name (at 'drawable' with value '@drawable/list_selector_background_transition').
    [2010-03-16 13:41:59 - MoreLists]C:\Documents and Settings\workspace\MoreLists\res\drawable\list_selector_background.xml:17: ERROR Error: No resource found that matches the given name (at 'drawable' with value '@drawable/list_selector_background_focus').
    [2010-03-16 13:41:59 - MoreLists]C:\Documents and Settings\workspace\MoreLists\AndroidManifest.xml:6: ERROR Error: No resource found that matches the given name (at 'icon' with value '@drawable/icon').

    I download all files to
    for the file :
    C:\Documents and Settings\workspace\MoreLists\res\drawable:

    list_selector_background.xml
    list_selector_background_transition.xml

    list_selector_background_focus.9.png
    list_selector_background_longpress.9.png
    list_selector_background_pressed.9.png
    list_selector_background_disabled.9.png

    whaen i reaname the image name witout the .9 its seems good but there no effect on the ListView

    thanks

    ReplyDelete
  5. Hey z0ro,

    I'm very busy right now. But will look into your issues soon.

    ReplyDelete
  6. Hi Stefan,

    I met the same problem as z0ro, can you help with this issue?

    Thanks.

    Vycon

    ReplyDelete
  7. I was also having the 'resource not found' error, and it was due to the fact that I had modified the NinePath images incorrectly.

    ReplyDelete
  8. Thanx Stefan Klumpp,

    very good. its working .. Amazing ..!!!!!

    -Ash

    ReplyDelete
  9. note that in sdk version 8 +,
    you can't add android:style

    use: android:listselector instead,

    and referance it to "@drawable/list_selector_backgroud".

    you don't need the style.xml as well.

    cheers
    vlad

    ReplyDelete