After working as an engineer for more than a decade, I’ve learned that frequently the most difficult part of solving a problem is getting started. This was the case when our marketing team approached me about varying some of the colors in our Android application to better match the corporate branding schema.

It turned out that getting away from the default “Android-orange” when working with list views in particular proved to be a headache. Ironically, when the job was complete, there was very little code involved, and certainly none of the code was complex. It was just a case of combing the Android documentation, various Android-related forums, and plenty of trial and error. Unlike the Colonel and his famous fried chicken, I think sharing the “secret recipe” is good business. Transparency is what differentiates Android in the mobile space.

If you’ve been looking for a digital concoction to give your list views a little extra zing, look no further. This tutorial will walk you through the process in a few easy steps. If you’d rather import the entire project into Eclipse, you can get the code here. Now let’s get started!

1. Start a new project in Eclipse. Target platforms 1.6 and higher. If you are using a newer version of the ADT, you may want to change the name of the default activity the wizard creates for you to Main.java to make it easier to follow along with this tutorial.

2. Create a /drawable folder in the /res directory. The /drawable folder will contain the background image we want for individual list items. There are a couple things to keep in mind here. First, I am using XML to draw the background shape and shade that shape dynamically, but you could use a 9-PNG (NinePatch) here as well. Second, I am using the same background for both the selected and pressed states, but you could break those up with two separate images if you’d like a more complex animation.

pressed.xml

<?xml version="1.0" encoding="utf-8"?>


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


<gradient


android:startColor="#ffffff"


android:endColor="#181818"


 android:angle="270"/>


<corners android:radius="0dp" />

</shape>

3. Under the /res directory, you should create a folder titled /xml. This is where you will add our custom list selector.

my_list_selector.xml

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


<item  android:state_pressed="true"


android:drawable="@drawable/pressed" />


<item  android:state_focused="true"


android:drawable="@drawable/pressed" />


<item   android:state_selected="true"


android:drawable="@drawable/pressed" />


<item   android:drawable="@android:color/white" />

</selector>

4. Create the two /layout files: one for the activity and one to define our list view rows. In the main.xml layout, note the cache color hint and the transparent background; these are necessary when using custom backgrounds on individual list item rows.

main.xml

<?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="fill_parent"


 android:orientation="vertical"


android:background="#ffffff">


<ListView


android:id="@+id/android:list"


 android:layout_width="fill_parent"


 android:layout_height="wrap_content"


 android:dividerHeight="1dip"


 android:layout_gravity="center"


 android:background="@android:color/transparent"


 android:cacheColorHint="#0000"


 android:layout_margin="8dip"


 android:gravity="center"


 android:focusable="false"/>


</LinearLayout>


list_item.xml


<?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:padding="6dip"


 android:focusable="false"


 android:background="@xml/my_list_selector">


<TextView


android:id="@+id/label"


 android:layout_height="wrap_content"


 android:layout_width="fill_parent"


 android:textSize="16sp"


 android:textColor="#0000ff"


 android:padding="2dip"/>

</LinearLayout>

5. Add our Main.java file to the /src directory. Except for creating a default array of strings to use, and pointing our adapter to the list item layout, the framework combined with our XML files does all the work behind the scenes.

Main.java
package com.authorwjf.customlistviews;
import com.authorwjf.customlistviews.R;
import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
public class Main extends ListActivity {
private String[] mFruits = {
"apple", "orange", "bannana", "pear", "kiwi", "grapes", "strawberry"
};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.main);

setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, R.id.label, mFruits));

}

}

If you’d like to see the before and after (Figure A and Figure B), you can remove the line android:background=“@xml/my_list_selector” from the file list_item.xml before compiling and running the APK on a device or emulator.
Figure A

Standard Android List Selector

Figure B

Custom Android List Selector

As I said when we started, there is nothing particularly difficult when it comes to customizing a list view from a technical perspective. Now that you’ve got a foot in the door, I’ll leave you to it.