Free Shipping

Secure Payment

easy returns

24/7 support

  • Home
  • Blog
  • Working with ViewPager using Fragments on Android

Working with ViewPager using Fragments on Android

 July 20  | 0 Comments

ViewPager is one of the widgets of Android and it supports library “android.support.v4.view.ViewPager”.
It is used to slide the screens from left to right or right to left with different pages.

We can implement ViewPager with or without using Fragments. In this example it uses fragments.

Real Time Example: We can see the functionality of ViewPager in many News applications.

Classes & Methods

Classes:
Create a fragment class ScreenSlidePageFragment it returns the layout by overriding onCreateView() method.Create inner classScreenSlidePageAdapter which extends FragmentStatePagerAdapter in your MainActivity. It is a simple pager adapter that shows 5 ScreenSlidePageFragment objects in a sequence.

Methods:
getItem(): It returns the instance of a fragment as new pages.
getCount(): It returns the number of pages.

Example with Code:

  1. Create a new Application AndroidViewPagerExample.
  2. Create two layout file one for main activity and another for a fragment.

Create XML files for Views

fragment_screen_slide_page.xml:
Here it shows the content of a fragment, it contains a TextView inside ScrollView to display the text on it.

<TextView
        style="?android:textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:lineSpacingMultiplier="1.2"
        android:padding="16dp"
        android:text="@string/text" />

Add the text in strings.xml file.

activity_main.xml : In this file, we create a ViewPager and a TextView to show the page number on it.

<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"
        android:background="#00afff" />
    <TextView
        android:id="@+id/number"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|bottom"
        android:textStyle="bold" />

Create the Fragment

ScreenSlidePageFragment.java:
Here we create the fragment class ScreenSlidePageFragment as I discussed above, it extends with Fragment, override the onCreateView() method. Inside this

Add the code to return a view.

ViewGroup rootView = (ViewGroup) inflater.inflate(
	                R.layout.fragment_screen_slide_page, container, false);
	        return rootView;

Create the MainActivity

MainActivity.java: Here create the class MainActivity and extends with FragmentActivity

Initialize :

private ViewPager mPager;
private PagerAdapter mPagerAdapter;
Add the code in onCreate(){..}
Here take the reference of ViewPager and set the PagerAdapter.
mPager = (ViewPager) findViewById(R.id.pager);
mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
mPager.setAdapter(mPagerAdapter);

Create the inner class ScreenSlidePagerAdapter in this activity.

Add the code in for getItem() and getCount() :

@Override
        public Fragment getItem(int position) {
            return new ScreenSlidePageFragment();
        }
      @Override
        public int getCount() {
            return NUM_PAGES;
        }

To handle the device back button implement this:

Add the code in onBackPressed() method:

if (mPager.getCurrentItem() == 0) {
super.onBackPressed();
} else {
//select the previous step.
mPager.setCurrentItem(mPager.getCurrentItem() - 1)
}

To show the page number on the screens:
We have to create an inner class to show the screen position for the user.
Add the code in the same activity.

private class PageListener extends SimpleOnPageChangeListener{
        public void onPageSelected(int position) {
            currentPage = position;
            textNumber.setText("Page :" + currentPage);
    }
}

So, these are the minimum requirements to create ViewPager in your application.

Download Source Code: GitHub

Conclusion

  • This is the basic idea of creating ViewPager in your application.
  • Its use is to swipe the pages or screens. We can customize it more by adding images, etc according to the need for an application.
  • As mentioned an example of News application, we can see the same functionality of ViewPager.
  • Create the ViewPager by using fragments, we can also create the instance of a fragment for different pages.
  • This feature is very popular in Android development.

Hope you find this blog post helpful and keep visiting www.acadgild.com for more updates on the courses.

 

>