Android ViewPager - Show preview of page on left and right

Question

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.

setPageMargin(-100);

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.

Good question! I have recently checked the source and I feel there is no better way if you don't want to modify the src code. Does the `setPageMargin(-100)` work correctly? — Macarse, Apr 11 '12 at 04:28
the GalleryView will do the job better, unless if you are using the ViewPger with fragments. — Ali Alnoaimi, Sep 01 '12 at 09:23
I was able to do this using the gallery view. same as viewpager in any way. don't know why gallery is deprecated — WillingLearner, Nov 03 '12 at 11:07
This question has since been extensively covered in the [post here][1] [1]: http://stackoverflow.com/questions/13914609/viewpager-with-previous-and-next-page-boundaries — Ben Pearson, Feb 23 '14 at 16:50
i am using Vierpager with fragments.So can i used same approach ? — asliyanage, Jan 12 '15 at 08:28
if you want implement with `ViewPager2` then check this answer https://stackoverflow.com/a/58056129/7666442 — AskNilesh, Jan 02 '20 at 09:03

score 217 · Answer 1 · edited Feb 06 '16 at 06:13

217

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

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

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

viewpager.setPageMargin(int);

edited Feb 06 '16 at 06:13

Zeeshan Shabbir

6,095
4
33
72

answered Apr 29 '14 at 05:14

Jiju Induchoodan

4,206
1
20
23

2

Yes I agree with you Jiju Induchoodan.. For more info please refer http://blog.neteril.org/blog/2013/10/14/android-tip-viewpager-with-protruding-children/ and http://stackoverflow.com/questions/13914609/viewpager-with-previous-and-next-page-boundaries – Sripathi May 05 '14 at 10:46
Cool, it's so simple :) Is there possible to resize previews on right and left sizes on switch pages of view pager? For example - if fragment out of focus - it's scale will be ~0.8, but when we drag it to center - scale will increase to 1, and previous fragment from centre view will change scale to 0.8 when going out of screen? – iamthevoid Oct 16 '16 at 10:22
This is working! But when I try to zoom the center layout, its zooming to top and bottom. The left and right is not visible due to the padding. Please see the question https://stackoverflow.com/questions/52710076/android-pinch-to-zoom-layout-inside-a-viewpager-with-padding-left-and-right – Anooj Krishnan G Oct 09 '18 at 17:00

Albert Vila Calvo · Answer 2 · 2019-11-25T12:26:20.663

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

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))
}
viewPager2.setPageTransformer(pageTransformer)

// 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(
    context,
    R.dimen.viewpager_current_item_horizontal_margin
)
viewPager2.addItemDecoration(itemDecoration)

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 =
        context.resources.getDimension(horizontalMarginInDp).toInt()

    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>

Finally add the ViewPager2 to your layout:

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" <-- this!
    app:cardCornerRadius="8dp"
    app:cardUseCompatPadding="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="280dp">

        <!-- ... -->

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

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

Same problem on oreo devices, padding start and end works as expected on other devices but oreo after ViewPager2. PageTransformer resolved the issue, paddings are still same and I had to add `viewpager.setPageTransformer { page, position -> page.translationX = -1 * position }` — zgr, Sep 30 '19 at 07:06
I have to slightly move the view pager's page to get this effect — Muhammad Saqib, Jan 13 '20 at 18:50
never mind, I forgot to add this line `setOffscreenPageLimit(1)` :) — Muhammad Saqib, Jan 13 '20 at 18:52
This is the best solution I ever find. It works perfectly but yes DO NOT FORGOT to set ViewPager2 's Item width, height to MATCH_PARENT. — khushbu, Apr 30 '20 at 21:51
Do you have the source code/Github repo for the GIF you posted? — akubi, Mar 31 '21 at 03:25
@akubi Unfortunately I cannot give you the code because it belongs to a private company. But note that you have all the code you need here. — Albert Vila Calvo, Apr 01 '21 at 17:47
This is the best solution, better than other tutorials i found online. Thanks for providing detailed comments — SilleBille, Oct 07 '21 at 03:36

Rohan Kandwal · Answer 3 · 2015-12-11T06:58:25.100

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
            viewPager.setClipToPadding(false);
            // 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
            viewPager.setPageMargin(20);
        }

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.

android:paddingTop="20dp"
android:paddingBottom="20dp"

This will be the final look of the ViewPager.

score 29 · Answer 4 · answered Aug 09 '17 at 19:37

29

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

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 :)

answered Aug 09 '17 at 19:37

Alexander Bilchuk

1,720
1
11
17

Off topic, because sometimes only pager is needed but Nice to know! Thanks for sharing! – sud007 Nov 27 '17 at 09:36
This is awesome. I already had tons of RecyclerView helper code. Just adding a simple `new PagerSnapHelper().attachToRecyclerView(recyclerView)` and I have page snapping. – Steve Mar 01 '19 at 22:03

score 15 · Answer 5 · answered May 28 '19 at 06:06

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

 android:clipToPadding="false"
 android:paddingLeft="XX"
 android:paddingRight="XX"

For example:

<androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingLeft="30dp"
        android:paddingRight="30dp" />

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

I downvoted. sorry bro. It worked this time!! Upvoted again – shikhar bansal Sep 17 '19 at 12:59 — shikhar bansal, Sep 17 '19 at 12:59

44kksharma · Answer 6 · 2018-02-23T11:44:24.573

9

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);

edited Feb 23 '18 at 11:44

answered Feb 23 '18 at 11:37

44kksharma

2,510
23
28

score 8 · Answer 7 · answered Jul 24 '21 at 14:27

Kotlin + ViewPager2

I am late to the party but the above answers didn't work for me. So I am here to help others who are still looking for the answer.

Your XML:

     <androidx.viewpager2.widget.ViewPager2
     android:id="@+id/newsHomeViewPager"
     android:layout_width="match_parent"
     android:layout_height="wrap_content" />

Your item Layout root view should be like this:

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingStart="@dimen/dp_10"
 xmlns:tools="http://schemas.android.com/tools"
 android:orientation="vertical" />

Your Activity/Fragment:

add this before setting your viewpager adapter

        newsHomeViewPager.apply {
        clipToPadding = false   // allow full width shown with padding
        clipChildren = false    // allow left/right item is not clipped
        offscreenPageLimit = 2  // make sure left/right item is rendered
    }

    //increase this offset to show more of left/right
    val offsetPx =
        resources.getDimension(R.dimen.dp_30).toInt().dpToPx(resources.displayMetrics)
    newsHomeViewPager.setPadding(0, 0, offsetPx, 0)

    //increase this offset to increase distance between 2 items
    val pageMarginPx =
        resources.getDimension(R.dimen.dp_5).toInt().dpToPx(resources.displayMetrics)
    val marginTransformer = MarginPageTransformer(pageMarginPx)
    newsHomeViewPager.setPageTransformer(marginTransformer)

dp to pixel function:

fun Int.dpToPx(displayMetrics: DisplayMetrics): Int = (this * displayMetrics.density).toInt()

General Notes:

I've to show the next page only, so in setPadding method, I've kept 0 for left and offsetPx for right. So add offsetPx to the right side also in the setPadding method if you wanted to show the right-side item too.
I've used dp from the dimension file, you can use your own.

Thank you, happy coding.

score 4 · Answer 8 · answered Feb 07 '19 at 07:28

For those struggling to have this on different screens,

mPager.setClipToPadding(false);
DisplayMetrics displayMetrics = new DisplayMetrics();
self.getWindowManager().getDefaultDisplay().getMetrics(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.
mPager.setPadding(paddingToSet,0,paddingToSet,0);

score 1 · Answer 9 · answered Dec 16 '21 at 09:50

Thanks to the author of this article. It's the best solution I found.

Just create a function eg. in your Helpers class like:

fun ViewPager2.showHorizontalPreview(offsetDpLeft : Int, offsetDpRight : Int, marginBtwItems : Int){
        this.apply {
            clipToPadding = false   // allow full width shown with padding
            clipChildren = false    // allow left/right item is not clipped
            offscreenPageLimit = 2  // make sure left/right item is rendered
        }

        // increase this offset to show more of left/right
        val offsetPxLeft = offsetDpLeft.toPx()
        val offsetPxRight = offsetDpRight.toPx()
        this.setPadding(offsetPxLeft, 0, offsetPxRight, 0)

        // increase this offset to increase distance between 2 items
        val pageMarginPx = marginBtwItems.toPx()
        val marginTransformer = MarginPageTransformer(pageMarginPx)
        this.setPageTransformer(marginTransformer)
    }

and call it like:

mViewPager.showHorizontalPreview(40,40,5)

in your Activity/Fragment

score 0 · Answer 10 · answered Jun 21 '19 at 08:33

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

score 0 · Answer 11 · answered Sep 11 '20 at 15:01

0

 override fun getPageWidth(position: Int): Float {
    return 0.7f
}

Add this in adapter class file, This worked for me

answered Sep 11 '20 at 15:01

Prakash Reddy

843
9
19

score 0 · Answer 12 · answered Jul 16 '21 at 04:05

0

Based on Jiju's answer, if you want to set margin between pages for VIEWPAGER 2, please use the code like this:

viewpager.setPageTransformer(new MarginPageTransformer(14));

answered Jul 16 '21 at 04:05

Tynk Huynk

64
1
6

score 0 · Answer 13 · answered Nov 04 '21 at 19:11

In the XML file you should set paddings like so:

in the fragment:

int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20*2,     getResources().getDisplayMetrics());

and to have it all set, use this

myViewPager.setPageMargin(-margin);

should do the trick :)

score -12 · Answer 14 · edited Nov 05 '12 at 07:29

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) {
        super(fm);
        this.fragments = fragments;
    }
    /* (non-Javadoc)
     * @see android.support.v4.app.FragmentPagerAdapter#getItem(int)
     */
    @Override
    public Fragment getItem(int position) {
        return this.fragments.get(position);
    }

    /* (non-Javadoc)
     * @see android.support.v4.view.PagerAdapter#getCount()
     */
    @Override
    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) {
        super(fm);  
        _context=context;

        }
    @Override
    public Fragment getItem(int position) {
        Fragment f = new Fragment();
        switch(position){
        case 0:
            f=LayoutOne.newInstance(_context);  
            break;
        case 1:
            f=LayoutTwo.newInstance(_context);  
            break;
        }
        return f;
    }
    @Override
    public int getCount() {
        return 2;
    }

}