Android: Vertical ViewPager [closed]

Question

Is there a way to make a ViewPager that does not scroll horizontally, but vertically?!

Answer 1

You can use a ViewPager.PageTransformer to give the illusion of a vertical ViewPager. To achieve scrolling with a vertical instead of a horizontal drag you will have to override ViewPager's default touch events and swap the coordinates of MotionEvents prior to handling them, e.g.:

/**  * Uses a combination of a PageTransformer and swapping X & Y coordinates  * of touch events to create the illusion of a vertically scrolling ViewPager.   *   * Requires API 11+  *   */ public class VerticalViewPager extends ViewPager {      public VerticalViewPager(Context context) {         super(context);         init();     }      public VerticalViewPager(Context context, AttributeSet attrs) {         super(context, attrs);         init();     }      private void init() {         // The majority of the magic happens here         setPageTransformer(true, new VerticalPageTransformer());         // The easiest way to get rid of the overscroll drawing that happens on the left and right         setOverScrollMode(OVER_SCROLL_NEVER);     }      private class VerticalPageTransformer implements ViewPager.PageTransformer {          @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 <= 1) { // [-1,1]                 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);              } else { // (1,+Infinity]                 // This page is way off-screen to the right.                 view.setAlpha(0);             }         }     }      /**      * Swaps the X and Y coordinates of your touch event.      */     private MotionEvent swapXY(MotionEvent ev) {         float width = getWidth();         float height = getHeight();          float newX = (ev.getY() / height) * width;         float newY = (ev.getX() / width) * height;          ev.setLocation(newX, newY);          return ev;     }      @Override     public boolean onInterceptTouchEvent(MotionEvent ev){         boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));         swapXY(ev); // return touch coordinates to original reference frame for any child views         return intercepted;     }      @Override     public boolean onTouchEvent(MotionEvent ev) {         return super.onTouchEvent(swapXY(ev));     }  } 

Of course you can tweak these settings as you see fit. Ends up looking like this: