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? Any help is highly appreciated. Thanks

//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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/play" 
android:id="@+id/img"
/> 
<TextView 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:id="@+id/txt"
/>
</LinearLayout>

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<String> 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<T> extends ArrayAdapter<T>
    {
        public MyArrayAdapter(Context context, int resource, int textViewResourceId, List<T> 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<String>(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

Answer 2

    listview.setOnItemClickListener(new AdapterView.OnItemClickListener(){

        public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                long arg3) {
            ImageView imageView=arg1.findViewById(R.id.img);
            imageView.setImageResource(R.drawable.new_image);

        }

    });

Answer 3

I will generate dynamically the listview and then bind to the onclickitem event, in order to do the setimageresource as say by 'Kiril Kirilov'.