Android: Circular ViewPager

Recently I was building an Android Application and needed a circular ViewPager. That is a ViewPager that will automatically move to the first page when you swipe the last. Apparently there is no Native Support for this, neither could I find any good implementation online.

So here is a simple but effective way to do this.

The idea is basically to apply the functionality to the PagerAdapter you will insert in the ViewPager. What you do is create a huge set of Pages (lets say 10000) and set the current page in the middle.

So here it is:

/**
 * Created by Chris Georgoulis on 8/3/2014.
 */
public class ImageAdapter extends PagerAdapter {

	public static final int PAGER_PAGES = 10000;
	public static final int PAGER_PAGES_MIDDLE = PAGER_PAGES / 2;

	private List drawables;

	public ImageAdapter(List drawables) {
		this.drawables = drawables;
	}

	@Override
	public int getCount() {

		int count;
		if (drawables == null || drawables.isEmpty()) {
			count = 0;
		} else if (drawables.size() == 1) {
			count = 1;
		} else {
			count = PAGER_PAGES;
		}
		return count;
	}

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

	@Override
	public Object instantiateItem(ViewGroup container, int position) {

		View layout = null;

		//get current drawable
		position = position - PAGER_PAGES_MIDDLE;
		int imageNumber = position % drawables.size();

		if (imageNumber == 0) {
			imageNumber = 0;
		} else if (imageNumber < 0) {
			imageNumber += drawables.size();
		}

		Drawable drawable = drawables.get(imageNumber);

		if (container.getContext() != null) {

			LayoutInflater inflater = 
                              (LayoutInflater) container.getContext()
                                                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

			View layout = 
                              mInflater.inflate(R.layout.image_pager_simple, mContainer, false);

		if (layout != null && mContainer.getResources() != null) {
			layout.setBackgroundColor(Color.BLACK);

			ImageView iv = (ImageView) layout.findViewById(R.id.imagePager_imageView);
			iv.setImageDrawable(drawable);
		}

			container.addView(layout, 
                                          ActionBar.LayoutParams.MATCH_PARENT,
                                          ActionBar.LayoutParams.MATCH_PARENT);
		}

		return layout;
	}

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

}

Dont forget to set your currentItem in the ViewPager in the Middle of the number of pages:

Somewhere in your Activity Class you would have a method like this:

private void initViewPager(List list) {

		ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
		ImageAdapter adapter = new ImageAdapter(list);
		viewPager.setAdapter(adapter);
		viewPager.setCurrentItem(ImageAdapter.PAGER_PAGES_MIDDLE);
}

As always any suggestions are more than welcome 🙂

Chris Georgoulis

Summary: - Primary programming language: Java SE (SWING, JDBC), Java EE, (JSF - PrimeFaces, JPA - EclipseLink/Hibernate, EJB, CDI ), - Secondary languages: C/C++, Web Technologies(HTML, XHTML, XML, CSS, JavaScript, jQuery, AngularJS). - Frameworks: Android SDK, Global Sensors Network (GSN), Open Computer Vision (OpenCV). - IDE's: Eclipse, Visual Studio - Other Apps: MS Office, Photoshop, Dreamweaver - Database Design - SQL(MySQL), NoSQL(MongoDB) - Modeling Tools: UML

More Posts