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

Kotlin Parcelable Array Objects Send To Activity

We know that IPC (Inter Process Communication) between the activity is an extremely important part of any application development. We often required that we need to send some data to other activity. For example, we may be required to send an array of data, data could be an Integer, String, Long, Double, Float or any other custom data objects. So, In this example, we are going to learn how to implement the Kotlin Parcelable Array object to send the data from one activity to second activity. What is Parcel? The parcel class is designed as a high-performance IPC transport. A Parcel can contain both flattened data that will be unflattened on the other side of the IPC, and references to live IBinde r objects that will result in the other side receiving a proxy IBinder connected with the original IBinder in the Parcel. Create Kotlin Parcelable Array Objects Parcelable is API for placing the arbitrary objects into the Parcel. In Actual in android app development, Parcelable is an interface

Scan and List All Available WiFi Network In Android

In this tutorial, we learn how to connect to a WiFi hotspot in android by code. In this Demo we will create an as small app which will scan the all available network or Hotspot and list down the network when you select specific network, the application will connect that particular network. You May Like Below Topic: How to Read and Write JSON data using GSON WP Android App using REST and volley WP Android App using REST and volley part2 Implementation of SwipeRefreshLayout in RecyclerView Create Amazing Bottom Navigation Bar Without Any External Library Introduction In this tutorial, we learn how to connect to a WiFi hotspot in android by code. In this Demo we will create an as small app which will scan the all available network or Hotspot and list down the network when you select specific network, the application will connect that particular network. We will add this functionality to our existing Demo app " Video Gallery ". If you would like to check out t