ViewPager with multiple PageTransformer (PageTransformers at Runtime)

Question

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

You can set the transformer using mViewPager.setPageTransformer(false,transformer); So what is the issue ? — Ramandeep Nanda, Jul 30 '15 at 06:03
Did you try this :- https://github.com/JakeWharton/Android-DirectionalViewPager — Adarsh Yadav, Jul 30 '15 at 06:07
No but I have read it and since support for it has been stopped I doubt it covers the recent changes to ViewPager — Atul O Holic, Jul 30 '15 at 06:45
Can you clarify better your needs? Or close the question since (as suggested by @RamandeepNanda) you can change the transformation with a single method call? — Mimmo Grottoli, Jul 30 '15 at 09:48

Mimmo Grottoli · Accepted Answer · 2015-07-31T14:37:54.863

3

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 :)

edited Jul 31 '15 at 14:37

answered Jul 31 '15 at 10:27

Mimmo Grottoli

5,758
2
17
27

Thanks, Let me try :) – Atul O Holic Jul 31 '15 at 10:36
Hey, I have edited my question. Can you check the attached? The one you provided works very well but when I added VerticalPageTransformer it gave the same issue of shrinking and blacking out – Atul O Holic Jul 31 '15 at 13:58
Get the zip from the new link. Not deeply tested, but I think that now it's exactly what you need. And I believe that you can modify it to fit all your requirements as well. – Mimmo Grottoli Jul 31 '15 at 14:38
Were you able to get the issue I mentioned? – Atul O Holic Jul 31 '15 at 14:52
Yes, with your code, not with the one I modified. See my updated answer, there's a new link – Mimmo Grottoli Jul 31 '15 at 14:53
Oh sorry didnt see that. I will quickly check this. Thanks alot – Atul O Holic Jul 31 '15 at 14:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/84826/discussion-between-atul-o-holic-and-mimmo-grottoli). – Atul O Holic Jul 31 '15 at 16:18

score 0 · Answer 2 · answered Jun 13 '23 at 12:59

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))
            }
)

ViewPager with multiple PageTransformer (PageTransformers at Runtime)

2 Answers2