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