ViewPager with previous and next page boundaries

E

8

150

I'm designing a view with multiple pages. I want edges of previous and next pages to be show like below and implement a 2 finger swipe to switch between pages.

enter image description here

I tried using ViewPager with negative page margin as suggested here but that only shows one of the edges on the screen, not both simultaneously.

Alternatively, is there any way i can position part of my view outside screen and then animate it giving it a ViewPager type effect.

How should I go about it ? Thanks !

Embracery answered 17/12, 2012 at 12:55 Comment(1)

"only shows one of the edges on the screen, not both simultaneously." Are you on page 0 and you only see part of page 1? Perhaps you need to use a circular pager, example and then set your page always to the "middle" position. See this post and the comment : https://mcmap.net/q/112094/-viewpager-as-a-circular-queue-wrapping – Rotgut 20/12, 2012 at 20:29

B

102

Quoting myself from a blog post on this subject:

The third approach comes from Dave Smith, co-author of the well-regarded book Android Recipes. He went in a very different direction, using a custom container that disabled children clipping to show more than one page at a time.

His published sample code shows the whole thing in action. His container (com.example.pagercontainer.PagerContainer) wraps the ViewPager and calls setClipChildren(false); on itself, so even though the ViewPager is focused on one selected page, other pages that have coordinates beyond the ViewPager bounds are still visible, so long as they fit within the PagerContainer. By sizing the ViewPager to be smaller than the PagerContainer, the ViewPager can size its pages to that size, leaving room for other pages to be seen. PagerContainer, though, needs to help out a bit with touch events, as ViewPager will only handle swipe events on its own visible bounds, ignoring any pages visible to the sides.

enter image description here

Bruton answered 21/12, 2012 at 20:29 Comment(24)

by using this,I am able to show part of previous and next page as shown in image above,but now I don't want to show sharp edges on images.I want them to blur towards edges..please guide me on how can i use z-index for achieving the same – Cowboy 11/6, 2013 at 14:41

@Cowboy - just add an overlay image with the effect you want – Aluminiferous 8/10, 2013 at 15:20

am try this example it works perfectly in emulator but not work in Samsung real device.it overlaps the images. – Randirandie 31/3, 2014 at 9:55

I do the same but it disables the over-scroll effect for the last item. Any leads on that ? – Unrivaled 7/5, 2014 at 13:40

@Swayam: I actually haven't used Dave's technique much. I tend to go with the getPageWidth() solution (see option #1), which still supports overscroll. – Bruton 7/5, 2014 at 13:51

Thanks for your prompt reply sir! I am yet to try the solution out! But until now, what I have been experiencing is that as soon as give padding to the Pager, the last page doesn't have the overscroll effect. Funnily though, the first one still has overscroll. Would you have any idea? – Unrivaled 7/5, 2014 at 14:6

@Swayam: As I noted, I haven't used Dave's technique much, and so I have no idea how it behaves with respect to overscroll. – Bruton 7/5, 2014 at 14:12

@Bruton : Sir, I tried your solution! It worked pretty well. The overscroll is there. Only problem now is that the next card shows, but not the previous card. That is, if I am on page 2, I can see page 3 peeking out, but not page 1. Where could I have been going wrong? – Unrivaled 8/5, 2014 at 4:40

@Swayam: You aren't "going wrong". That is how the first technique works. – Bruton 8/5, 2014 at 11:8

So, what do I have to do to preserve the overscroll and also show both the previous and next page ? – Unrivaled 8/5, 2014 at 11:9

@Swayam: I have no idea. – Bruton 8/5, 2014 at 11:12

No problem sir. I will figure something from your blogpost. Thanks for all the help. :) – Unrivaled 8/5, 2014 at 11:13

@Bruton your solution work pretty well..is there way to make left/right side view semi transparent and then gradually start visibility as it start to come in centre. Please suggest. – Stuart 9/12, 2014 at 10:22

Beware that this solution calls setOnPageChangeListener(...). There can only be one page change listener for a viewpager. Therefore you need to add code to relay the listener through the container otherwise you get weird artifiacts due to redraw problems. – Esteresterase 19/12, 2014 at 22:34

This doesn't work for first time when using custom page transformers. After a bit of scrolling, it works. Any suggestions please? – Fear 11/11, 2015 at 14:3

Is there a way to make the next item and the preview item blurred, then when on focus remove the blur ? – Peaked 21/7, 2016 at 6:42

@MrG: You could overlay the ViewPager with something that applies the blur on the sides. There are probably better solutions; you may want to ask a separate Stack Overflow question on this. – Bruton 21/7, 2016 at 13:8

@Bruton i tried that demo..but the issue is that i am not able to get my last item position. – Gothart 6/1, 2017 at 6:24

@Bruton it works as expected but it remove corner radius of CardView? any help to fix this please? – Garfield 19/6, 2019 at 7:30

@ThinkTwiceCodeOnce: This question does not appear to have anything to do with CardView. You should be able to call setRadius() on a CardView to change its radius. If you have further concerns in this area, and you are not finding any existing questions that cover it, ask a fresh question. – Bruton 19/6, 2019 at 11:1

How can we make the off screen items respond to click events. – Weig 25/8, 2021 at 5:52

@oziomajnr: You would do it the same way as you would anything else in a ViewPager: add click listeners to the widgets. However, for items that are fully off-screen, the user has no visible pixels of those widgets to click. – Bruton 25/8, 2021 at 10:29

I have tried setting on click listeners to the off screen elements but because they are drawn outside the parent, they do not respond to click events. – Weig 25/8, 2021 at 10:37

@oziomajnr: You might try switching to ViewPager2, as ViewPager itself largely is deprecated. Beyond that, consider asking a separate Stack Overflow question with a minimal reproducible example demonstrating what you are trying and explaining in detail what you are seeing. – Bruton 25/8, 2021 at 10:43

D

118

I have a similar solution:

On the viewpager set left and right padding, e.g. 20dp. Do also set the page margin on the viewpager, e.g. half of the pager padding. And do not forget to disable clip padding.

tilePager.setPadding(defaultGap, 0, defaultGap, 0);
tilePager.setClipToPadding(false);
tilePager.setPageMargin(halfGap);

Detrital answered 26/5, 2014 at 12:37 Comment(5)

Good solution provided. – Dally 15/10, 2015 at 9:10

easiest and best way – Fabi 30/1, 2017 at 12:3

This is the beast yes beast answer for consider naming values xd – Nitroparaffin 8/9, 2018 at 9:38

side note: this wont work with a custom view pager transformer – Bichromate 28/9, 2018 at 20:21

@Bichromate any solution for transformer ? – Helenhelena 30/1, 2019 at 7:50