ViewPager - get a partial view of the next page

Question

I am trying to achieve this in a ViewPager

The first fragment (blue) is displayed and the beginning of the next fragment must be displayed as well, so the user understands he can swipe to switch views. The idea is scroll 20% of the screen programmatically to the left.

Any thoughts are welcome

EDIT: This is exactly what I need to to: the central view needs to overlap both side views

enter image description here

score 47 · Accepted Answer · edited Nov 10 '15 at 16:12

47

You can try adding this to your PageAdapter:

public float getPageWidth(int position) {
    if (position == 0 || position == 2) {
        return 0.8f;
    }
    return 1f;
}

edited Nov 10 '15 at 16:12

Phil

35,852
23
123
164

answered Aug 28 '12 at 10:12

Juozas Kontvainis

9,461
6
55
66

@Juizas:I am also facing the same issueIts working fine.Thank you.But I have number of dynamic views for every view i need to show pre and next page, It shwoing only right side child only. I tried it many ways please help on this issue. Like this https://gist.github.com/devunwired/8cbe094bb7a783e37ad1 but it's taking time to load views – Pinki Apr 25 '13 at 14:08
@Praveena, if getPageWidth() is not working as you need, you may have to look for alternative solution. Maybe use negative value for setPageMargin. Maybe add ViewPager source code to your project and modify it. – Juozas Kontvainis Apr 25 '13 at 14:14

score 15 · Answer 2 · answered Mar 29 '12 at 02:32

15

Try using a negative value for ViewPager.setPageMargin.

answered Mar 29 '12 at 02:32

AdamK

21,199
5
42
58

1

that works but causes the fragments to overlap-- if this is the best fix, then make sure your pages are skinny enough to use it. – edthethird Mar 29 '12 at 02:53
Thanks AdamK, this only partially solves my problem as I need to do a little more than this. I have updated the question, do you have an idea? – znat Mar 29 '12 at 14:10
@zylootino - unfortunately I don't think a standard ViewPager is able to accomplish your updated version. You will need to custom build this yourself by extending ViewPager, which will be a more complicated task. I don't have any immediate suggestions for where to start sorry. – AdamK Mar 29 '12 at 21:02
4

I also set negative value for `ViewPager.setPageMargin`, and also: `mPager.setOffscreenPageLimit(2);` to pre-loading the next page and avoid flicking effects – David May 06 '13 at 22:27

score 13 · Answer 3 · answered Jun 05 '14 at 21:50

13

This function worked better than the answer marked as correct (for me anyway).

@Override
public float getPageWidth(int position) {
    return 0.9f;
}

Just place it in your custom PagerAdapter class.

answered Jun 05 '14 at 21:50

Parampal Pooni

2,958
8
34
40

Refer to the contents of the function - the accepted answer didnt work for me, this one did. – Parampal Pooni Jun 06 '14 at 00:20

score 2 · Answer 4 · answered Mar 04 '16 at 08:33

2

viewpager.setClipToPadding(false);
viewpager.setPageMargin(-50);

answered Mar 04 '16 at 08:33

jjLin

3,281
8
32
55

score 0 · Answer 5 · answered Jan 06 '20 at 15:18

0

@Override
public float getPageWidth(int position) {
    return 0.9f;
}

Use this, this will work perfectly and make sure that your class extended to PagerAdapter

answered Jan 06 '20 at 15:18

Prakash Reddy

944
10
20

ViewPager - get a partial view of the next page

5 Answers5

Linked