android - changing imageview's color in recyclerview?

Question

I am using recyclerview for listify my data, and i have requirement to add any item to user's favourite list, so i am using a png imageview in adapter's view, but whenever i click the imageview to add the item in my favourite list, the color of all images changes. but i want to change just the clicked imageview's color. here is my code.

public class TopTwentyAdapter extends RecyclerView.Adapter<TopTwentyAdapter.mViewHolder> {

private final LayoutInflater mInflater;
private final List<TopTwentyModel> mModels;
private ImageLoader imageLoader;
private String url = "http:";

public TopTwentyAdapter(Context context, List<TopTwentyModel> models) {
    mInflater = LayoutInflater.from(context);
    mModels = models;
}

@Override
public mViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    final View itemView = mInflater.inflate(R.layout.twenty_list, parent, false);


    return new mViewHolder(itemView);
}


@Override
public void onBindViewHolder(final mViewHolder holder, final int position) {
    final TopTwentyModel model = mModels.get(position);
    holder.bind(model);
    holder.frame.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

            TextView textView = (TextView) view.findViewById(R.id.textView24);
            String s = textView.getText().toString();
            int pos = Integer.parseInt(s);
            final TopTwentyModel model = mModels.get(pos);
            Intent intent = new Intent(AppController.getInstance().getApplicationContext(), OfferDetails.class);
            intent.putExtra("id", model.getId());
            intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
            AppController.getInstance().getApplicationContext().startActivity(intent);


        }
    });


}

@Override
public int getItemCount() {
    return mModels.size();
}

public class mViewHolder extends RecyclerView.ViewHolder {


    private final TextView txtViewTitle, subtitle, brandid;
    private final NetworkImageView thumbnail;
    private final RelativeLayout frame;
    private final TextView data;
    private final ImageView clip;
    private ImageLoader imageLoader;
    private CardView cardview;
    //private MaterialRippleLayout  ripple;

    public mViewHolder(View itemView) {
        super(itemView);
        txtViewTitle = (TextView) itemView.findViewById(R.id.txttitle_toptwenty);
        subtitle = (TextView) itemView.findViewById(R.id.sub_title_toptwenty);
        thumbnail = (NetworkImageView) itemView.findViewById(R.id.thumbnail_topwenty);
        frame = (RelativeLayout) itemView.findViewById(R.id.layer);
        brandid = (TextView) itemView.findViewById(R.id.offerid);
        cardview = (CardView) itemView.findViewById(R.id.card_view);
        data = (TextView) itemView.findViewById(R.id.textView24);
        clip = (ImageView) itemView.findViewById(R.id.add_fav);
        Typeface face = Typeface.createFromAsset(AppController.getInstance().getAssets(), "font/trebuc.ttf");
        subtitle.setTypeface(face);
        txtViewTitle.setTypeface(face);
        //ripple=(MaterialRippleLayout)itemView.findViewById(R.id.ripple);

        clip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Resources res = AppController.getInstance().getResources();
                final Drawable drawable = res.getDrawable(R.drawable.ic_clipped_32);
                drawable.setColorFilter(Color.BLACK, PorterDuff.Mode.SRC_ATOP);
                clip.setBackgroundDrawable(drawable);
                notifyItemChanged(getAdapterPosition());

            }
        });
    }

    public void bind(TopTwentyModel model) {

        data.setText(model.getFakeId());

        String hexColor = (String.format("#%06X", (0xFFFFFF & model.getColor())));

        frame.setBackgroundColor(model.getColor());
        subtitle.setText(model.getTitle());
        txtViewTitle.setText(model.getSubtitle());

        if (imageLoader == null)
            imageLoader = AppController.getInstance().getImageLoader();
        String full_Url = "http://" + model.getBrandimage();
        thumbnail.setImageUrl(full_Url, imageLoader);


    }
}

Answer 1

The reason it does not work is simple: You are setting the background to the View directly. NEVER do that. Modify your model and then use one of the notify...() methods to tell the Adapter it should update the View at that position.

The code you posted does not include the whole implementation of the Adapter, but I assume that you set the color in onBindViewHolder() as well? Since you call notifyItemChanged() the model at that position will be rebound and the color you set will be overwritten to the old one.

---

What you should be doing is something like this:

public class ExampleViewHolder extends RecyclerView.ViewHolder {

    private final View mSomeView;

    private ExampleModel mCurrentModel;

    public ExampleViewHolder(View itemView) {
        super(itemView);

        mSomeView = itemView.findViewById(R.id.someView);

        mSomeView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Here we change the background saved in the current model and notify the `Adapter` that the model has changed.
                mCurrentModel.setBackgroundResourceId(R.drawable.someOtherBackground);
                notifyItemChanged(getAdapterPosition());
            }
        });
    }

    public void bind(ExampleModel model) {
        mCurrentModel = model;
        // In the bind method we set the background the appropriate `View`.
        mSomeView.setBackgroundResource(model.getBackgroundResourceId());
    }
}