Android Viewpager as Image Slide Gallery
Solution 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.
Solution 2
I made a library named AndroidImageSlider, you can have a try.
Solution 3
Image Viewer with ViewPager Implementation, check this project https://github.com/chiuki/android-swipe-image-viewer
Refer this discussion also Swiping images (not layouts) with viewpager
Solution 4
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.
Solution 5
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.
Harsha M V
I turn ideas into companies. Specifically, I like to solve big problems that can positively impact millions of people through software. I am currently focusing all of my time on my company, Skreem, where we are disrupting the ways marketers can leverage micro-influencers to tell the Brand’s stories to their audience. People do not buy goods and services. They buy relations, stories, and magic. Introducing technology with the power of human voice to maximize your brand communication. Follow me on Twitter: @harshamv You can contact me at -- harsha [at] skreem [dot] io
Updated on March 01, 2020Comments
-
Harsha M V about 4 years
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 ?