Follow this Blog!

Dec 10, 2012

f Comment

Android: Setting Background Color of the Selected Item in ListView!

Amazon If you are developing an Android app you may come across the same issue I've come across when dealing with ListView: when user selects an item in the ListView how do I set the background color of the item so that user knows they've selected that specific item in the list?

Sounds simple right? Not really. I've experimented myself for a while before finally getting a solution. Below I'll tell you exactly how to accomplish this Herculean task!

I am using Windows 7, Eclipse Indigo, Android 4.1 (API 16).
Define Main Activity's Layout XML
First of all in your main activity's layout XML, located at [workspace]/res/layout/activity_main.xml, you should have the following ListView defined somewhere:
...
<ListView
  android:id="@+id/possibleLocationView"
  android:layout_width="fill_parent"
  android:layout_height="80dp"
  android:layout_marginBottom="10dp"
/>
...
This element is where you'd like your list to show up in your app.

Define Colors
Next you need to define a list of colors you'll be using. I create this file at [workspace]\res\values\colors.xml. Here's an example of this file:
<?xml version="1.0" encoding="utf-8"?>

<resources>
 <drawable name="red_color">#ff0000</drawable>
 <drawable name="white_color">#ffffff</drawable>
 <drawable name="orange_color">#ffffbb33</drawable>
</resources>
I only define the colors I'll be using. If you want the background color of the selected item to be blue, for example, you'll define it here.

Define Which Color to Use at a State
Next you need to define what color should be used given the state of the action applied to a specific item. This file is usually located at [workspace]\res\drawable\my_drawable.xml. Here's an example of the content of the file:
<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_selected="true" android:drawable="@drawable/orange_color"/> 
    <item android:state_pressed="true" android:drawable="@drawable/white_color"/> 
    <item android:state_focused="true" android:drawable="@drawable/red_color"/> 
    <item android:drawable="@drawable/white_color"/> 
</selector>
As you can see when user has selected an item (indicated by android:state_selected="true") the item's background color will be orange.

Define a Layout for Each of the ListView's Items
Next you need a layout for the items inside the list. For example you can define the size of the text of each item inside the list, how close the item's text is to the left side via android:paddingLeft, etc.

This layout file should be normally located at [workspace]/res/layout/possible_location_list_layout.xml. Here's an example of this layout file:
<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:minHeight="15dp"
    android:textSize="15dp"
    android:focusable="false"
    android:background="@drawable/my_drawable"
/>
The important attribute is android:focusable="false"!

Attach Listener to ListView
Next in your main activity, normally located at [workspace]\src\com\example\map\alarm\MainActivity.java, you should create a variable to reference the ListView and manipulate it accordingly:
...
ListView mPossibleLocationListView;
...
public void onCreate(Bundle savedInstanceState) {
  ...
  mPossibleLocationListView = (ListView) findViewById(R.id.possibleLocationView);
  mPossibleLocationListView.setOnItemClickListener(new OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
      Object pickedItem = mPossibleLocationListView.getItemAtPosition(position);
      // ...
      // do what you need with the picked item
      // ...
      view.setSelected(true);    
    }
});
...
The key line of code is view.setSelected(true);!

We simply attach a listener to this ListView so that when an item inside this list has been clicked the corresponding "view" is selected. In this context the view refers to the area confined by the boundaries of the item.

As soon as we call setSelected() the line android:background="@drawable/my_drawable" will be in effect immediately, where Android will understand that when this view is in the selected state the background should be painted in orange color.

Below is an example of dynamically creating a list of items for the ListView:
...
// suppose 'myAddresses' is filled with MyAddress objects
ArrayAdapter<MyAddress> adapter = new ArrayAdapter<MyAddress>(mContext, R.layout.possible_location_list_layout, myAddresses);
mPossibleLocationListView.setAdapter(adapter); 
...
We are done! I know it's not super straightforward but now you should've accomplished your goal!
If you have any questions let me know and I will do my best to help you!
Please leave a comment here!
One Minute Information - by Michael Wen
Find Michael on Google or Facebook
ADVERTISING WITH US - Direct your advertising requests to Michael