Skip to main content

How to create View Pager of Fragment in android

Viewpager are used when we required sliding window page with different content on each page and Viewpager is the recommended and easy to use method in the scenario where you want to show multiple types of the fragment on the same screen and user can change the contain of the page by just swiping on the page or by toching on the tab bar.

Here in this example, I am using Android Studio 2.2 it is latest version at the time I am writing this blog.

So we are good to start our view pager demo. Steps to create the project are as given below.

  • Click on File

  • Move your mouse to new

  • Click  on New Project

  • select min version and a relevant name of your project.

In this demo I taken the name of the project is ViewPagerExample, you can choose your suitable name as required.
If you want you can test your app here just to ensure that everything is fine and your project are configured correctly.

ViewPager layout 

We need to add the view pager layout to our main activity layout, open the activity_main.xml file and modify it as given below.
 <RelativeLayout xmlns:android=""  
android:layout_height="match_parent" />



You can see that we have added out ViewPager in our main layout files. After that, we are here creating three fragments which we will show on each page. Here we are creating a very simple fragment for better understanding and will copy paste the same fragment with three different names and modify the layout files.
 package com.debugandroid.viewpagerexample;  
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1, container, false);
public void onActivityCreated(Bundle savedInstanceState) {

You can see that we have done nothing in this Fragment we just added it and set a layout file fragement1.xml and our onCreateView method returning that layout file. Similarly, we have to create the Fragment2, paste java and file by just copy paste the file. After creating the both file you have to change the R.layout.fragment2 adn fragement3 corresponding to the Fragment name of contain you want to show.
You may getting the error in red color because yet we have not created our fragment layout file. So create the our Fragment1.xml,Fragment2.xml and Fragment3.xml files. Here below giving you example of Fragment1.xml similarly you can create the Fragment2xml and Fragement3.xml.

Create Layout Files for Fragment

So for creating the layout file right click on layout under res folder and select the new and then layout resource file and give the name as fragement1 and click on finish.
After that you have do some modification in this layout file for adding a simple text view inside our fragment. For that modify your fragment1.xml file as given below.
 <?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android=""
android:text="Fragment 1"/>

Similarly you have to create two more fragment layout file or you can just copy paste the same file with the name of fragment2.xml and fragement3.xml and change the contain inside text view. You may need to add the color code as well in your color.xml file for setting the background color of our linear layout.

Create ViewPager Adapter

Next we have to create a view pager adapter witch will inflate and show our different-different fragment as you change the page. For example in this demo Fragment1 will be show on position zero, Fragment2 on position 1 and so on.
 package com.debugandroid.viewpagerexample;  
public class PageAdapter extends FragmentPagerAdapter {
private FragmentManager fm;
public PageAdapter(FragmentManager fm){
public Fragment getItem(int position) {
Fragment fragment=null;
fragment=new Fragment1();
fragment=new Fragment2();
fragment=new Fragment3();
return fragment;
public int getCount() {
return 3;
public int getItemPosition(Object object)

Here two method are important which we are overriding here inside our view pager adapter one is the getItem() and other one is the getCount(). getItem() method will return our fragment on the basis of page position and getCount() give number of item count in our view pager.

Set ViewPager Adapter

Next we have to combined the all stuff together and test our application. So open the file and modify it as given below.
 package com.debugandroid.viewpagerexample;  
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private PageAdapter pageAdapter;
protected void onCreate(Bundle savedInstanceState) {
viewPager= (ViewPager) findViewById(;
pageAdapter=new PageAdapter(getSupportFragmentManager());

You can see that in above code we are declaring two variable viewPager and pageAdapter and simply initializing it.
using above code we initializing our view pager on the basis of viewpager ID that we have set during our view pager declaration in our main layout file. In next line we are initializing our view pager adapter and passing the FragmentManger as argument and lastly we are setting the adapter using setAdapter method.
We are set to test our application now, you click on run and select the emulator or any other connected device. you will get the output as given below.
View Pager Screenshots

You can download the source code from here.


  1. […] note I was showing you this example inside the app which we have created in our last post, you can refer it if you have not gone through the last […]


Post a Comment

Popular posts from this blog

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View. Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android Just go to the android folder and open it in separate windows. We will have the following project structure. Create the Activity Just right-click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project s

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit. What is Retrofit? If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps. Further, you can check the Retrofit Library here . So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website. Prerequisite for using the Retrofit for WordPress Android App Ther

How to Read and Write JSON data in Kotlin with GSON

Kotlin is now official language for Android development and it is well supported in Android Studio. So here in this tutorial, we are going to learn about how to read and write JSON data in Kotlin using GSON. If you would like to learn the java version of this tutorial check out the last tutorial " How to Read and Write JSON data using GSON ". Introduction In this tutorial, we will write two methods. In the first method, we will create a JSON file and in second method we will read the file and print in a text box.  If you like to know more about the basic entity of JSON you can check out Basic JSON entity here . What is JSON? JSON stands for J ava S cript O bject N otation JSON is a lightweight data-interchange format It is "self-describing" and easy to understand JSON is language independent and can we used in any language JSON Syntax Rules Data is in name/value pairs Data is separated by commas Curly braces hold objects Square brackets hold