Android ViewPager Demo

In this post, we will create an auto scroll circular view pager with each page a full screen fragment. We will need an Activity class to host the ViewPager view, a Fragment class for the pages in the ViewPager and a FragmentStatePagerAdapter for managing the fragments in the ViewPager. Besides the java classes, we will also need 2 layout files, one for the Activity class and one for the Fragment class.

1. The layout file for the Fragment class, fragment_viewpager_item.xml. This defines the views in each individual page in the ViewPager.
[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Lucky Number"
android:textSize="24sp"/>
<TextView
android:id="@+id/tv_lucky_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="123"
android:textSize="40sp"/>
</LinearLayout>
[/code]

2. The fragment class, ViewPagerFragment.java, this takes the above layout file and create the pages for the ViewPager.
[code language=”java”]
public class ViewPagerFragment extends Fragment {
public static final String LUCKY_NUMBER = "lucky_number";

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

TextView tvLuckNum = (TextView) v.findViewById(R.id.tv_lucky_number);
int luckyNum = getArguments().getInt(LUCKY_NUMBER, 0);
tvLuckNum.setText(Integer.toString(luckyNum, 10));

return v;
}
}
[/code]

3. The layout file for the activity class, activity_viewpager.xml. This defines the activity view. In this case, it’s just a ViewPager inside a RelativeLayout.
[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/vp_auto_scroll_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"/>
</RelativeLayout>
[/code]

4. The FragmentStatePagerAdapter class, ViewPagerAdapter.java. This manages the pages in the ViewPagers. It gets the corresponding fragment for the active pages in the ViewPager. For example, when the page in the ViewPager is swiped, it gets the next Fragment and show it on the screen.
[code language=”java”]
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
private int[] mLuckyNumbers;

public ViewPagerAdapter(FragmentManager fm, int[] luckyNumbers) {
super(fm);
this.mLuckyNumbers = luckyNumbers;
}

@Override
public Fragment getItem(int position) {
Bundle bundle = new Bundle();
bundle.putInt(ViewPagerFragment.LUCKY_NUMBER, mLuckyNumbers[position]);
ViewPagerFragment frag = new ViewPagerFragment();
frag.setArguments(bundle);

return frag;
}

@Override
public int getCount() {
return (mLuckyNumbers == null) ? 0: mLuckyNumbers.length;
}
}
[/code]

5. Lastly, the activity class, MainActivity.java. This manages everything in this demo ViewPager app. For demonstration purpose, the data is just a list of 3 numbers, 111, 222, and 333.
[code language=”java”]
public class MainActivity extends AppCompatActivity {

private ViewPager vpAutoScrollViewPager;
private int mCurrentPosition = 1;
private int[] luckyNumbers = {333,111,222,333,111}; // 333,111 at the beginning and the end for circular swipe purpose
private int lastPageIndex = luckyNumbers.length – 1;
private Handler autoScrollHandler;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_viewpager);

initViewPager();
initAutoScroll();
}

private void initViewPager() {
vpAutoScrollViewPager = (ViewPager) findViewById(R.id.vp_auto_scroll_view_pager);
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), luckyNumbers);
vpAutoScrollViewPager.setAdapter(viewPagerAdapter);
vpAutoScrollViewPager.setCurrentItem(1);
vpAutoScrollViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}

@Override
public void onPageSelected(int position) {
mCurrentPosition = position; // Declare mCurrentPosition as a global variable to track the current position of the item in the ViewPager
}

@Override
public void onPageScrollStateChanged(int state) {
// For going from the first item to the last item, Set the current item to the item before the last item if the current position is 0
if (mCurrentPosition == 0)
vpAutoScrollViewPager.setCurrentItem(lastPageIndex – 1, false); // lastPageIndex is the index of the last item, in this case is pointing to the 2nd A on the list. This variable should be declared and initialzed as a global variable

// For going from the last item to the first item, Set the current item to the second item if the current position is on the last
if (mCurrentPosition == lastPageIndex)
vpAutoScrollViewPager.setCurrentItem(1, false);
}
});

// reset the slider when the ViewPager is scrolled manually to prevent the quick slide after it is scrolled.
vpAutoScrollViewPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
Log.d("resetAutoScroll", " MotionEvent.ACTION_UP ");
initAutoScroll();
} else {
Log.d("resetAutoScroll", " MotionEvent>" + event.getAction());
if (autoScrollHandler != null) {
autoScrollHandler.removeCallbacksAndMessages(null);
autoScrollHandler = null;
}
}
return false;
}
});

}

// Handler to make the view pager to scroll automatically
private void initAutoScroll() {
final int nCount = luckyNumbers.length;
try {
if (autoScrollHandler == null) autoScrollHandler = new Handler();
autoScrollHandler.postDelayed(new Runnable() {
@Override
public void run() {
int curPos = vpAutoScrollViewPager.getCurrentItem();
curPos++;
if (curPos == nCount) curPos = 0;
vpAutoScrollViewPager.setCurrentItem(curPos, true);
autoScrollHandler.postDelayed(this, 3000); // 3 seconds
}
}, 3000);

} catch (Exception e) {
Log.d("MainActivity", e.getMessage());
}
}

@Override
protected void onDestroy() {
super.onDestroy();
if (autoScrollHandler != null) autoScrollHandler.removeCallbacksAndMessages(null);
}
}
[/code]