Change selected list view item image issue in android

Question

In my application i just using list view for displaying image and text. This is my adapter coding

ArrayAdapter<String> adapter=new ArrayAdapter<String>(MainActivity.this, R.layout.list_item, R.id.name, arrList);

    listProductCategories.setAdapter(adapter);

    listProductCategories.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                int position, long id) {

              ImageView imgview = (ImageView) view.findViewById(R.id.iv_listitem);
                 //And change its background here
                 imgview.setBackgroundResource(R.drawable.fail);

            String name = ((TextView) view.findViewById(R.id.name))
                    .getText().toString();
            Toast.makeText(MainActivity.this, "" + name, 10).show();

        }
    });

This is the screen shot for above coding.

Here i am highlighting the selected list items.But my output displays some of the many list view item image background changed..

Please give me a solution....

<ImageView android:id="@+id/iv_listitem" 
android:layout_width="20dp" 
android:layout_height="20dp" 
android:layout_gravity="center_vertical" 
android:background="@drawable/next_unselect"
android:focusable="false" /> 
<TextView
android:id="@+id/name" 
android:layout_width="match_parent"   
android:layout_height="wrap_content" 
android:layout_gravity="center_vertical"
android:focusable="false" 
android:text="TextView"
android:textColor="#003366" /> 

list item-

  <ImageView android:id="@+id/iv_listitem" android:layout_width="20dp" android:layout_height="20dp" android:layout_gravity="center_vertical" android:background="@drawable/next_unselect" android:focusable="false" />

  <TextView android:id="@+id/name" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:focusable="false" android:text="TextView" android:textColor="#003366" />

Answer 1

I have used a Custom ListView with a Custom Adapter and a ItemsHolder class with getter and setters.

To change

1. Get the position of the item.
2. Change the item at the position.
3. CallnotifyDataSetChanged() on your adapter to refresh listview.

Example:

ItemsHolder ih = hold.get(position);
ih.setImage(decodeImage(R.drawable.appicon));
ih.setName("Changed");
cus.notifyDataSetChanged();

test.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"

tools:context=".MenuActivity" >

<ListView
    android:id="@+id/listView_Menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

</ListView>
</RelativeLayout>

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:id="@+id/imageView_List_Item"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:contentDescription="@string/app_name"
    android:src="@drawable/ic_launcher" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageView_List_Item"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="28dp"
    android:text="TextView" />

</RelativeLayout>

MainActivity.java

public class MainActivity extends Activity {
ArrayList<ItemsHolder> hold= new ArrayList<ItemsHolder>();
CustomAdapter cus;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.test);
    Bitmap[] images = {decodeImage(R.drawable.ic_launcher),decodeImage(R.drawable.ic_launcher)};
    ListView list = (ListView)findViewById(R.id.listView_Menu);
    hold.add(new ItemsHolder(images[0],"image1"));
    hold.add(new ItemsHolder(images[1],"image2"));
     cus = new CustomAdapter(hold);
     list.setAdapter(cus);
     list.setOnItemClickListener(new OnItemClickListener()
     {
         public void onItemClick(AdapterView<?> parent, View
                 view, int position, long id)
         {
                ItemsHolder ih = hold.get(position);
                ih.setImage(decodeImage(R.drawable.appicon));
                ih.setName("Changed");
                cus.notifyDataSetChanged();

         }
     });

}
private Bitmap decodeImage(int res) {
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(),res);               
    return bitmap;      
}
class ItemsHolder
{
    Bitmap image;
    String name;
    public ItemsHolder(Bitmap bitmap, String string) {
        // TODO Auto-generated constructor stub
        image = bitmap;
        name =string;
    }
    public Bitmap getImage() {
        return image;
    }
    public void setImage(Bitmap image) {
        this.image = image;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

}
class CustomAdapter extends BaseAdapter
{

    LayoutInflater inflater;
    ArrayList<ItemsHolder> list;
    public CustomAdapter(ArrayList<ItemsHolder> list)
    {
        this.list=list;
        inflater= LayoutInflater.from(MainActivity.this);

    }
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return list.size();
    }
    @Override
    public Object getItem(int arg0) {
        // TODO Auto-generated method stub
        return arg0;
    }
    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        ViewHolder holder;
        if(convertView==null)
        {
            holder = new ViewHolder();
            convertView = inflater.inflate(R.layout.list_item, null);
            holder.iv= (ImageView) convertView.findViewById(R.id.imageView_List_Item);
            holder.tv = (TextView) convertView.findViewById(R.id.textView1);
            convertView.setTag(holder);
        }
        else {
            holder = (ViewHolder)convertView.getTag();
        }
        ItemsHolder ih = list.get(position);
        holder.iv.setImageBitmap(ih.getImage());
        holder.tv.setText(ih.getName());
        return convertView;
    }

}
class ViewHolder
{
    ImageView iv;
    TextView tv;
}
}

Snaps

Edit:

To your question in the comment

listbkg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" 

        android:drawable="@drawable/appicon" />
    <item  android:state_focused="false" 
        android:drawable="@drawable/ic_launcher" />
</selector>

Then for ImageView in xml

android:background="@drawable/listbkg" 

Answer 2

I could guess what might solve your problem. But first, I strongly recommend you watch this great video presentation from the chief architect of Android's ListView APIs (if you haven't):

http://www.youtube.com/watch?v=wDBM6wVEO70