Set ImageView color filter from adapter of RecyclerView

Question

I try actually to set the imageView ColorFilter in a class which define the adapter avec the recyclerView. For that, I defined a ImageView ArrayList in my Adapter which stock my imageview from viewholder And I take them with a custom method with position parameter in my adapter too. But it doesn't really work, when I click on my items, the colorfilter is apply radomly on my recyclerviex items :/

This is my code :

The adapter :

package com.ylly.hypred.process.adapter;

/**
 * Created by YLLY on 24/06/2015.
 */
import android.content.ContentResolver;
import android.content.Context;
import android.net.Uri;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;
import com.ylly.hypred.process.recyclerView.ItemDataAtelier;
import com.ylly.hypred.R;
import com.ylly.hypred.custom.MyTextView;

import java.io.File;
import java.util.ArrayList;

public class AtelierAdapter extends RecyclerView.Adapter<AtelierAdapter.ViewHolder> {
    private ArrayList<ItemDataAtelier> itemsData;
    private Context context;

    public AtelierAdapter(ArrayList<ItemDataAtelier> itemsData, Context context) {
        this.itemsData = itemsData;
        this.context = context;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public AtelierAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View itemLayoutView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_layout, null);

        // create ViewHolder

        ViewHolder viewHolder = new ViewHolder(itemLayoutView);
        return viewHolder;
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int position) {

        // - get data from your itemsData at this position
        // - replace the contents of the view with that itemsData

        Uri uri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + context.getPackageName() + "/drawable/" + itemsData.get(position).getDrawable());
        Picasso.with(context).load(R.drawable.hypred_atelier_atelier).into(viewHolder.imgViewIcon);
        viewHolder.nomAtelierTextView.setText(itemsData.get(position).getLabel());

    }

    // inner class to hold a reference to each item of RecyclerView
    public static class ViewHolder extends RecyclerView.ViewHolder {

        public ImageView imgViewIcon;
        public MyTextView nomAtelierTextView;

        public ViewHolder(View itemLayoutView) {
            super(itemLayoutView);
            imgViewIcon = (ImageView) itemLayoutView.findViewById(R.id.item_icon);
            nomAtelierTextView = (MyTextView) itemLayoutView.findViewById(R.id.item_layout_nom_atelier_textView);
        }
    }


    // Return the size of your itemsData (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return itemsData.size();
    }
}

My itemData :

package com.ylly.hypred.process.recyclerView;

import android.graphics.drawable.Drawable;
import android.widget.ImageView;

/**
 * Created by YLLY on 07/07/2015.
 */
public class ItemDataCriteres {

    private String label;
    private int drawable;
    private Boolean isActive;
    private ImageView imageView;

    public void setIsActive(Boolean isActive) {
        this.isActive = isActive;
    }

    public Boolean getIsActive() {

        return isActive;
    }

    public ItemDataCriteres(String label, int drawable){

        this.label = label;

        this.drawable = drawable;
    }

    public void setLabel(String label) {
        this.label = label;
    }

    public String getNomAtelier() {

        return label;
    }

    public void setDrawable(int drawable) {
        this.drawable = drawable;
    }

    public int getDrawable() {

        return drawable;
    }


    public void setImageView(ImageView imageView) {
        this.imageView = imageView;
    }

    public ImageView getImageView() {

        return imageView;
    }

}

And my class where I define my recyclerView and where I change the filter :

final CriteresAdapter criteresAdapter = new CriteresAdapter(itemDataDetailsEtThemes, v.getContext());
recyclerViewCriteresOne.setAdapter(criteresAdapter);

recyclerViewCriteresOne.addOnItemTouchListener(
        new RecyclerItemClickListener(context, new RecyclerItemClickListener.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                if (!criteresAdapter.getCritere(position).getIsActive()) {
                    criteresActifs[0]++;
                    setLancerRechercheTextViewVisibility(v);
                    criteresAdapter.getImageView(position).setColorFilter(v.getResources().getColor(R.color.hypred_gris), PorterDuff.Mode.MULTIPLY);
                    criteresAdapter.getCritere(position).setIsActive(true);
                    criteresAdapter.notifyDataSetChanged();
                } else {
                    criteresActifs[0]--;
                    setLancerRechercheTextViewVisibility(v);
                    criteresAdapter.getImageView(position).clearColorFilter();
                    criteresAdapter.getCritere(position).setIsActive(false);
                    criteresAdapter.notifyDataSetChanged();
                }
            }
        }));

Thanks in advance for your time :)

Answer 1

From the Drawable docs:

By default, all drawables instances loaded from the same resource share a common state; if you modify the state of one instance, all the other instances will receive the same modification.

The answer is to call Drawable.mutate()

A mutable drawable is guaranteed to not share its state with any other drawable.

I would change your ItemTouchListener to something like this:

recyclerViewCriteresOne.addOnItemTouchListener(
    new RecyclerItemClickListener(context, new RecyclerItemClickListener.OnItemClickListener() {
        @Override
        public void onItemClick(View view, int position) {
            Drawable drawable = criteresAdapter.getImageView(position);
            drawable.mutate();
            if (!criteresAdapter.getCritere(position).getIsActive()) {
                criteresActifs[0]++;
                setLancerRechercheTextViewVisibility(v);
                drawable.setColorFilter(v.getResources().getColor(R.color.hypred_gris), PorterDuff.Mode.MULTIPLY);
                criteresAdapter.getCritere(position).setIsActive(true);
                criteresAdapter.notifyDataSetChanged();
            } else {
                criteresActifs[0]--;
                setLancerRechercheTextViewVisibility(v);
                drawable.clearColorFilter();
                criteresAdapter.getCritere(position).setIsActive(false);
                criteresAdapter.notifyDataSetChanged();
            }
        }
    }));