Multiple pages at the same time on a ViewPager

Question

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

Answer 1

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)

Answer 2

You have to override the getPageWidth() method on the viewpager's Adapter. For Example:

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

Try that code in your Adapter and then you'll understand.

Answer 3

See that blog entry.
PagerContainer technique is solved my problem.

EDIT:
I found same answer.
How to migrate from Gallery to HorizontalScrollView & ViewPager?

Answer 4

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

Be sure about whether your JAR is up-to-date.Since previously ViewPager was not supporting multiple pages at the same time.

public float getPageWidth(){

return 0.4f;(You can choose it .For full screen per page you should give 1f) }

Answer 5

It can be don in the Item Layout of the Viewpager. Assume that, you want two pages at a time.

This is the Item Layout (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;
}

Edited version for more than two items

if you want more than two items, first add your items to the LinearLayout then use following algorithm:

photoBox1.setImageResource(photosIds[position]);
if(position < photosIds.length-i-1){
   photoBox2.setImageResource(photosIds[position+1]);
   photoBox3.setImageResource(photosIds[position+2]);
   .
   .
   .
   photoBox(i).setImageResource(photosIds[position+i-1]);
} else if(position < photosIds.length-i-2){
   photoBox2.setImageResource(photosIds[position+1]);
   photoBox3.setImageResource(photosIds[position+2]);
   .
   .
   .
   photoBox(i-1).setImageResource(photosIds[position+i-2]);
   photoBox(i).setImageResource(photosIds[0]);
} . . . else if(position < photosIds.length-1){
   photoBox2.setImageResource(photosIds[position+1]);
   photoBox3.setImageResource(photosIds[0]);
   photoBox4.setImageResource(photosIds[1]);
   .
   .
   .
   photoBox(i-1).setImageResource(photosIds[i-2-2]);
   photoBox(i).setImageResource(photosIds[i-2-1]);
} else {
    photoBox2.setImageResource(photosIds[0]);
    photoBox3.setImageResource(photosIds[1]);
    .
    .
    .
    photoBox(i-1).setImageResource(photosIds[i-1-2]);
    photoBox(i).setImageResource(photosIds[i-1-1]);
}

i : number of your items

[i-2-2] : number 2 in the middle is number of items in the last page of the viewpager.

Answer 6

create your 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 viewpager is about as small as you want your pages to be. With android:clipToPadding="false" the pages outside the pager are visible as well. But now dragging outside the viewpager has no effect This can be remedied by picking touches from the pager-container and passing them on 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);
      }
 });