Android Viewpager as Image Slide Gallery

Question

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 ?

Answer 1

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.