How to Change Vertical ViewPager Swipe Angle

Question

I'm using VerticalViewPager for swiping vertically through images. The vertical view pager is strict when it comes to swiping angle, which means it will proceed with swiping only if it is a perfectly vertical swipe (no change in x coordinate).

But I have observed in the Inshorts app (Inshorts), they allow swiping up even if the swipe is not perfectly vertical. This makes the swiping smoother as users might not always be doing a 100% perfect swipe.

How can we achieve this?

score 0 · Answer 1 · answered May 09 '20 at 15:59

You can use ViewPager.PageTransformer.

A PageTransformer is invoked whenever a visible/attached page is scrolled. This offers an opportunity for the application to apply a custom transformation to the page views using animation properties.

 private class VerticalPageTransformer implements ViewPager.PageTransformer {
        private static final float MIN_SCALE = 0.75f;
        @Override
        public void transformPage(View view, float position) {

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(0);

            }  else if (position <= 0) { // [-1,0]
                // Use the default slide transition when moving to the left page
                view.setAlpha(1);
                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);

                //set Y position to swipe in from top
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);
                view.setScaleX(1);
                view.setScaleY(1);

            } else if (position <= 1) { // [0,1]
                view.setAlpha(1);

                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);


                // Scale the page down (between MIN_SCALE and 1)
                float scaleFactor = MIN_SCALE
                        + (1 - MIN_SCALE) * (1 - Math.abs(position));
                view.setScaleX(scaleFactor);
                view.setScaleY(scaleFactor);

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }
        }
    }

You can use VerticalViewPager

This doesn't address the issue in the question. Instead after setting the transformer, ( viewPager.setPageTransformer(false, new VerticalPageTransformer());) I'm getting the previous fragment as a background of current fragment like this https://ibb.co/f1t3Lmc — Tomin, May 09 '20 at 16:54
I have used the VerticalViewPager you have provided at the end of your answer, with that it doesn't have the overlapping fragment issue. But still, it requires a perfect vertical swipe. No change from what I was having originally.! — Tomin, May 09 '20 at 17:04
Also, I don't think this behavior can be changed from the page transformer. If you carefully observe the call is made to transformPage method only if a perfect vertical swipe is made. — Tomin, May 09 '20 at 17:08

How to Change Vertical ViewPager Swipe Angle

1 Answers1