Articles

This will be the first post about my experiences learning Android development. At the moment, I'm working on a small application for the project/code management software Codebase (http://codebasehq.com). The aim of this article is to show how to create custom background colors for ListView interactions in Android; that is to say, make the background of ListView rows not that ugly green or orange gradient.

← In my primary Activity that first loads when you start up the application, we're displaying a list of activity logs from the user's activity feed. The layout file for this is quite simple:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <include android:id="@+id/custom_title" 
        layout="@layout/custom_title"/>
    <ListView android:id="@+id/android:list"
        style="@style/ListView"
        android:layout_weight="1"/>
    <include android:id="@+id/navigation_dashboard" 
        layout="@layout/navigation_dashboard"/>
</LinearLayout>

So the ListView is what we need to "style" here. You can see that I'm referencing a @style property called ListView. That's defined in res/values/styles.xml. This is a resource file which is compiled into a Java class for use at runtime. So we define "ListView" style here, and then we can reference it in out layout above with @style/ListView or in code at R.style.ListView.

res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="ListView">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:background">@color/off_white</item>
        <item name="android:cacheColorHint">@color/off_white</item>
        <item name="android:listSelector">@drawable/list_selector</item>
    </style>
</resources>

You can see here that I've defined a property for android:listSelector. This sets a drawable that tells our ListView how to display the selected rows in the list. I reference a list_selector drawable which is defined in res/drawable/list_selector.xml. Again, this is another resource file, so we can access it in XML resources or code like we did with the styles. For this app, I'm using an off white color for the background of the ListView. The cacheColorHint is a setting that tells the list that it'll be drawn on this color background. It helps speed up scroll speeds as well.

res/drawable/list_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- touch down -->
    <item
        android:drawable="@drawable/list_selector_pressed"
        android:state_pressed="true"/>
    <!-- selected -->
    <item
        android:drawable="@drawable/list_selector_selected"
        android:state_selected="true"
        android:state_focused="false"
        android:state_pressed="false"/>
</selector>

This file is a state list drawable. It defines a set of drawables that represent the state of our property; in this case "listSelector". Above, you can see we've set a drawable for "state_pressed" and "state_selected". Each of these is another resource file.

res/drawable/list_selector_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <size android:width="1dip"/>
            <size android:height="1dip"/>
        </shape>
    </item>
</layer-list>

res/drawable/list_selector_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <size android:width="1dip"/>
            <size android:height="1dip"/>
        </shape>
    </item>
</layer-list>

Each item just defines a rectangle shape that's basically 1x1 density independent pixels (dip). This will fill the background of the rows of the ListView. So when you tap the list view row, it will use the drawable that represents the pressed state and fill the background with the drawable white rectangle shape.

So changing list view background colors is easy, it just requires a bunch of files!