Multiple pages at once on ViewPager

Question

Is it possible to display two pages at the same time when using ViewPager ? I'm not looking for a border effect, but rather for two full pages at a time.

Thanks in advance.

Answer 1

Refer to the getPageWidth method in the corresponding PagerAdapter . Redefine it and return, for example. 0.8f so that all child pages cover only 80% of the width of the ViewPager.

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

Answer 2

See my more recent answer here: Can a ViewPager have multiple views per page?

I found that an even simpler solution is possible by specifying a negative margin for the ViewPager. I created a MultiViewPager project on GitHub, which you can look at:

https://github.com/Pixplicity/MultiViewPager

Although this question specifically requires a solution without an edge effect, some answers here offer a workaround for CommonsWare, such as the kaw suggestion.

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

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

Then I specified this dimension in my dimens.xml :

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

To compensate for overlapping pages, each page view has the opposite edge:

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

Again in the dimens.xml :

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

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

We applied this in an application for the Dutch newspaper De Telegraaf Krant :

Answer 3

You must override the getPageWidth() method in the viewpager adapter. For example:

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

Try this code in your adapter and then you will understand.

Answer 4

See this blog post . The PagerContainer technique solves my problem.

EDIT:
I found the same answer.
How to transfer from gallery to HorizontalScrollView and ViewPager?

Answer 5

You can solve this problem using getPageWidth in the PagerAdapter class.

Make sure your JAR is up to date . Since previously ViewPager did not support multiple pages at the same time.

public float getPageWidth () {

return 0.4f; (You can select it. For full screen on the page you should give 1f)}

Answer 6

create a layout file: my_layout.xml:

 <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <FrameLayout android:id="@+id/pager_container" android:layout_width="match_parent" android:layout_height="240dp" android:clipChildren="false"> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="200dp" android:clipToPadding="false" android:layout_height="200dp" android:layout_marginLeft="70dp" android:layout_marginRight="70dp" android:layout_gravity="center" /> </FrameLayout> </layout> 

the viewer is about as small as you want your pages to be. With android: clipToPadding = "false" also displays pages outside the pager. But now dragging outside the viewpager has no effect. This can be eliminated by selecting strokes from the pager container and transferring them to the pager:

 MyLayoutBinding binding = DataBindingUtil.<MyLayoutBinding>inflate(layoutInflater, R.layout.my_layout, parent, false) binding.pager.setOffscreenPageLimit(3); binding.pager.setPageMargin(15); binding.pagerContainer.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { return chatCollectionLayoutBinding.pager.onTouchEvent(event); } }); 

Answer 7

This can be specified in the Item Layout for the Viewpager. Suppose you need two pages at a time.

This is the layout of the element (photo_slider_item.xml):

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/photosSliderItem"> <ImageView android:id="@id/photoBox1" style="@style/photoBox"/> <ImageView android:id="@id/photoBox2" style="@style/photoBox"/> </LinearLayout> 

And in your PagerAdapter:

 @Override public View instantiateItem(ViewGroup container, int position){ View sliderItem = LayoutInflater.from(container.getContext()).inflate(photo_slider_item, container, false); ImageView photoBox1 = (ImageView) sliderItem.findViewById(R.id.photoBox1); ImageView photoBox2 = (ImageView) sliderItem.findViewById(R.id.photoBox2); photoBox1.setImageResource(photosIds[position]); if(position < photosIds.length-1){ photoBox2.setImageResource(photosIds[position+1]); } else {photoBox2.setImageResource(photosIds[0]);} container.addView(sliderItem); return sliderItem; } 

Answer 8

I do not think this is possible with the limitations of the View Pager. It allows the user to simultaneously view pages 1. Perhaps you can do something using fragments, as well as have 2 ViewPager fragments nearby and use the buttons to reconcile the page that you want to implement, but the code can become very complicated.

You can try something like ViewFlipper - where you can make a lot more settings (including animation).

Hope this helps.