16

I'm using the new ViewPager-view from the Android compatibility library, and I can't figure out how to get padding between the pages so that when you're swiping between them, there's a visible border.

My ViewPager width is set to fill_parent so it takes up the entire width of the display. I can get this border between the pages by setting android:padding on the ViewPager, but that has the added (unwanted) effect of reducing the visible size of the page when it is fully displayed.

I guess what I need is to introduce a border outside the width of the view somehow, if that even makes sense...

The new Android Market does this the way I'd like, but I just can't figure out how it's accomplished.

Lukas Knuth
  • 25,449
  • 15
  • 83
  • 111
chuz
  • 506
  • 1
  • 4
  • 10

3 Answers3

25

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);
Quint Stoffers
  • 790
  • 8
  • 23
  • i'm using a title page indicator with my viewPager and for some reason it seems when i set a Page Margin, I can no longer click on the header to nav through the pages, i am forced to slide. – topwik Aug 24 '12 at 21:09
  • Have you checked other margins/paddings in your Layout? It could be another view is capturing the touch event. – Quint Stoffers Aug 29 '12 at 10:55
  • oh ya, hmmm. that sounds like promising, what are some tips on de-terming which layout might be grabbing the event? – topwik Aug 29 '12 at 15:02
  • Depending on how complex your layout is trial-and-error will probably be the easiest/fastest way (for instance, move all other elements 100dp down and see if it works then, rinse and repeat until you have the right one). – Quint Stoffers Aug 29 '12 at 17:40
8

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().

chuz
  • 506
  • 1
  • 4
  • 10
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);
sleep
  • 4,855
  • 5
  • 34
  • 51