Android: Dynamically change Image in Listview

Question

I have a listview defined by the following xml. I need to toggle the image in the list during runtime when the user clicks on any row. How can I achieve this? A

Answer 1

You can locate the item's img view by calling findViewById on the second parameter (which is the View of the clicked item) within the onItemClick handler:

public void onItemClick(AdapterView parentView, View clickedItemView, int pos, long id)
{
    ImageView imageView = (ImageView) clickedItemView.findViewById(R.id.img);
    // ...
}

EDIT: Be aware that Android reuses list item View objects (also called view recycling), so the toggle state of each item needs to be stored for later use. The toggle state of each item needs to be accessed whenever a list item view is bound to a list item for display.

For example, here is working example of an activity that toggles the image of each item on click:

import java.util.Arrays;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;

public class SO4539968TestCaseActivity extends Activity {
    private static final List ITEM_TEXTS = Arrays.asList(new String[] {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"});

    private boolean[] itemToggled;

    private class MyArrayAdapter extends ArrayAdapter
    {
        public MyArrayAdapter(Context context, int resource, int textViewResourceId, List objects) {
            super(context, resource, textViewResourceId, objects);
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View itemView = super.getView(position, convertView, parent);
            ImageView imageView = (ImageView) itemView.findViewById(R.id.img);
            imageView.setImageResource(itemToggled[position] ? R.drawable.on : R.drawable.off);
            return itemView;
        }
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        itemToggled = new boolean[ITEM_TEXTS.size()];
        Arrays.fill(itemToggled, false);

        ListView listView = (ListView) findViewById(R.id.list_view0);
        listView.setAdapter(new MyArrayAdapter(this, R.layout.list_item, R.id.txt, ITEM_TEXTS));
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView listView, View itemView, int position, long id) {
                itemToggled[position] = ! itemToggled[position];

                ImageView imageView = (ImageView) itemView.findViewById(R.id.img);
                imageView.setImageResource(itemToggled[position] ? R.drawable.on : R.drawable.off);
            }
        });
    }
}

The important parts to study are the onItemClick callback and the override of getView in MyArrayAdapter.

The getView method of the Adapter class is responsible for inflating the item layout. In this example, I call the getView method of the superclass to initially prepare the item view, but then I make sure to appropriately set the resource ID of the item's img view:

imageView.setImageResource(itemToggled[position] ? R.drawable.on : R.drawable.off);

See also: Developing Applications for Android – Gotchas and Quirks