ListView adapter with multiple clickable items

Question

I am new to android. I have a listView with

Image1 | Name | Image2 | Layout1 | Image3

When I click on the Image2 , the image of the Image2 should change and the background of the Image1 should change.

The problem I am facing is if there are 3 visible items in the listview , clicking on the 1st item's Image2 changes things even in the 4t item's image. How to resolve this and what approach should be used?

I am posting my code below.

public class RecipeListAdapter extends BaseAdapter{

Context mContext;
ArrayList<CategoryDetails> categoryDetails;
View.OnClickListener clickListener;

public RecipeListAdapter(Context mContext, ArrayList<CategoryDetails> categoryDetails) {
    this.mContext = mContext;
    this.categoryDetails = categoryDetails;
}

@Override
public int getCount() {
    return categoryDetails.size();
}

@Override
public Object getItem(int i) {
    return categoryDetails.get(i);
}

@Override
public long getItemId(int i) {
    return i;
}

@Override
public View getView(final int i, View convertView, ViewGroup viewGroup) {

    ViewHolder holder = null;

    LayoutInflater mInflater = (LayoutInflater) mContext
            .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

    if (convertView == null) {
        convertView = mInflater.inflate(R.layout.main_recycler_layout, null);
        holder = new ViewHolder();
        holder.recipeImage = (ImageView) convertView.findViewById(R.id.recipe_img);
        holder.chowImage = (ImageView) convertView.findViewById(R.id.chow_image);
        holder.recipeText = (TextView) convertView.findViewById(R.id.recipe_txt);
        holder.likeBasket = (TextView) convertView.findViewById(R.id.like_bsk);
        convertView.setTag(holder);
    } else
        holder = (ViewHolder) convertView.getTag();

    holder.recipeText.setText(categoryDetails.get(i).getRecipeName());

    String imageUrl = Constants.BASE_URL + categoryDetails.get(i).getRecipeImage();
    Picasso.with(mContext)
            .load(imageUrl)
            .placeholder(R.drawable.category_default)
            .into(holder.recipeImage);

    holder.likeBasket.setText(categoryDetails.get(i).getBookmarkCount());
    holder.chowImage.setTag(i);


final ViewHolder finalHolder = holder;
    holder.chowImage.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            view.setVisibility(View.GONE);
            finalHolder.likeBasket.setBackgroundColor(Color.parseColor("#000000"));
        }
    });

    return convertView;
}


class ViewHolder{
    ImageView recipeImage;
    ImageView chowImage;
    TextView recipeText;
    TextView likeBasket;
}
}

Answer 1

Without any code I suppose that you are seeing the view 1 recycled in position 4. Since only 3 items are visible on any time...

If this is what it is happening, the problem is your are not initializing your view in your adapter when the "convertView" is not null.

Edit: I bet the problem is in the final ViewHolder finalHolder. Try to use the "convertView" instead and breaking the ViewHolder pattern in this case because you won't have performance problems with this change.

holder.chowImage.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        view.setVisibility(View.GONE);
        convertView.findViewById(R.id.like_bsk).setBackgroundColor(Color.parseColor("#000000"));
    }
});