Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple pages at the same time on a ViewPager

Is there a possibility to display two pages at the same time, when using a ViewPager? I'm not looking for an edge effect, but rather for two full pages at the same time.

like image 632
Kirill Rakhman Avatar asked Jan 12 '12 14:01

Kirill Rakhman


People also ask

Is ViewPager deprecated?

This function is deprecated.

What is difference between ViewPager and ViewPager2?

ViewPager2 is an improved version of the ViewPager library that offers enhanced functionality and addresses common difficulties with using ViewPager . If your app already uses ViewPager , read this page to learn more about migrating to ViewPager2 .

How do I turn off swipe in ViewPager?

To enable / disable the swiping, just overide two methods: onTouchEvent and onInterceptTouchEvent . Both will return "false" if the paging was disabled. You just need to call the setPagingEnabled method with false and users won't be able to swipe to paginate.

When should I use ViewPager?

ViewPager in Android is a class that allows the user to flip left and right through pages of data. This class provides the functionality to flip pages in app. It is a widget found in the support library. To use it you'll have to put the element inside your XML layout file that'll contain multiple child views.


2 Answers

Please have a look at the getPageWidth Method in the corresponding PagerAdapter. Override it and return e.g. 0.8f to have all child pages span only 80% of the ViewPager's width.

More info: http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#getPageWidth(int)

like image 146
Markus Wörz Avatar answered Sep 18 '22 10:09

Markus Wörz


See my more up-to-date answer here: Can ViewPager have multiple views in per page?

I discovered that a perhaps even simpler solution through specifying a negative margin for the ViewPager. I've created the MultiViewPager project on GitHub, which you may want to take a look at:

https://github.com/Pixplicity/MultiViewPager

Although this question specifically asks for a solution without edge effect, some answers here propose the workaround by CommonsWare, such as the suggestion by kaw.

There are various problems with touch handling and hardware acceleration with that particular solution. A simpler and more elegant solution, in my opinion, is to specify a negative margin for the ViewPager:

ViewPager.setPageMargin(     getResources().getDimensionPixelOffset(R.dimen.viewpager_margin)); 

I then specified this dimension in my dimens.xml:

<dimen name="viewpager_margin">-64dp</dimen> 

To compensate for overlapping pages, each page's content view has the opposite margin:

android:layout_marginLeft="@dimen/viewpager_margin_fix" android:layout_marginRight="@dimen/viewpager_margin_fix" 

Again in dimens.xml:

<dimen name="viewpager_margin_fix">32dp</dimen> 

(Note that the viewpager_margin_fix dimension is half that of the absolute viewpager_margin dimension.)

We implemented this in the Dutch newspaper app De Telegraaf Krant:

Phone example in De Telegraaf KrantTablet example

like image 38
Paul Lammertsma Avatar answered Sep 18 '22 10:09

Paul Lammertsma