OnPageChangeListener in ViewPager adapter?

Question

I have a regular ViewPager with an adapter:

public class MyDialogFragment extends DialogFragment {

    private ViewPager viewPager;

    private MyViewPagerAdapter myViewPagerAdapter;

    private City city;

    public static MyDialogFragment newInstance() {
        MyDialogFragment fragment = new MyDialogFragment();

        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_layout, container, false);

        viewPager = (ViewPager) v.findViewById(R.id.viewPager);

        city = Parcels.unwrap(getArguments().getParcelable("city"));

        myViewPagerAdapter = new MyViewPagerAdapter(getContext());
        viewPager.setAdapter(myViewPagerAdapter);

        viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                // Page changed
            }
        });

        return v;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    public class MyViewPagerAdapter extends PagerAdapter {

        private Context context;

        private LayoutInflater layoutInflater;

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            layoutInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(R.layout.city_layout, container, false);

            ImageView imageView = (ImageView) view.findViewById(R.id.cityImage);

            Glide.with(context)
                    .load(city.getImage())
                    .into(imageView);
            }

            container.addView(view);

            return view;
        }

        @Override
        public int getCount() {
            return city.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            return view == ((View) obj);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }
}

As you can see, I have a page change listener set on my ViewPager. But I need to be able to notify the adapter when the page has changed so that I can modify the adapter's ImageView. How can I do this?

You should look at android sdk tutorials. You are not understanding the concepts behind adapters. — Mussa, Mar 24 '17 at 11:27
If you are using ViewPager2 in 2021, https://stackoverflow.com/a/66490570/5777189 — BabyishTank, Jul 30 '21 at 03:58

score 0 · Answer 1 · answered Mar 23 '17 at 20:04

0

Add a method to your adapter class

public class MyViewPagerAdapter extends PagerAdapter {

    ...
    public void pageChanged(int position) {
        // Do something
    }
    ...
}

After that in your OnPageChangeListener use that method

@Override
public void onPageSelected(int position) {
    myViewPagerAdapter.pageChanged(position);
}

answered Mar 23 '17 at 20:04

Mussa

1,463
21
25

How do I get the `ImageView` within the adapter so I can modify it? – user7758932 Mar 23 '17 at 20:42

aneurinc · Answer 2 · 2017-03-23T20:32:54.573

One approach is to create a data structure in your adapter to map the pager view to its position. A SparseArray is most efficient:

private SparseArray<View> pageMap = new SparseArray<>();

Then in the adapter's instantiateItem() method, add the view to the SparseArray:

public Object instantiateItem(ViewGroup container, int position) {
    ...
    pageMap.put(position, view);
    ...
}

Now in your OnPageChangeListener you can do the following:

@Override
public void onPageSelected(int position) {
    View view = adapter.getView(pos);
    if (view != null) {
        ImageView iv = (ImageView) view.findViewById(R.id.your_image_view);
        // You now have the image view
    }
}

Make sure you remove views from the SparseArray in the adapter's destroyItem() method:

@Override 
public void destroyItem(ViewGroup container, int position, Object object) {
    pageMap.remove(position);
    ...
}

score 0 · Answer 3 · answered Mar 24 '17 at 11:16

You can use the constructor with imagelist to pass and that automatically called on next page..In your code will be modified like ::: ArrayList imageList=new ArrayList<>();

imageList.add("ImagePath here");
myViewPagerAdapter = new MyViewPagerAdapter(getContext(),imageList);
viewPager.setAdapter(myViewPagerAdapter);

Then your adapter will be like ::

    public class MyViewPagerAdapter extends PagerAdapter {

            private Context context;
            private ArrayList<String> imageList
            private LayoutInflater layoutInflater;

            public MyViewPagerAdapter(Context context,ArrayList<String> imageList) {
                this.context = context;
                this.imageList = imageList;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                layoutInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

                View view = layoutInflater.inflate(R.layout.city_layout, container, false);

                ImageView imageView = (ImageView) view.findViewById(R.id.cityImage);

                Glide.with(context)
                        .load(imageList.get(position))            // This will be changes like 
                        .into(imageView);
                }

                container.addView(view);

                return view;
            }

            @Override
            public int getCount() {
                return city.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object obj) {
                return view == ((View) obj);
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
            }
        }

That done .. After this, there are some suggestion that - please use arraylist while using the viewpager .. Now you just taking the parceble object from bundle.. you can do the same for the arraylist, just receive the arraylist from the same bundle by passing the whole arraylist at once. so you dont need to find the page change event..viewpager will automatically handle that.. Here's How to send & receiving the parceable arraylist

 // while sending the list
        Bundle bundle = new Bundle();
        bundle.putParcelableArrayList("citylist", new ArrayList<City>());

        // while receiving the list
        ArrayList<City> citylist = getIntent().getParcelableArrayListExtra("citylist");

After this just get the all image and add in the imagelist array

       for (int i = 0; i < citylist.size(); i++) {
            imageList.add(citylist.get(i).getImage());
        }

And pass this imageList in

myViewPagerAdapter = new MyViewPagerAdapter(getContext(),imageList);
viewPager.setAdapter(myViewPagerAdapter);

Tell me if needed more assitance.

OnPageChangeListener in ViewPager adapter?

3 Answers3