Android ListView : highlight selected item

In this android tutorial, i will show you how to highlight the selected item of a ListView, so that it keeps being highlighted. By default, the highlight disppears so in a list-detail page, you don’t see which item has been selected. Other people use a radio to do that, but i prefer to change the background color to lighten the UI. Let’s see a little demo:

If you wish to test before, you can install the application with the following link :

logo-app
Your app idea
Michenux
Free   
pulsante-google-play-store
pulsante-appbrain
qrcode-app

Let’s start tutorial:

First thing is to configure the ListView to singleChoice because only one item can be selected :

<ListView
       android:id="@android:id/list"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:choiceMode="singleChoice">
</ListView>

Then, you need to create a selector. This is where you will configure colors for each defined state. The selected file
is in res/drawable directory.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
   android:exitFadeDuration="@android:integer/config_mediumAnimTime">

   <item android:drawable="@android:color/holo_orange_dark" android:state_pressed="true"/>
   <item android:drawable="@android:color/holo_green_light" android:state_selected="true"/>
   <item android:drawable="@android:color/holo_green_light" android:state_activated="true"/>

</selector>

Then, on the item layout, add the attribute activatedBackgroundIndicator at top level:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   android:background="?android:attr/activatedBackgroundIndicator">
   
    <!-- your item content-->
</LinearLayout>

Finally, you need to link the selector with your ListView. This can be done in method onCreate of a ListActivity or
in method onActivityCreated of a ListFragment.

this.getListView().setSelector(R.drawable.your_selector);

That’s all.

Update (2013/05/30) :

I didnot explain how to change the blue color.
Here is the solution :

Create a file res/drawable/listitem_background.xml with the following content :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true" android:drawable="@color/purple_dark" />
    <item android:drawable="@android:color/transparent" />
</selector>

Replace the @color/purple_dark with the color of your choice.

Then, in your theme, add the following line :

<item name="android:activatedBackgroundIndicator">@drawable/listitem_background</item>
Share Button

Comments

31 Responses to “Android ListView : highlight selected item”

  1. David on July 3rd, 2012 6:28 pm

    Hi,

    I was following your interesting tutorial about highlight ListView(http://www.michenux.net/android-listview-highlight-selected-item-387.html) but it doesn’t works for me.. could you give a link, for example github, with code project (like video) if is posible?

    thanks!

  2. Michenux on July 18th, 2012 9:16 pm

    I will add the source code this week-end.

  3. Michenux on July 22nd, 2012 9:59 pm

    I have uploaded my whole starting project for android to github :
    https://github.com/Michenux/YourApplication

  4. Raph on August 1st, 2012 3:10 am

    Just a general comment about your blog.
    I really like it and especially posts about Android.

    Your github bootstrap application is great as well however a little bit more comments could be awesome.

  5. ajay on August 3rd, 2012 11:46 am

    hi
    i getting error like “error: No resource identifier found for attribute ‘exitFadeDuration’ in package ‘android'”
    when i add the below line
    android:exitFadeDuration=”@android:integer/config_mediumAnimTime”

  6. Michenux on August 3rd, 2012 12:35 pm

    Ajay: The minimum sdk level is 11.

  7. ajay on August 3rd, 2012 2:11 pm

    than q

  8. ajay on August 7th, 2012 8:52 am

    then below sdk level 10 how to achive this

  9. Michenux on August 7th, 2012 11:04 am

    ajay: below sdk10, i think it is not possible or quite complicated. One alternative is to put a radio in each item of the list to represent the selected item.

  10. Bruno on September 11th, 2012 2:06 pm

    Doesn’t this.getListView().setSelector(selector) change the selector of the whole listview ? Instead of their items ? Im asking that because when i tried this code the entire listview background changed when i had clicked on an item.

    In addition, the item doesn’t hold the highlight after it becomes selected as i wished. I heard the reason it acted that way is because there is no selected/focused item in touch screen mode, all selected object is unselected right after you take your finger out of the screen.
    So how did you make that work ? Could it be the SDK level ? (Im using level 2 btw, yeah i know its badly low, but i need it)

  11. Michenux on September 11th, 2012 8:49 pm

    Bruno, you need at least the SDK level 10 to make it work. I don’t think it is possible with SDK level 2. But if u find a solution, tell me and i will add it to this post.

  12. Hammad on September 14th, 2012 5:21 pm

    please provide the source code for the download too for more clarity and understanding. Cheers!

  13. Michenux on September 15th, 2012 9:43 am

    Hammad, the source code is available in the following application on github :
    https://github.com/Michenux/YourApplication

  14. Hammad on September 22nd, 2012 4:08 pm

    well it does not work for me… Is it necessary to add the selecter of the listview using the code or xml is also enough?

    My scenario is that i have a list view containing multiple components. A linear layout containing textview componenets and multiple buttons too. I exactly did the configurations as mentioned above but in vain.

  15. Hammad on September 22nd, 2012 6:41 pm

    if i use the xml which contains only one textview then your solution works. But once i add multiple textviews and couple of buttons in that resource being used as an xml, it does not work anymore. I think some more tweaking is required. :/

  16. angus on November 3rd, 2012 12:58 am

    how to also change selected item color ( blue ) ?

  17. chen on January 7th, 2013 3:56 am

    hi
    I am also trying to do this, but can’t get it to work. The selection will fade out. I am sure the selector part is working since I can change the color. Do you have a minimal source code? I was unable to compile your program since I am not using eclips. and while trying to compile, I am getting lots of error about google stuff. thanks

  18. Thammapat on January 14th, 2013 8:32 am

    Thank you very much

  19. Solata on January 14th, 2013 9:56 am

    Works for me. Great job!

  20. Alicia on February 1st, 2013 5:45 pm

    Hi works for me, but when activated action OnItemLongClick the selection doesnt change! can you help me?

  21. Mustafa ilhan on February 4th, 2013 12:40 pm

    Hi, it worked for me, great tutorial.
    What should i do to unselect it programmatically?

  22. Michenux on February 4th, 2013 9:05 pm

    Mustafa: did you try clearChoices() ?

  23. Alex on February 21st, 2013 12:28 pm

    Worked perfectly from the first run. Great job, congrats!

  24. kaolick on March 7th, 2013 11:29 am

    Nice tutorial! My problem is that I don’t use a custom ListView item but android.R.layout.simple_list_item_multiple_choice instead. So my question is: How and where do I have to attach the selector to my ListView item or do I have to attach it to my ListView?

    I described my (bigger) problem here: http://stackoverflow.com/questions/15235388/android-select-and-highlight-multiple-listview-items-with-cab

    I hope that someone can help me with this. Btw. I’m on SDK-min 11

    Thanks in advance,
    kaolick

  25. www.wevegotacountrytosave.com on April 18th, 2013 1:28 pm

    This design is incredible! You certainly know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start my own
    blog (well, almost…HaHa!) Excellent job. I really loved what you
    had to say, and more than that, how you presented it.
    Too cool!

  26. jason on May 26th, 2013 2:40 pm

    Thank you for that. Wasted more time then I’d like to admit trying to programmatically change background resource on selected child views.

  27. Delphine on May 30th, 2013 3:29 pm

    Hello,
    Thank you very much for that.

    But i want to do the same with the color of the text, how can i do this ?

  28. Lei Yan on June 12th, 2013 8:17 pm

    Hello, thanks for you tutorial.
    I find it works if my row.xml only has textview.
    But in my case, I need add two buttons in each row.

    Did you have ideas for this?
    Thanks in advance.

  29. Muthu on July 1st, 2013 2:48 pm

    Really, this post was useful to me. After long days effort, i got solution through your post. Thanks a lot.

  30. sagar on January 8th, 2014 6:57 am

    Thanks ..It really helped me…:)

  31. Vasco on March 11th, 2014 11:25 am

    how can i get context menu to keep working in the selected item? it keeps working for the rest of them but not the selected one

    how can i unselect the item and make the listview selection empty?

    thanks

Leave a Reply