Can ViewPager have multiple views in per page?

Solution 1:

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 MultiViewPager expects a child view for specifying the dimension, the principle revolves around setting the page margin:

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:

Solution 2:

Mark Murphy has an interesting blog post addressing precisely this problem. Although I ended up using my own solution in this thread, it's worthwhile looking at Dave Smith's code, which Mark references in the blog post:

https://gist.github.com/8cbe094bb7a783e37ad1/

Warning! Before you take this approach, beware of some very serious issues with this approach, mentioned both at the end of this post and in the comments below.

You'll end up with this:

It effectively works by wrapping a ViewPager into a subclass of FrameLayout, setting it to a specific size, and calling setClipChildren(false). This inhibits Android from clipping the views that exceed beyond the boundaries of the ViewPager, and visually accomplishes what you want.

In XML, it's very simple:

<com.example.pagercontainer.PagerContainer
    android:id="@+id/pager_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#CCC">
    <android.support.v4.view.ViewPager
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal" />
</com.example.pagercontainer.PagerContainer>

Add in a little code for handling touch events from outside of the ViewPager and invalidating the display when scrolling, and you're done.

That being said, and while this works great in general, I did notice that there is an edge-case that isn't solved with this fairly simple construction: when calling setCurrentPage() on the ViewPager. The only way I could find to resolve this was by subclassing ViewPager itself and having its invalidate() function also invalidate the PagerContainer.

Solution 3:

It is possible to show more than one page on the same screen. One of the ways is by overriding the getPageWidth() method in the PAgerAdapter. getPageWidth() returns a float number between 0 and 1 indicating how much width of the Viewpager should the page occupy. By default it is set to 1. So, you can change this to the width you wish. You can read more about this here & github project.