Android ViewPager is a widget that allows the user to flip through pages of content, similar to a pager or book. It can be used to display a collection of pages in a linear fashion, or as an aid for navigating between screens in an app. ViewPager is implemented as a subclass of ViewGroup, so it can be used in a layout file just like any other view.
Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!
Create Android ViewPager
To create a ViewPager, add the following to your layout file:
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>Android ViewPager with Pages (PageAdapter)
To populate the ViewPager with pages, you need to create a PagerAdapter. A PagerAdapter is responsible for creating and managing the views that will be displayed in the ViewPager. There are a few different ways to create a PagerAdapter. The simplest way is to create an instance of FragmentPagerAdapter.
To use a FragmentPagerAdapter, you first need to create a layout file for each fragment that you want to display in the ViewPager. Each fragment should use the same layout file, and the layout should contain a ViewPager widget.
In your activity class, create an instance of FragmentPagerAdapter and pass it the layout file for the fragment:
FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager(), R.layout.fragment_page);
viewPager.setAdapter(adapter);If you want to use a custom PagerAdapter, you can create your own class that implements the PagerAdapter interface. Your adapter will need to implement two methods: getItem() and getCount().
The getItem() method returns the Fragment that should be displayed for a given position in the ViewPager, and the getCount() method returns the number of fragments that should be displayed in the ViewPager.
You can also use a PagerTabStrip to navigation between pages in the ViewPager. A PagerTabStrip contains a list of tabs, each of which corresponds to a page in the ViewPager. To add a PagerTabStrip to your layout, add the following XML:
<android.support.v4.view.PagerTabStrip
android:id="@+id/pager_tab_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>In your activity class, add an instance of PagerTabStrip and set it as the tabsProvider for the ViewPager:
viewPager.setTabsProvider(new PagerTabStrip());Populate a ViewPager with fragments
One way to populate a ViewPager is with fragments. Fragments are reusable pieces of UI that can be combined to create more complex layouts. To use fragments in a ViewPager, you need to use the FragmentPagerAdapter class. This adapter class knows how to manage fragments for you and populate the ViewPager with them.
There are a few different ways you can create a FragmentPagerAdapter. One way is to create an instance of the adapter directly and specify the fragments you want it to use. Another way is to use the FragmentManager to create the adapter.
The FragmentManager can be used to get a list of all of the fragments in your app, and then you can use that list to create the adapter.
Once you have created a FragmentPagerAdapter, you need to set it on the ViewPager widget using the setAdapter() method. You can also optionally specify a fragment transition animation using thesetPageTransformer() method. This will cause Android to animate between pages when they are changed.
Here’s an example of how to use a FragmentPagerAdapter in your Android app:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- This layout will be used to display the pages in the ViewPager -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- This view will be used to display the current page in the ViewPager -->
<TextView
android:id="@+id/page_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<!-- This is the fragment that will be displayed on the first page -->
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:name=".MyFragment" />
<!-- This is the fragment that will be displayed on the second page -->
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:name=".AnotherFragment"/>
<!-- This is the fragment that will be displayed on the third page -->
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:name=".YetAnotherFragment"/>
<!-- Android ViewPager code goes here -->In this example, we have a layout file for our ViewPager and three fragments. The first fragment is the one that will be displayed on the first page, the second fragment is the one that will be displayed on the second page, and so on.
To populate the ViewPager, we need to create a FragmentPagerAdapter.
class MyPagerAdapter extends FragmentPagerAdapter {
public List<String> listOfFragmentNames;
public MyPagerAdapter(FragmentManager fm, List<String> fragments) {
super(fm);
listOfFragmentNames = fragments;
}
@Override
public Fragment getItem(int position) {
//return MyFragment.newInstance();
return Fragment.instantiate(context, listOfFragmentNames.get(position));
}
@Override
public CharSequence getPageTitle(int position) {
//return CONTENT[position % CONTENT.length].toUpperCase();
return mEntries.get(position % CONTENT.length).toUpperCase();
}
@Override
public int getCount() {
// return CONTENT.length;
return mEntries.size();
}
@Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
}So you have to define a fragment list (These go to the main FragmentActivity) :
static MyPagerAdapter adapter;and create a list of String of Fragment Names
fragments.add(FirstFragment.class.getName());
fragments.add(SecondFragment.class.getName());
fragments.add(ThirdFragment.class.getName());
//..etc pager = (ViewPager)findViewById(R.id.viewpager);
adapter = new MyPagerAdapter(getSupportFragmentManager(),fragments);
pager.setAdapter(adapter);Here, we are creating a new Adapter instance and passing in our Activity, the layout file for our pages, and a list of fragments. We then set the adapter on our ViewPager widget.
Animate Android ViewPager
Finally, we can optionally specify a fragment transition animation using thesetPageTransformer() method. This will cause Android to animate between pages when they are changed.
viewPager.setPageTransformer(new Fragment2FragmentPagerTransformer());In this code, we are specifying a new Fragment2FragmentPagerTransformer instance as the page transformer. Android will use this transformer to animate between pages when they are changed.
Learn More about Animating views in Android from link here
That’s all there is to using Android ViewPager!
Source: How do I use FragmentPagerAdapter to have tabs with different content? – Stack Overflow
