How to set padding between ViewPager pages while keeping the page full-width [duplicate]

Answer 1

This would be a bit of work, but you could achieve the effect you want by having a border UI element that you then continue to animate off the screen at the same rate as the swipe is occuring.

E.g. say you are swiping right to left:

1) The page that comes in to view has the extra border element on it's left-hand edge by default.

2) You monitor the swipe by implementing a ViewPager.OnPageChangeListener() with a custom onPageScrolled() method. Compute the velocity of the swipe in here as well.

3) When the incoming page's left hand edge hits the left hand edge of the screen, start animating the border element off the left at the velocity you calculated.

...Thinking more about this, I think the illusion would be more effective if you animated the border element being translated left by it's width throughout the duration of the swipe. It sounds weird, but once you picture it, it will make sense :)

The source for ViewPager is available with the android v4 compatibility libs.

   /**
     * This method will be invoked when the current page is scrolled, either as part
     * of a programmatically initiated smooth scroll or a user initiated touch scroll.
     *
     * @param position Position index of the first page currently being displayed.
     *                 Page position+1 will be visible if positionOffset is nonzero.
     * @param positionOffset Value from [0, 1) indicating the offset from the page at position.
     * @param positionOffsetPixels Value in pixels indicating the offset from position.
     */
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

Answer 2

It seems that more recent releases of the support package (since revision 5) have added support for margins between pages of ViewPager via setPageMargin() and setPageMarginDrawable().

Answer 3

There's currently no way to do that in the XML layout, but you can use the following functions in java:

setPageMargin(int marginPixels)
setPageMarginDrawable(drawable d)
setPageMarginDrawable(int resId)

You'll need to grab the pager from your XML layout first:

ViewPager pager = (ViewPager) findViewById(R.id.pager);