Exchanging icons in listview items

Question

I am trying to change icon image according to the item data . when pressing the icon, it should switch to other icon and change the item data. everything is going right but when i scroll up or down the new icon image change its place to some other items because i am using list view with adapter. how can i keep the new icons in the pressed items without mixing with other items.

package com.example.sairamkrishna.handymade;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class HandAdapter extends ArrayAdapter<HandClass> {
    private int myColor;

    public HandAdapter(Context context, ArrayList<HandClass> objects, int my_Color) {
        super(context, 0, objects);
        myColor = my_Color;

    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        View myView = convertView;
        final HandClass myData = getItem(position);

        if (myView == null) {
            myView = LayoutInflater.from(getContext()).inflate(
                    R.layout.label_item, parent, false);

        }

        ImageView aImage = (ImageView) myView.findViewById(R.id.itemImage);
        aImage.setImageResource(myData.getClsImage());

        TextView aName = (TextView) myView.findViewById(R.id.itemName);
        aName.setText(myData.getClsName());

        FrameLayout aColor = (FrameLayout) myView.findViewById(R.id.itemColor);
        aColor.setBackgroundColor(myColor);

        final ImageView aAddToBasket = (ImageView) myView.findViewById(R.id.itemAddToBasket);
        aAddToBasket.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                final Boolean aClsToBasket = (Boolean) myData.getClsToBasket();

                if (aClsToBasket) {
                    aAddToBasket.setImageResource(R.drawable.ic_add_circle);
                    myData.setClsToBasket(false);
                    Toast.makeText(getContext(), "Remove from basket"+ position, Toast.LENGTH_SHORT).show();

                } else {
                    // if (!aClsToBasket) {
                    aAddToBasket.setImageResource(R.drawable.ic_remove_circle);
                    myData.setClsToBasket(true);
                    Toast.makeText(getContext(), "Add to basket"+ position, Toast.LENGTH_SHORT).show();
                }
            }
        });

        ImageView aAddToFavorite = (ImageView) myView.findViewById(R.id.itemAddToFavorite);
        aAddToFavorite.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getContext(), "Favorite - List item was clicked at " + position, Toast.LENGTH_SHORT).show();
            }
        });
        return myView;
    }
}

Answer 1

A fundamental concept of ListView and RecyclerView is that you need to "update" the value (in this case, the image) for each portion of the row every time getView() or onBindViewHolder() is called.

For example, every time getView() is called, you're always updating the (text) value of TextView aName. That is, there is always a call to aName.setText().

Right now, the only time you call aAddToBasket.setImageResource() is inside an OnClickListener. Of course, it makes sense to do it here, but you must also update the image outside of the listener.

Add this code right after your ImageView aAddToBasket line:

if ((Boolean) myData.getClsToBasket()) {
    aAddToBasket.setImageResource(R.drawable.ic_remove_circle);
} else {
    aAddToBasket.setImageResource(R.drawable.ic_add_circle);
}

Answer 2

Add this line after icon change.

adapter.notifyDataSetChanged();