Selected items in RecyclerView change on scrolling

Question

I have a RecyclerView with each element representing an event. I want to let the user select events by clicking it. Once selected, the event(s) and a report button will be colored:

UI before performing a click: click here.

UI After performing a click: click here.

It's pretty simple and allegedly works; I set an OnClickListener for each ViewHolder which is responsible for coloring the item, and when fired it's triggering another event in the owning activity named onOccurrenceSelected, which is responsible for changing the button's state.

However, when scrolling through the RecyclerView's items, other irrelevant items are colored like their OnClickListener was triggered (though it wasn't), and when scrolling back the selected event is colored as not selected. While this is happening, the only event that's supposed to color the items is not triggered.

Any explanation for such behavior? Thanks!

EDIT: Here are some relevant code from the adapter:

private List<Occurrence> mDataSet;
private Activity activity;

public <OccurrencesActivity extends OnOccurrenceSelectedListener> OccurrencesAdapter(OccurrencesActivity occurrencesActivity, List<Occurrence> occurrences) {
    this.activity = (android.app.Activity) occurrencesActivity;
    mDataSet = occurrences;
}

@Override
public void onBindViewHolder(final ViewHolder holder, final int position) {
    Occurrence instance = mDataSet.get(position);
    ...
    setOnClickListener(holder, instance);
    }

private void setOnClickListener(final ViewHolder holder, final Occurrence occurrence) {
    holder.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (!occurrence.isSelected()) {
                holder.itemView.setBackgroundColor(App.getContext().getResources().getColor(R.color.turquoise));
                holder.titleTextView.setTextColor(App.getContext().getResources().getColor(R.color.white));
                holder.statusTextView.setTextColor(App.getContext().getResources().getColor(R.color.white));
                holder.dateTextView.setTextColor(App.getContext().getResources().getColor(R.color.white));
                holder.timeTextView.setTextColor(App.getContext().getResources().getColor(R.color.white));
            } else {
                holder.itemView.setBackgroundColor(App.getContext().getResources().getColor(R.color.white));
                holder.titleTextView.setTextColor(App.getContext().getResources().getColor(R.color.turquoise));
                holder.statusTextView.setTextColor(App.getContext().getResources().getColor(R.color.grey));
                holder.dateTextView.setTextColor(App.getContext().getResources().getColor(R.color.grey));
                holder.timeTextView.setTextColor(App.getContext().getResources().getColor(R.color.grey));
            }
            occurrence.setSelected(!occurrence.isSelected());

            ((OnOccurrenceSelectedListener)activity).onOccurrenceSelected(mDataSet);
        }
    });
}

Answer 1

Recyclerview always resuse views while scrolling so you have to store selected positions into temporary arraylist and then keep condition check into onBindViewHolder that whether that particular position is already exists in arraylist or not? I updated your adaper. find the below changes with comment

    private List<Occurrence> mDataSet;
private Activity activity;

//Added here temporary ArrayList
private ArrayList<String> mSelectedPosition = new ArrayList<String>;

public <OccurrencesActivity extends OnOccurrenceSelectedListener> OccurrencesAdapter(OccurrencesActivity occurrencesActivity, List<Occurrence> occurrences) {
    this.activity = (android.app.Activity) occurrencesActivity;
    mDataSet = occurrences;
}

@Override
public void onBindViewHolder(final ViewHolder holder, final int position) {


    //Set ViewTag
    holder.itemView.setTag(position);

    //Check everyposition during view binding process
    if(mSelectedPosition.contains(String.valueOf(position))){

     holder.itemView.setBackgroundColor(App.getContext().getResources().getColor(R.color.white));
                holder.titleTextView.setTextColor(App.getContext().getResources().getColor(R.color.turquoise));
                holder.statusTextView.setTextColor(App.getContext().getResources().getColor(R.color.grey));
                holder.dateTextView.setTextColor(App.getContext().getResources().getColor(R.color.grey));
                holder.timeTextView.setTextColor(App.getContext().getResources().getColor(R.color.grey));


     }else{
    holder.itemView.setBackgroundColor(App.getContext().getResources().getColor(R.color.white));
                    holder.titleTextView.setTextColor(App.getContext().getResources().getColor(R.color.turquoise));
                    holder.statusTextView.setTextColor(App.getContext().getResources().getColor(R.color.grey));
                    holder.dateTextView.setTextColor(App.getContext().getResources().getColor(R.color.grey));
                    holder.timeTextView.setTextColor(App.getContext().getResources().getColor(R.color.grey));

      }

    Occurrence instance = mDataSet.get(position);
    ...
    setOnClickListener(holder, instance);
    }

private void setOnClickListener(final ViewHolder holder, final Occurrence occurrence) {
    holder.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

       // Get Position
         int position = (int) view.getTag();

            //Remove SelectedPosition if Already there
              if(mSelectedPosition.contains(position))
                  mSelectedPosition.remove(String.valueOf(position));
               else
                  mSelectedPosition.add(String.valueOf(position));

                notifyDataSetChanged();

               //Not sure about this lines 
                occurrence.setSelected(!occurrence.isSelected());

                ((OnOccurrenceSelectedListener)activity).onOccurrenceSelected(mDataSet);
            }
        });
    }

Answer 2

Its the default behaviour of recyclerview. it will recycle/reuse views which are not in use currently. If you want to save the state which is colored or not. Then save a parameter in your List<Object> per position. and as per position in onBindViewHolder method use that position to change the color.

Answer 3

Try by Setting Tag to your item in onBindViewHolder of Adapter

holder.yourItem.setTag(position);

And then Inside the onClickListener,Just save that position in shared Pref. if it's selected, whenever you set adapter then before setting values just check that is it selected or not based on shared Pref. and perform action for same.

public void onClick(View view) {
    if (!occurrence.isSelected()) {
        //save position in share pref.
    } 
}