pixplicity/multiviewpager

The MultiViewPager is an extension of the support-v4 library's ViewPager that allows the pages to be wider or narrower than the ViewPager itself. It takes care of aligning the pages next to each other, and always keeping the selected page centered.

MultiViewPager

UPDATE: This behavior is now included in the RecyclerView for support lib 24.2.0 and later. Please look at using LinearSnapHelper.

The MultiViewPager is an extension of the support-v4 library's ViewPager that allows the pages to be wider or narrower than the ViewPager itself. It takes care of aligning the pages next to each other, and always keeping the selected page centered.

Sample

Simply add the MultiViewPager into your layout:

<com.pixplicity.multiviewpager.MultiViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:matchChildWidth="@+id/child_view_to_match" />

Be sure to declare the app namespace:
xmlns:app="http://schemas.android.com/apk/res-auto"

Take note of the custom attribute matchChildWidth. This attribute should match an ID in the ViewPager's first child view. In the sample project, the layout of the pages is:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <FrameLayout
        android:id="@+id/vg_cover"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            android:background="@drawable/bg_page"
            android:scaleType="centerInside"
            android:src="@drawable/im_pixplicity"
            tools:ignore="ContentDescription" />
            
    </FrameLayout>

</RelativeLayout>

The child view with ID @id/vg_cover will determine the width of the page. In this example, the width would be 200dp. In order to get this hooked up, we provide MultiViewPager with the reference to the child, @id/vg_cover:

<com.pixplicity.multiviewpager.MultiViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:matchChildWidth="@+id/vg_cover" />

In this way, it knows to size the pages according to the dimension of that View or ViewGroup.

Download

Download the latest AAR or grab via Maven:

<dependency>
  <groupId>com.pixplicity.multiviewpager</groupId>
  <artifactId>library</artifactId>
  <version>1.0</version>
  <type>aar</type>
</dependency>

or Gradle:

compile 'com.pixplicity.multiviewpager:library:1.0'

License

Licensed under the Apache license.

multiviewpager's Issues

Enhance this feature to be more facebook like interaction.

I have been thinking deep into library and I am trying to make it possible to animate like facebook.

When I tap in the middle picture it will able to zoom into fullscreen. As fullscreen, it takes the width of current selected image in the center and release the bounce to the screen width and the background turns dark. Is that possible achieve this effect?

build failing due to absence of image

There is no image (sample/src/main/res/drawable/im_pixplicity.png) which is causing the build to fail.

Unsusual behaviour with if number of elements more than 5?

If number of elements in the list greater than 5 then Fragment view pager has the wired behavior as last element of the list gets hide on scrolling till end.

Maybe some hard coded values.

Dragging from penultimate page to the last jumps back to the prior in the sample app

Cannot compile the project

If you clone and open the project with Android Studio 3 you get this error message:

Error:Unsupported method: BaseConfig.getApplicationIdSuffix().
The version of Gradle you connect to does not support that method.
To resolve the problem you can change/upgrade the target version of Gradle you connect to.
Alternatively, you can ignore this exception and read other information from the model.

I tried modifying
classpath 'com.android.tools.build:gradle:1.1.3'
to
classpath 'com.android.tools.build:gradle:3.0.0'
but I get another error (Error:The "android" command is no longer included in the SDK. Any references to it (e.g. by third-party plugins) should be removed.)

How to show when you run the second element?

How to show when you run the second element? That is the first on the left (visible part), third to the right (also visible part).

Adding PageTransformer does not work as intended

Hi,
I needed to add custom animation with MultiViewPager but failed the animation doesn't work properly.

setPageMargin() does not work

The margins set on setPageMargin() method are ignored and overrided by MultiViewPager

Gradle integration

Any chance at gradle integration in the future for keeping up to date easily?

Left-alignment of pages

Thanks a million for this awesome library.

I need to make some changes in this library to achieve the following effect:

1. When there is only one item on pager, the item must be centered:
   
2. When there are more than one item, the initial screen should be like this:
   
3. When the user scrolls the pages( items greater than 1), each selected page now will be centered like this:
   

I have achieved such effect by using two kind of layout on PagerAdapter

1. View with layoutCenterInParent

2. Other View having same content as 1 but no layoutCenterInParent

   On PagerAdapter, I have made following changes

//Use this layout to inflate on instantiateItem
private int getLayoutId(int position) {
  int layoutId = getCount() > 1 ? R.layout.item_video :  
                         R.layout.item_video_center;
  return layoutId;
}
//call this method when page changes from 0 to 1 and vice versa
public boolean changeToCenter(int position) {
  if (getCount() > 1) {
    if (position == 0 && layoutId == R.layout.item_video_center) {
        layoutId = R.layout.item_video;
        notifyDataSetChanged();
        return true;
    } else if (layoutId == R.layout.item_video) {
        layoutId = R.layout.item_video_center;
        notifyDataSetChanged();
        return true;
    }
  }
  return false;
}

And on onPageChangeListener on MultiViewPager, I have made following changes

@Override
public void onPageSelected(int i) {
  boolean smoothScroll = ((VideoItemPagerAdapter) adapter).changeToCenter(i);
  if (smoothScroll)
    scrollToPosition(i);
}

private void scrollToPosition(final int i) {
  new Handler().postDelayed(new Runnable() {
    @Override
    public void run() {
      pager.setCurrentItem(i, true);
    }
  }, 0);
}

This logic gives me my desired effect but on page change from 0 to 1 and vice versa the ViewPager stutters, due to layout changes. Further, this process is resource intensive during page change from 0 to 1 and vice versa. So any smart way I can do this. Your logic or hint would be more than enough.

How do I set click listeners on pages?

I have a MultiViewPager in my current app, I have total of 8 items and I am displaying around 5 items at a time.
What I am trying to do is to make the item selected when I click on it.
How can I do that ?
I tried setting click listener on the Fragment's view itself passing position to it's constructor, but that is giving me erratic results. I also tried getting hold of all the view's for all the fragments and setting click listener on those, but that is giving me counts up to 5 only.

Please Help, This is an important feature for my app.

Endless viewpager

Hi,

Thank you for this, it's really great, but is there easy way to make Endless MultiViewPager?

Thanks,
Bojan

multiview pager error

Process: com.example.abc.fragmentsapplication, PID: 8443
java.lang.NullPointerException: MatchWithChildResId did not find that ID in the first fragment of the ViewPager; is that view defined in the child view's layout? Note that MultiViewPager only measures the child for index 0.

Item carousel with percentage width

Hi,
First of all, thank you for your hard work :).
The thing is, I'm currently trying to create a carousel thanks to a ViewPager. I succeed to make a multiviewpager but by using a tricky solution :

root.post(new Runnable() {
            @Override
            public void run() {
                CarouselViewPager carousel = (CarouselViewPager) getActivity().findViewById(R.id.carousel);
                int width = root.getWidth();
                int paddingWidth = (int) (width * 0.22);
                root.setPadding(paddingWidth, 0, paddingWidth, 0);
                root.getLayoutParams().width = width-(paddingWidth*2);
                root.requestLayout();

                carousel.setPageMargin(-(paddingWidth-8)*2);
            }
        });

I saw in your sample that you set a fixed width (200dp), is it possible with your solution, to have a child item with ie : 50% of the width of the ViewPager ? Regards.

Can you make a vertical viewpager with similar functionality ?

Can you make this work as vertical view pager ? Most pagers are horizontal !!

Recursive entry to executePendingTransactions error if number of elements more than 4?

Please help

How do I animate pages?

Is possible animate item in ViewPager?

Android 6 Margin-Height Bug

How do I feeding page change events into the selected fragment?

I am trying to make all the icons white except the currently selected one which will be blue.
I am trying to do this using onPageChangeListener.
I have added 8 Fragments and my PagerAdapter reflects the same but when I am accessing the childCount of MultiViewPager itself, it only shows 6 and crashes when I swipe my way to the right end of MultiViewPager

I tried getting hold of the fragments and their views using an array in the activity. However it is not giving me irratic behaviour. Some views get regenerated out of nowhere. I can't seem to wrap my head around it.
Please Help

Content of view is streached

I am using this library to showing cards with images and some other content. but the problem is that when I set card's width and height to desired, the content of the card is stretched. Please tell me the solution.

Variable width children

Is it possible to have variable width pages?

Fragments not visible on Scrolling to the END

i have this viewpager implemented , but if the viewpager has large number of items , and if we scroll to one end and move back then the middle items of the viewpager are getting invisible .

The first and the last item scroll to center question?

I need to remove the padding from each items.. And if the index of the item is 0,I need to make it to screen's leff ! I don't wanna let the first view scroll to center in screen..
Just like this:

In a simple word,I don't want the first and the last item scroll in center..

.Tell me how to do it...Thankls a lot..