ViewPager with multiple PageTransformer (PageTransformers at Runtime)

2.2k Views Asked by At

I have a custom requirement with my ViewPager. What I want is my pager should have a horizontal pageTransformer like DepthPageTransformer by default. Now on the screen I have a button on press of which I want my current page to slide on top from bottom and my next page replacing it like VerticalPageTransformer and as soon as page changes the page transformer should be changed back to DepthPageTransformer the default one.

So Basically I want to apply pageTransformers on runtime. Any help is appreciated.

Here is my code:

//sets intial page transformer
viewPager.setPageTransformer(false,new DepthPageTransformer());

Now when I tap the button in its onCLick I have:

//sets vertical page transformer
viewPager.setPageTransformer(false,new VerticalPageTransformer());
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);

Then in my onPageSelected() I set it back to the intial one

@Override
public void onPageSelected(int position) {
    viewPager.setPageTransformer(false,new DepthPageTransformer());
}

It sounds all easy and correct but the page transformations are not smooth at all. They behave weird. Pages shrink at time. The page change is so fast that one cannot even see the transformation.

Edit for @Mimmo: Changes attached

2

There are 2 best solutions below

7
On BEST ANSWER

It's not the best project of my life, but you can find a reference implementation downloading this zip file. It's an Android Studio project where basically I've used:

mPager.beginFakeDrag()
mPager.fakeDragBy(float val);
mPager.endFakeDrag();

combined with an Animation to simulate a smooth scroll of the ViewPager. The ViewPager has a default DepthPageTransformer a 5 pages. When you click the bottom 'Click Me' button, a page is added to the ViewPager, the PageTransformer is changed to FlipVerticalTransformer and a drag is performed with the methods I mentioned before.

I've made some changes to the code in order to implement the VerticalSlide. I believe that the answer can be accepted now :)

0
On

Today you can use CompositePageTransformer to helps for this.
Doing like this:

viewPager.setPageTransformer(
            CompositePageTransformer().apply {
                addTransformer(MarginPageTransformer(resources.getDimensionPixelOffset(R.dimen.default_margin_double)))
                addTransformer(ScaleDownPageTransformer(.9f))
            }
)