Home » Android » Android ViewPager – Show preview of page on left and right

Android ViewPager – Show preview of page on left and right

Posted by: admin March 11, 2020 Leave a comment


I’m using Android’s ViewPager. What I want to do is to show a preview of the page on both the left and the right. I’ve seen where I can use a negative pageMargin to show a preview of the right side.


Is there anyway that I can show a preview of the left side aswell? Its basically something similar to the gallery widget that I am looking for.

How to&Answers:

To show preview of left and right pages set the following two values

  1. viewpager.setClipToPadding(false);
  2. viewpager.setPadding(left,0,right,0);

If you need space between two pages in the viewpager then add



The answer by @JijuInduchoodan is perfect and working. However, since I am relatively new to Android, it took me a while to understand & set it properly. So, I am posting this answer for future reference and help anyone else who is in same shoes as me.

if (viewPager == null) 

            // Initializing view pager
            viewPager = (ViewPager) findViewById(R.id.vpLookBook);

            // Disable clip to padding
            // set padding manually, the more you set the padding the more you see of prev & next page
            viewPager.setPadding(40, 0, 40, 0);
            // sets a margin b/w individual pages to ensure that there is a gap b/w them

There’s no need to set any width to the ViewPager's page in the adapter. There no additional code required to see previous & next page in ViewPager. However, if you want to add blank space at the top & bottom of the each page, you can set the following code to ViewPager's child page`s parent layout.


Final ViewPager

This will be the final look of the ViewPager.


In 2017 such behaviour additionally can be easily achieved by using RecyclerView with PagerSnapHelper (added in version 25.1.0 of v7 support library):

enter image description here

Sometime ago I needed such viewpager-like feature and prepared a tiny library:

MetalRecyclerPagerView – you can find all the code along with examples there.

Mainly it consists of a single class file: MetalRecyclerViewPager.java (and two xmls: attrs.xml and ids.xml).

Hope it helps somebody and will save some hours 🙂


Solution with the new ViewPager2

Nowadays you should consider using ViewPager2 which “replaces ViewPager, addressing most of its predecessor’s pain-points”:

  • Based on RecyclerView
  • RTL (right-to-left) layout support
  • Vertical orientation support
  • Reliable Fragment support (including handling changes to the underlying Fragment collection)
  • Dataset change animations (including DiffUtil support)

The result

enter image description here

The code

In your Activity/Fragment, setup the ViewPager2:

// MyRecyclerViewAdapter is an standard RecyclerView.Adapter :)
viewPager2.adapter = MyRecyclerViewAdapter() 

// You need to retain one page on each side so that the next and previous items are visible
viewPager2.offscreenPageLimit = 1

// Add a PageTransformer that translates the next and previous items horizontally
// towards the center of the screen, which makes them visible
val nextItemVisiblePx = resources.getDimension(R.dimen.viewpager_next_item_visible)
val currentItemHorizontalMarginPx = resources.getDimension(R.dimen.viewpager_current_item_horizontal_margin)
val pageTranslationX = nextItemVisiblePx + currentItemHorizontalMarginPx
val pageTransformer = ViewPager2.PageTransformer { page: View, position: Float ->
    page.translationX = -pageTranslationX * position
    // Next line scales the item's height. You can remove it if you don't want this effect
    page.scaleY = 1 - (0.25f * abs(position))
    // If you want a fading effect uncomment the next line:
    // page.alpha = 0.25f + (1 - abs(position))

// The ItemDecoration gives the current (centered) item horizontal margin so that
// it doesn't occupy the whole screen width. Without it the items overlap
val itemDecoration = HorizontalMarginItemDecoration(

Add the HorizontalMarginItemDecoration, which is a trivial ItemDecoration:

 * Adds margin to the left and right sides of the RecyclerView item.
 * Adapted from https://stackoverflow.com/a/27664023/4034572
 * @param horizontalMarginInDp the margin resource, in dp.
class HorizontalMarginItemDecoration(context: Context, @DimenRes horizontalMarginInDp: Int) :
    RecyclerView.ItemDecoration() {

    private val horizontalMarginInPx: Int =

    override fun getItemOffsets(
        outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State
    ) {
        outRect.right = horizontalMarginInPx
        outRect.left = horizontalMarginInPx


Add the dimensions that control how much of the previous/next item is visible, and current item horizontal margin:

<dimen name="viewpager_next_item_visible">26dp</dimen>
<dimen name="viewpager_current_item_horizontal_margin">42dp</dimen>

enter image description here

Finally add the ViewPager2 to your layout:

    android:layout_height="wrap_content" />

One important thing: a ViewPager2 item must have layout_height="match_parent" (otherwise it throws an IllegalStateException), so you should do something like:

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent" <-- this!


        <!-- ... -->



PageTransformer examples

Google has added a guide on ViewPager2 that has 2 PageTransformer implementations that you can use as an inspiration: https://developer.android.com/training/animation/screen-slide-2

About the new ViewPager2


if someone still looking for solution, I had customized the ViewPage to achieve it without using negative margin, find a sample project here https://github.com/44kksharma/Android-ViewPager-Carousel-UI
it should work in most cases but you can still define page margin with
mPager.setPageMargin(margin in pixel);


You can do this in xml file, just use below code:


For example:

        android:paddingRight="30dp" />

Note: If you need space between pages, set padding/margin to child fragments


For those struggling to have this on different screens,

DisplayMetrics displayMetrics = new DisplayMetrics();
int width = displayMetrics.widthPixels;
int paddingToSet = width/4; //set this ratio according to how much of the next and previos screen you want to show.


Note that when setting none zero paddings to a viewpager, the viewpager’s edgeeffect placement is messed up, this is a bug of the viewpager, see here:viewpager edgeeffect bug

You can either disable the edge effect by setting android:overScrollMode="never" to the viewpager, or you can fix the bug with a slightly modified version of the EdgeEffect class:ViewPagerEdgeEffect fix


Use this fragment adapter and class to view the viewpager in left and right scroll.add necessary classes to scroll to view next pages.

package com.rmn.viewpager;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

 * The <code>PagerAdapter</code> serves the fragments when paging.
 * @author mwho
public class PagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;
     * @param fm
     * @param fragments
    public PagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        this.fragments = fragments;
    /* (non-Javadoc)
     * @see android.support.v4.app.FragmentPagerAdapter#getItem(int)
    public Fragment getItem(int position) {
        return this.fragments.get(position);

    /* (non-Javadoc)
     * @see android.support.v4.view.PagerAdapter#getCount()
    public int getCount() {
        return this.fragments.size();

package com.manishkpr.viewpager;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private Context _context;

    public ViewPagerAdapter(Context context, FragmentManager fm) {

    public Fragment getItem(int position) {
        Fragment f = new Fragment();
        case 0:
        case 1:
        return f;
    public int getCount() {
        return 2;