selected Image button changes its position in recyclerView when scrolling

Question

i have a recyclerview in my MainActivity and i'm showing no of items in list manner through RecyclerView.Adapter. here is my recyclerview_list_items.xml file,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <ImageView
        android:id="@+id/person_photo"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:scaleType="centerCrop"
        android:src="@drawable/rounded_img" />

    <TextView
        android:id="@+id/person_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/btnfollow"
        android:layout_toRightOf="@+id/person_photo"
        android:ellipsize="end"
        android:paddingLeft="10dp"
        android:paddingRight="4dp"
        android:singleLine="true"
        android:text="*********"
        android:textColor="#303030"
        android:textSize="17sp" />

    <ImageButton
        android:id="@+id/btnfollow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="8dp"
        android:layout_marginTop="4dp"
        android:background="@drawable/follow_inactive" />

</RelativeLayout>

and here is my adapter class file,

public class SuggestionListItemAdapter extends RecyclerView.Adapter<SuggestionListItemAdapter.MyViewHolder> {
    private List<MovieData> moviesList;
    Context context;
    private boolean isButtonClicked = false;
    public class MyViewHolder extends RecyclerView.ViewHolder {
        public TextView  person_name;
        ImageView person_photo;
        ImageButton person_follow;
        public MyViewHolder(View view) {
            super(view);
            person_photo = (ImageView) view.findViewById(R.id.person_photo);
            person_name = (TextView) view.findViewById(R.id.person_name);
            person_follow = (ImageButton) view.findViewById(R.id.btnfollow);
        }
    }
    public SuggestionListItemAdapter(Context mContext,List<MovieData> moviesList) {
        this.moviesList = moviesList;
        this.context=mContext;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.recyclerview_list_items, parent, false);

        MyViewHolder viewHolder = new MyViewHolder(v);

        return viewHolder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        MovieData movieData = moviesList.get(position);

        holder.person_name.setText(movieData.getGenre());
        holder.person_photo.setImageResource(movieData.getPhoto());
        holder.person_follow.setOnClickListener(clickListener);
        holder.person_follow.setTag(holder);
    }

        View.OnClickListener clickListener = new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if (v.getId() == R.id.btnfollow) {
                    isButtonClicked = !isButtonClicked; // toggle the boolean flag
                    v.setBackgroundResource(isButtonClicked ? R.drawable.following_img : R.drawable.follow_inactive);
                }

            }
        };


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


}

Clicking on holder.person_follow image button , image drawable bg is changing accordingly what i want but when i am scrolling the page at that time image drawable bg changing its position automatically. for ex. if i select the image button pos=1, after scrolling the page its changes the selected button position.

Answer 1

Instead of placing isButtonClicked in adapter class place it in MovieData modal class.Then make following changes in your adapter class:

public class SuggestionListItemAdapter extends RecyclerView.Adapter<SuggestionListItemAdapter.MyViewHolder> {
private List<MovieData> moviesList;
Context context;

public class MyViewHolder extends RecyclerView.ViewHolder {
    public TextView  person_name;
    ImageView person_photo;
    ImageButton person_follow;
    public MyViewHolder(View view) {
        super(view);
        person_photo = (ImageView) view.findViewById(R.id.person_photo);
        person_name = (TextView) view.findViewById(R.id.person_name);
        person_follow = (ImageButton) view.findViewById(R.id.btnfollow);
    }
}
public SuggestionListItemAdapter(Context mContext,List<MovieData> moviesList) {
    this.moviesList = moviesList;
    this.context=mContext;
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View v = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.recyclerview_list_items, parent, false);

    MyViewHolder viewHolder = new MyViewHolder(v);

    return viewHolder;
}

@Override
public void onBindViewHolder(final MyViewHolder holder, int position) {
    final MovieData movieData = moviesList.get(position);

    holder.person_name.setText(movieData.getGenre());
    holder.person_photo.setImageResource(movieData.getPhoto());
    holder.person_follow.setBackgroundResource(movieData.isButtonClicked() ? R.drawable.following_img : R.drawable.follow_inactive);
    holder.person_follow.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            movieData.setIsButtonClicked(!movieData.isButtonClicked());
            holder.person_follow.setBackgroundResource(movieData.isButtonClicked() ? R.drawable.following_img : R.drawable.follow_inactive);
        }
    });
    holder.person_follow.setTag(holder);
}

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

}