Android Circular ViewPager

The default ViewPager in Android doesn’t support circular swiping/scrolling, which means you cannot scroll from the last page to the first, or from the first to the last. Here is a workaround to make the ViewPager to be able to go from the last page to the first page when you swipe on the last page. In a nutshell, you add a dummy page on the front and the end of the page list, make A|B|C into C|A|B|C|A. Where the letters represent pages.

1. Set the overScrollMode to nerver on the ViewPager view in the layout file to get rid of the blue wall animation.

android:overScrollMode="never"

2. Add a copy of the last item to position 0 of the list, and add a copy of the first item to the last position of the list. For example, if the original list is A|B|C, it will become C|A|B|C|A. For a list of images to be displayed in the ViewPager, and the list contains a list of image resource ids, would look like this.

int [] imageResourceIds = {R.drawable.car6, R.drawable.car1, R.drawable.car2, R.drawable.car3, R.drawable.car4, R.drawable.car5, R.drawable.car6, R.drawable.car1}; // car6 on 0, and car1 on last for circular scroll purpose

3. Set the initial ViewPager item at position 1 after your ViewPager is initialized with the adapter.

myViewPager.setCurrentItem(1);

4. Here is where the real magic to make the Circular ViewPager happen. With the above setting, we have a ViewPager with list items like this C|A|B|C|A.
For going from the last item to the first item, when the 2nd C goes to the 2nd A on the right, we let the ViewPager do it’s job for us, once the movement is completed, we set the current item to the 1st A.
For going from the first item to the last item, when the 1st A goes to 1st C on the left, again we let the ViewPager do it’s job until the movement is completed, we then set the current item to the 2nd C.

myViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        mCurrentPosition = position; // Declare mCurrentPosition as a global variable to track the current position of the item in the ViewPager 
    }

    @Override
    public void onPageScrollStateChanged(int state) {
		// For going from the first item to the last item, when the 1st A goes to 1st C on the left, again we let the ViewPager do it's job until the movement is completed, we then set the current item to the 2nd C.
    	// Set the current item to the item before the last item if the current position is 0
        if (mCurrentPosition == 0)                  myViewPager.setCurrentItem(lastPageIndex - 1, false); // lastPageIndex is the index of the last item, in this case is pointing to the 2nd A on the list. This variable should be declared and initialzed as a global variable

    	// For going from the last item to the first item, when the 2nd C goes to the 2nd A on the right, we let the ViewPager do it's job for us, once the movement is completed, we set the current item to the 1st A.
        // Set the current item to the second item if the current position is on the last
        if (mCurrentPosition == lastPageIndex)      myViewPager.setCurrentItem(1, false);
    }
});

For a complete Circular ViewPager demo with auto scroll, see here.

Search within Codexpedia

Custom Search

Search the entire web

Custom Search