ViewPager in Android allows the user to flip left and right through pages of data. In our android ViewPager application we’ll implement a ViewPager that swipes through three views with different images and texts.
Android ViewPager widget is found in the support library and it allows the user to swipe left or right to see an entirely new screen. Today we’re implementing a ViewPager by using Views and PagerAdapter. Though we can implement the same using Fragments too, but we’ll discuss that in a later tutorial. The ViewPager uses a PagerAdapter whose job is to supply views to the MainActivity similar to what a ListAdapter does for a ListView.
The activity_main.xml consists solely of the ViewPager as shown below. activity_main.xml
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
The MainActivity.java is given below. MainActivity.java
package com.journaldev.viewpager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new CustomPagerAdapter(this));
}
}
The role of the MainActivity in the above code is to just reference the ViewPager
and set the CustomPagerAdapter
that extends the PagerAdapter
. Before we discuss the CustomPagerAdapter
class, let’s look into the ModelObject
class. ModelObject.java
package com.journaldev.viewpager;
public enum ModelObject {
RED(R.string.red, R.layout.view_red),
BLUE(R.string.blue, R.layout.view_blue),
GREEN(R.string.green, R.layout.view_green);
private int mTitleResId;
private int mLayoutResId;
ModelObject(int titleResId, int layoutResId) {
mTitleResId = titleResId;
mLayoutResId = layoutResId;
}
public int getTitleResId() {
return mTitleResId;
}
public int getLayoutResId() {
return mLayoutResId;
}
}
The enum above lists all the pages of the ViewPagers. There are three pages with their respective layouts. The layout of a single page is given below. view_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="@android:color/holo_blue_dark"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second View"
android:layout_gravity="center_horizontal"
android:textSize="28sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="@+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Swipe left to\nFirst View"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:minLines="2"
android:id="@+id/textView2"
android:padding="@dimen/activity_horizontal_margin"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Swipe right to\nThird View"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:padding="@dimen/activity_horizontal_margin"
android:minLines="2"
android:id="@+id/textView3"
android:layout_alignTop="@+id/textView2"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
The remaining two pages have similar layouts and are given in the source code of this project. CustomPagerAdapter.java
package com.journaldev.viewpager;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class CustomPagerAdapter extends PagerAdapter {
private Context mContext;
public CustomPagerAdapter(Context context) {
mContext = context;
}
@Override
public Object instantiateItem(ViewGroup collection, int position) {
ModelObject modelObject = ModelObject.values()[position];
LayoutInflater inflater = LayoutInflater.from(mContext);
ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
collection.addView(layout);
return layout;
}
@Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
@Override
public int getCount() {
return ModelObject.values().length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public CharSequence getPageTitle(int position) {
ModelObject customPagerEnum = ModelObject.values()[position];
return mContext.getString(customPagerEnum.getTitleResId());
}
}
isViewFromObject
methodinstantiateItem
methodThe image below shows the app in action. This brings an end to ViewPager in android example tutorial. You can download the Android ViewPager Project from the below link.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
I am making an android book app with java using web view and my pages in html. As I am new to this, I am trying to find out how to slide from one html page to another instead of clicking buttons. please if you know how , set an example because like I said I am new to this. here is a link to the app I made if you want to have a look(its very small for testing purposes, with 3 pages). https://github.com/Philip2021-Gr/book-app-sliding-between-html-files So far no one gave me any reliable answer that refers to a rookie like me in coding nor i find a video tutorial that saws how to do that with html pages that are stored in your assets folder. I hope some one sees this tread and try to help me cause I am struggling for weeks now with this problem.
- Philp
Hi there, thank you for this tutorial. I just have a question how can I assign variables in each activity, for example, let’s say I have an ImageView in the view_blue layout which I want when is clicked does something.
- John
Hi I want write a adapter for use in fragments and sliding image is it possible? Like abase adapter for use sliding images and fragments . Can you please helpe me?
- rezayi
Well this defied everything I thought I knew about these adapters. I have some questions… Why not take the context from the ViewGroup collection? LayoutInflater inflater = LayoutInflater.from(collection.getContext()); Also pardon my ignorance but, I have taken a good solid few hours to try to analyze the code behind the ViewPager and I’ve failed to found even a hint of how this instatntiateItem method works, everything in that code is too disjointed… inheritance after inheritance is a headache. I’m amazed how the devs chose to use the ViewGroup pointers with that collection.addView(layout); method, even tho I personally prefer to do those kinds of things even when not needed, I thought that that was just a bad design decision on my part, but seen it here was a surprise, maybe there is so much asynchronism(?) happening back there they actually need this?? but wouldn’t that make a mismatch between the view added via collection.addView() and the one returned by the instantiateItem?? In theory one could do a mini recycler view inside the instantiate item method by checking if the view at current position is or not null/same as new one (RIGHT!!!), and I tried the whole day yesterday to do this but I failed miserably. After trying to go my own way without success for hours, I did it your way and it works perfectly, so thanks!!
- Juan Andrade
great explanation … my question is how to set curlview in view pager?
- wajeeha
Thank you man, useful sharing…
- Oguzhan
how to change my bg color to swipe my card view in my fragments
- chavda
Its great information. I want to know that if i want to swipe layout just like you mention in your article, I also add the actionbar/tool and have 4 menu item. It is possible i can also swipe same layout with my menu item which are showing at action bar on top. if yes then what code also entered above article and where. Thanks
- Umair
RED(R.string.red, R.layout.view_red), BLUE(R.string.blue, R.layout.view_blue), GREEN(R.string.green, R.layout.view_green); sir i get the R error … its not resolved … its not sloved by rebuild
- dipesh
Thanks for the tutorial. 2 questions: 1) Can this logic be used for Wear? 2) Could the second view contain a button which changes the background of view 1 (for example)? Best regards
- Stefan Meyer