How to Display Image Gallery Using ViewPager in Android

Hi Everyone,

In this Blog Post i am going to brief about, how to display image gallery using ViewPager in android.
Screenshots

What is ViewPager?

Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.

Let’s see how to display image gallery using Viewpager and PagerAdaptor in Android.

Step 1:

Create imageslider.xml in your ‘res/layout’ folder. Then copy and paste the following code.

<android.support.v4.view.viewpager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent">

Step 2:
Create ImageSlider.java in your project’s ‘src’ folder. Then copy and paste the following code.

public class ImageSlider extends Activity {
	int[] imageArray;
	Bundle bundle;
	final TypedArray imageArrayIcon=null;
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.imageslider);
		ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
		ImagePagerAdapter adapter = new ImagePagerAdapter();
		viewPager.setAdapter(adapter);
		//imageArrayIcon = getResources().obtainTypedArray(R.array.imageArray);
	}

	private class ImagePagerAdapter extends PagerAdapter {
		// 
		private int[] mImages = new int[]{R.drawable.image1,R.drawable.image2,R.drawable.image3,R.drawable.image4};

		@Override
		public int getCount() {
			return mImages.length;
		}

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

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			Context context = ImageSlider.this;
			ImageView imageView = new ImageView(context);
			int padding = context.getResources().getDimensionPixelSize(
					R.dimen.padding_medium);
			imageView.setPadding(padding, padding, padding, padding);
			imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
			imageView.setImageResource(mImages[position]);
			
			//imageView.setImageResource(imageArrayIcon.getResourceId(mImages[position], -1));
			((ViewPager) container).addView(imageView, 0);
			return imageView;
		}

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

Step 3:
Now, you have to mention the padding for the images in your dimens.xml file. dimens.xml file will be in res/values/dimens.xml. If you dont have that file create it, and copy and paste the following code.

<resources>
 <dimen name="padding_small">4dp</dimen>
 <dimen name="padding_medium">8dp</dimen>
 <dimen name="padding_large">16dp</dimen>
</resources>

You can also display image from array.xml file using TypedArray
Thats it you got the image gallery. Happy coding