How do I set a background image for each item of ListView in Android?

android, java, listview, templates

Solution

If you want to have individual backgrounds for each list item, you must declare your own custom Adapter.

Derive it from BaseAdapter and the most important part to implement is the `getView(int, View, ViewGroup)` method.

You must understand how android re-uses already existing list item view elements when you scroll through a list. That means: at any moment in time, there will be only as many views generated as there can be seen on screen simultaneously.

This optimal strategy of not generating too many views altogether leads to the problem that you will have to set the background for each list item according to their position currenty needed when getView is called. If you would try to set the background statically only when generating the view, it will re-appear again possibly attached to the wrong element.

The `getView` method either brings a "convertView" as its second parameter or not (null). If your method is called with a convertView set to something, that means: "re-use this view for the item required right now".

The technique used here is nicely described within the API demos (section Lists) and there's also a video blog for that.

Here's how it might be done:

public class MyAdapter extends BaseAdapter {

    public View getView(int position, View convertView, ViewGroup parent) {
        // position is the element's id to use
        // convertView is either null -> create a new view for this element!
        //                or not null -> re-use this given view for element!
        // parent is the listview all the elements are in


        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.your_layout, null);

            // here you must do whatever is needed to populate the elements of your
            // list element layout
            ...
        } else {
            // re-use the given convert view

            // here you must set all the elements to the required values
        }

        // your drawable here for this element 
        convertView.setBackground( ... );

        // maybe here's more to do with the view
        return convertView;
    }
}

That's basically it. If there's only a few background drawings I would possibly cache them as well so you don't have to read the resources over and over again!

Have fun!

Problem

Original source