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'.

Answer 4

This can be done so easily, you need to just look at on the position of list item that was clicked by user. A well described complete demo code is as below_

 public class ChangeImageInListDynamically extends Activity {
/**
 * Adapter for your data. 
 */
ImageAdapter adpAR;
ArrayList<String> itemList;
ListView mListView;
ImageAdapter mAdapter;

/**
 * Indicate which item is currently selected.  
 * Its default selected item is '0' e.g., 1st item. 
 */
private int selectedPosition=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    itemList = new ArrayList<String>();
    for (int i = 0; i < 11; i++) {
        itemList.add("Item - "+i);
    }

    mListView = (ListView)findViewById(R.id.data_list);

    //Initialize your adapter
    mAdapter = new ImageAdapter(nChangeImageInListDynamically.this, itemList);

    //set adapter to your list.
    mListView.setAdapter(mAdapter);

    //set list click listener.
    mListView.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> av, View view, int position, long id) {
            //your image that need to change dynamically.
            ImageView imageView = (ImageView) view.findViewById(R.id.select);

            //position of clicked item.  
            selectedPosition=position;

            //change image of respective image.
            imageView.setImageResource(R.drawable.selected);

            //notify your adapter to update your list.  
            adpAR.notifyDataSetChanged();
        }
    });

}

static class ViewHolder {
    TextView title;
    ImageView img;                  
}   

/**
 * Your ImageAdapter.
 */
public class ImageAdapter extends BaseAdapter {

    ArrayList<String> dataList;
    Context context;

    public ImageAdapter(Context context, ArrayList<String> arrayList) {
        this.context = context;
        this.dataList = arrayList;

    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return dataList.size();;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row = convertView;

        final ViewHolder holder;
        Log.d("posiiton ImageAdapater : ",""+position);
        if (row == null) { 
            LayoutInflater inflater = ChangeImageInListDynamically.this.getLayoutInflater();
            row = inflater.inflate(R.layout.listrow, null);

            holder = new ViewHolder();
            holder.title = (TextView) row.findViewById(R.id.text);
            holder.img = (ImageView) row.findViewById(R.id.select);
            row.setTag(holder);
        } else {
            holder = (ViewHolder) row.getTag();
        }

        //set titel text.
        holder.title.setText(dataList.get(position));

        //Change Image of selected item dynamically.
             if(selectedPosition == position) {
                 //Item is selected.
                 holder.img.setImageResource(R.drawable.selected);

             }else{
                 //Other non-selected items.
                 holder.img.setImageResource(R.drawable.dis_selected);

             }

        return row;

    }

 }

}

I hope this will help to all :)

Answer 5

Use

public void setImageResource (int resId);

method of ImageView class.

P.S. My previous answer seems incomplete, here is the whole solution:

ImageView imageView = (ImageView) this.findViewById(R.id.img);
                ((BitmapDrawable)imageView.getDrawable()).getBitmap().recycle();
                imageView.setImageResource(R.drawable.new_image);
                imageView.invalidate();