selected Image button changes its position in recyclerView when scrolling - android-studio

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();
}
}