Android Viewpager as Image Slide Gallery

I am using Jake's ViewPageIndicator and want to display Images like a swipe gallery. Any refernce link where i can get started. I have implemented the basic viewpager and now want to implement image viewpaper as below

Is it possible to to achieve using ViewPageIndicator ?

In Jake's ViewPageIndicator he has implemented View pager to display a String array (i.e. ["this","is","a","text"]) which you pass from YourAdapter.java (that extends FragmentPagerAdapter) to the YourFragment.java which returns a View to the viewpager.

In order to display something different, you simply have to change the context type your passing. In this case you want to pass images instead of text, as shown in the sample below:

This is how you setup your Viewpager:

public class PlaceDetailsFragment extends SherlockFragment {
	PlaceSlidesFragmentAdapter mAdapter;
	ViewPager mPager;
	PageIndicator mIndicator;

	public static final String TAG = "detailsFragment";

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

		mAdapter = new PlaceSlidesFragmentAdapter(getActivity()
				.getSupportFragmentManager());

		mPager = (ViewPager) view.findViewById(R.id.pager);
		mPager.setAdapter(mAdapter);

		mIndicator = (CirclePageIndicator) view.findViewById(R.id.indicator);
		mIndicator.setViewPager(mPager);
		((CirclePageIndicator) mIndicator).setSnap(true);

		mIndicator
				.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
					@Override
					public void onPageSelected(int position) {
						Toast.makeText(PlaceDetailsFragment.this.getActivity(),
								"Changed to page " + position,
								Toast.LENGTH_SHORT).show();
					}

					@Override
					public void onPageScrolled(int position,
							float positionOffset, int positionOffsetPixels) {
					}

					@Override
					public void onPageScrollStateChanged(int state) {
					}
				});
		return view;
	}

}

your_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dip" />

</LinearLayout>

YourAdapter.java

public class PlaceSlidesFragmentAdapter extends FragmentPagerAdapter implements
		IconPagerAdapter {

	private int[] Images = new int[] { R.drawable.photo1, R.drawable.photo2,
			R.drawable.photo3, R.drawable.photo4

	};

	protected static final int[] ICONS = new int[] { R.drawable.marker,
			R.drawable.marker, R.drawable.marker, R.drawable.marker };

	private int mCount = Images.length;

	public PlaceSlidesFragmentAdapter(FragmentManager fm) {
		super(fm);
	}

	@Override
	public Fragment getItem(int position) {
		return new PlaceSlideFragment(Images[position]);
	}

	@Override
	public int getCount() {
		return mCount;
	}

	@Override
	public int getIconResId(int index) {
		return ICONS[index % ICONS.length];
	}

	public void setCount(int count) {
		if (count > 0 && count <= 10) {
			mCount = count;
			notifyDataSetChanged();
		}
	}
}

YourFragment.java

// you need to return image instaed of text from here.//

public final class PlaceSlideFragment extends Fragment {
	int imageResourceId;

	public PlaceSlideFragment(int i) {
		imageResourceId = i;
	}

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

	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {

		ImageView image = new ImageView(getActivity());
		image.setImageResource(imageResourceId);

		LinearLayout layout = new LinearLayout(getActivity());
		layout.setLayoutParams(new LayoutParams());

		layout.setGravity(Gravity.CENTER);
		layout.addView(image);

		return layout;
	}
}

You should get a View pager like this from the above code.

I made a library named AndroidImageSlider, you can have a try.

Image Viewer with ViewPager Implementation, check this project https://github.com/chiuki/android-swipe-image-viewer

Refer this discussion also https://stackoverflow.com/questions/11640327/swiping-images-not-layouts-with-viewpager

Just use this https://gist.github.com/8cbe094bb7a783e37ad1 for make surrounding pages visible and http://viewpagerindicator.com/ this, for indicator. That's pretty cool, i'm using it for a gallery.

Hoho.. It should be very easy to use Gallery to implement this, using ViewPager is much harder. But i still encourage to use ViewPager since Gallery really have many problems and is deprecated since android 4.2.

In PagerAdapter there is a method getPageWidth() to control page size, but only by this you cannot achieve your target.

Try to read the following 2 articles for help.

multiple-view-viewpager-options

viewpager-container

you can use custom gallery control.. check this https://github.com/kilaka/ImageViewZoom use galleryTouch class from this..

Hi if your are looking for simple android image sliding with circle indicator you can download the complete code from here http://javaant.com/viewpager-with-circle-indicator-in-android/#.VysQQRV96Hs . please check the live demo which will give the clear idea.

enter code here   public Timer timer;
public TimerTask task;
public ImageView slidingimage;

private int[] IMAGE_IDS = {
        R.drawable.home_banner1, R.drawable.home_banner2, R.drawable.home_banner3
    };

enter code here   @Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_home_screen);
	
	 final Handler mHandler = new Handler();
	 
        // Create runnable for posting
        final Runnable mUpdateResults = new Runnable() {
            public void run() {
 
                AnimateandSlideShow();
 
            }
        };
        int delay = 2000; // delay for 1 sec.
        
        int period = 2000; // repeat every 4 sec.
 
        Timer timer = new Timer();
 
        timer.scheduleAtFixedRate(new TimerTask() {
 
        public void run() {
 
             mHandler.post(mUpdateResults);
 
        }
 
        }, delay, period);
 
enter code here     private void AnimateandSlideShow() {
	 
        slidingimage = (ImageView)findViewById(R.id.banner);
        slidingimage.setImageResource(IMAGE_IDS[currentimageindex%IMAGE_IDS.length]);
 
        currentimageindex++;
 
        Animation rotateimage = AnimationUtils.loadAnimation(this, R.anim.custom_anim);
 
          slidingimage.startAnimation(rotateimage);
 
    }

A great One Image slider : https://github.com/daimajia/AndroidImageSlider Check it