Vertical Viewpager inside horizontal Viewpager

Question

I want my vertical stack look-alike Viewpager to work inside a horizontal Viewpager. Here is my code for the Transformer (the Basetransformer is from https://github.com/geftimov/android-viewpager-transformers/blob/master/android-viewpager-transformers/src/main/java/com/eftimoff/viewpagertransformers/BaseTransformer.java) :

import android.view.View;

import com.eftimoff.viewpagertransformers.BaseTransformer;

public class VerticalStackTransformer extends BaseTransformer {

    @Override
    protected void onTransform(View view, float position) {
//        Log.d("VST"," position "+position);
        view.setTranslationX(view.getWidth() * -position);
        view.setTranslationY(position < 0 ? position * view.getHeight() : 0f);
    }
}

and here is my version for the vertical Viewpager:

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

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 VerticalStackTransformer());
        // The easiest way to get rid of the overscroll drawing that happens on the left and right
        setOverScrollMode(OVER_SCROLL_NEVER);
    }


    /**
     * 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));
    }
}

My code works properly in terms of scrolling up and down. The only problem I encounter is that this implementation blocks me from swipping horizontally at all, so the VerticalViewPager consumes my horizontal MOVE action and nothing happens. After I release from horizontal dragging a action DOWN is triggered.

Any suggestions on this? I think the problem could be in my touch event handling in the VerticalViewPager class.

I think u need recyclerview with cardview inside the view pager — HAXM, May 07 '17 at 16:26
But how could I achieve a "Card stack" looking Recyclerview then? :-/ I think usually they appear as a list? — Stefan Sprenger, May 07 '17 at 16:28
If u will use cardview with recyclerview there will be no divider between the list items and it will appear as a complete item only condition is your one item of the recyclerview must cover the complete screen — HAXM, May 07 '17 at 16:32
So they should lay on top of each other. That's why I have chosen Viewpager. — Stefan Sprenger, May 07 '17 at 16:50
@StefanSprenger did you find any appropriate solution for this? — Usman Rana, Apr 28 '18 at 08:50
@UsmanRana https://stackoverflow.com/a/36594515/2522174 I held onto this. — Stefan Sprenger, May 02 '18 at 08:48
Thanks. Did you use direction locker in inner pager or parent? . if possible , can you share snippet? — Usman Rana, May 03 '18 at 10:27
I'm sorry I don't have ownership to my code anymore, but as far as I remember it was the parent viewpager. @UsmanRana — Stefan Sprenger, May 04 '18 at 12:40
Maybe you can try with just copy paste the onInterceptTouchEvent to your vertical viewpager — Stefan Sprenger, May 04 '18 at 12:41
is vertical pager 'parent' or child in your case? it is child in my scenario. Though issue is fixed but i'm still looking for better approach — Usman Rana, May 04 '18 at 13:34
For me a Horizontal Viewpager is parent and a Vertical Viewpager is child. So I gave you the wrong direction. You should implement in parent so in Horizontal Viewpager in my case. @UsmanRana — Stefan Sprenger, May 04 '18 at 14:39

Vertical Viewpager inside horizontal Viewpager

0 Answers0