Change image view background of View Pager2 selected image in android

Question

I am trying to changing the background imageview of viewpager2 selected imageview in android. But in my case not changing image view background, when viewpager2 selected. Below code to change image view background.

 final List<Integer> names = new ArrayList<Integer>();
                   for(int i=0;i<5;i++){
                       names.add(i);
                   }
                   insideRoomAdapter = new InsideRoomAdapter(context,names);
                   viewPager.setAdapter(insideRoomAdapter);
viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
                        @Override
                        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                            super.onPageScrolled(position, positionOffset, positionOffsetPixels);
                        }

                        @Override
                        public void onPageSelected(int position) {
                            super.onPageSelected(position);                  
                          for(int i=0;i<names.size();i++){
                              if(names.get(position) == position){
                                  Toast.makeText(context,"pos:"+ names.get(position),Toast.LENGTH_SHORT).show();
                                  insideRoomAdapter.imageView.setBackground(ContextCompat.getDrawable(context,R.drawable.selected_light_bg));
                                  viewPager.getAdapter().notifyDataSetChanged();
                              }else {
                                  insideRoomAdapter.imageView.setBackground(ContextCompat.getDrawable(context,R.drawable.inside_room_item_bg));
                                  viewPager.getAdapter().notifyDataSetChanged();

                              }
                          }

                        }

                        @Override
                        public void onPageScrollStateChanged(int state) {
                            super.onPageScrollStateChanged(state);
                        }
                    });

My Adapter class

public class InsideRoomAdapter extends RecyclerView.Adapter<InsideRoomAdapter.ViewHolder> {
    Context context;
    List<Integer> list;
    ImageView imageView;

    public InsideRoomAdapter(Context context,List<Integer> list) {
        this.context = context;
        this.list = list;
    }


    @NonNull
    @Override
    public InsideRoomAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.inside_room_items,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull InsideRoomAdapter.ViewHolder holder, int position) {
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context,"light clicked",Toast.LENGTH_LONG).show();
            }
        });

    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.inside_light_img);
        }

    }
}

Anyone can guide me how to change image view background, when viewpager2 selected.

Expected like this

Thanks in Advance.

Answer 1

I think you are approaching this in the wrong way. What you need is a public method for your adapter which stores the position selected from your viewpager2's onPageSelected() and in onBindViewHolder() method of your adapter simply use a check for selecting the background to use.

I have made changes to your adapter as below:

public class InsideRoomAdapter extends RecyclerView.Adapter<InsideRoomAdapter.ViewHolder> {
    private Context context;
    private List<Integer> list;
    //moved ImageView to ViewHolder class as private
    private int selectedPosition; //the int value for keeping track of your selected position

    public InsideRoomAdapter(Context context,List<Integer> list) {
        this.context = context;
        this.list = list;
        this.selectedPosition = 0; //initialize it here
    }


    @NonNull
    @Override
    public InsideRoomAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.inside_room_items,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull InsideRoomAdapter.ViewHolder holder, int position) {
        /* Since ImageView was moved reference it from the holder like below
         * Use a simple check to verify it the adapter position matches with the selectedPosition
         * if so simply set the backgrounds as required
         */
        if(position == selectedPosition) {
            holder.imageView.setBackground(ContextCompat.getDrawable(context,R.drawable.selected_light_bg));
        } else {
            holder.imageView.setBackground(ContextCompat.getDrawable(context,R.drawable.inside_room_item_bg));
        }
        holder.imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context,"light clicked",Toast.LENGTH_LONG).show();
            }
        });

    }

    public void setSelectedPosition(int newPosition) {
        this.selectedPosition = newPosition;
        notifyDataSetChanged();
        /* If you require better animations make use of notifyItemChanged() instead
         * save selectedPosition value in a temp variable before swap
         * and call notifyItemChanged() for both positions old and new
         */
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {

        private ImageView imageView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.inside_light_img);
        }

    }
}

And then instead of complicating your code your onPageSelected() should eb something like this

@Override
public void onPageSelected(int position) {
        super.onPageSelected(position);
        insideRoomAdapter.setSelectedPosition(position);
        }

That's all, let us know if this answer helped solve your issue.