嗨，我是 android 开发人员中的新手，对 viewpager2 中按钮 onclick 的实现有疑问

Question

In my app, i used viewpager2 where user can swipe and answer questions by clicking button yes/no similar like quizzes. I've tried to set the button onclicklistener where the button on the current page should change color (yes=green,no=red) when clicked. The problem is when i click the button sometimes it will change color and sometimes it's not. When it's not, buttons in back pages also will be affected even though it's not clicked yet. How to make sure only the button in current page will change color when clicked? Is the implementation of button onclick is wrong in my code or what? Ive checked the logcat and there is no error shown.

Here is my MyViewPagerAdapter.java

    public class MyViewPagerAdapter extends RecyclerView.Adapter<MyViewPagerAdapter.MyViewHolder> {

Context context;

int[][] question_matrix = new int[][]{
        //Visual motor
        {R.string.q1,R.string.q1m},
        {R.string.q2,R.string.q2m},
        //Fine motor
        {R.string.q3,R.string.q3m},
        {R.string.q4,R.string.q4m},
        {R.string.q5,R.string.q5m},
        {R.string.q6,R.string.q6m},
        //body posture
        {R.string.q7,R.string.q7m},
        {R.string.q8,R.string.q8m},
        {R.string.q9,R.string.q9m},
        //shoulder stability
        {R.string.q10,R.string.q10m},
        {R.string.q11,R.string.q11m},
        {R.string.q12,R.string.q12m},
        {R.string.q13,R.string.q13m},
        //spatial perception
        {R.string.q14,R.string.q14m},
        {R.string.q15,R.string.q15m},
        //cross mid-line
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q16,R.string.q16m},
        {R.string.q17,R.string.q17m},
        {R.string.q18,R.string.q18m},
        //visual skill
        {R.string.q19,R.string.q19m},
        {R.string.q20,R.string.q20m},

};

public MyViewPagerAdapter(Context context) {
    this.context = context;
}



@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    return new MyViewHolder(LayoutInflater.from(context).inflate(R.layout.item_page,parent,false));
}

@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position)  {

    holder.eQuestion.setText(question_matrix[position][0]);
    holder.mQuestion.setText(question_matrix[position][1]);
    holder.yes.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            holder.yes.setBackgroundColor(Color.GREEN);
            holder.no.setBackgroundColor(Color.LTGRAY);
        }
    });
    holder.no.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            holder.yes.setBackgroundColor(Color.LTGRAY);
            holder.no.setBackgroundColor(Color.RED);
        }
    });



}

@Override
public int getItemCount() {
    return question_matrix.length;
}



public class MyViewHolder extends RecyclerView.ViewHolder {


    TextView eQuestion,mQuestion;
    ConstraintLayout container;
    Button yes,no;
    ImageView img;

    public MyViewHolder(@NonNull View itemView) {
        super(itemView);
        img = itemView.findViewById(R.id.image_desc);
        eQuestion = itemView.findViewById(R.id.eQuestion);
        mQuestion = itemView.findViewById(R.id.mQuestion);
        container = itemView.findViewById(R.id.container);
        yes = itemView.findViewById(R.id.yesBtn);
        no = itemView.findViewById(R.id.noBtn);


    }


}


   }

  

Here is my item_page.xml which is the layout for this:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<ImageView
    android:id="@+id/image_desc"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:layout_centerHorizontal="true"
    android:src="@drawable/ic_q1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.495"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.152" />

<TextView
    android:id="@+id/eQuestion"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/image_desc"
    android:layout_gravity="center"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:text="question"
    android:textAlignment="center"
    android:textColor="@color/black"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/image_desc"
    app:layout_constraintVertical_bias="0.108" />

<TextView
    android:id="@+id/mQuestion"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/eQuestion"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:text="translation"
    android:textAlignment="center"
    android:textColor="#3A3939"
    android:textSize="15sp"
    android:textStyle="italic"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/eQuestion"
    app:layout_constraintVertical_bias="0.061" />

<Button
    android:id="@+id/noBtn"
    android:layout_width="170dp"
    android:layout_height="47dp"
    android:layout_marginStart="16dp"
    android:text="No"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.004"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/mQuestion"
    app:layout_constraintVertical_bias="0.69" />

<Button
    android:id="@+id/yesBtn"
    android:layout_width="170dp"
    android:layout_height="47dp"
    android:layout_marginEnd="16dp"
    android:text="Yes"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/mQuestion"
    app:layout_constraintVertical_bias="0.69" />
   </androidx.constraintlayout.widget.ConstraintLayout>

    

Answer 1

How to make sure only the button in current page will change color when clicked

Because ViewPager2 reuses the layouts when you changed the color of a button in the next page the color of button is the last color that you set. So in the onBindViewHolder you must change the button's color to default:

@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position)  {

    …
    holder.yes.setBackgroundColor(Color.GREEN);
    holder.yes.setBackgroundColor(Color.LTGRAY);
    
    …

}

If you just what to change clicked button color when it clicked you can use a StateListDrawable as it's background

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/yourPressedColor" />
  <item  android:color="@color/yourNormalColor" />
</selector>

Answer 2

So finally I found the answer. It's quite easy actually. Like @mostafa3dmax said. I have to set the default color in onBindViewHolder . For the button color to not reset after changing pages, i just have to set

viewPager2.setOffScreenPageLimit(int value)

As stated in documentation:

Pages within limit pages away from the current page are created and added to the view hierarchy, even though they are not visible on the screen. Pages outside this limit will be removed from the view hierarchy, but the ViewHolders will be recycled as usual by RecyclerView.