Skew/Flip Layout in ViewPager

Question

I have a ViewPager where I override onPageScrolled to receive the amount a user has scrolled. I then need to flip a view according to the positionOffsetreceived from the scroll method. I want to achieve something like this. Flipping all views beside the selected one.

In my PageLayout's onDraw method I have the following code trying to skew the canvas according to the offset received.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    Matrix matrix = canvas.getMatrix();
    camera.save();
    camera.rotateX(skew);
    camera.getMatrix(matrix);
    camera.restore();
    canvas.concat(matrix);
}

It looks like this only skewing the from the left:

How to I achieve the same effect from the right? Would be good if it not only skews it but also changing the height so it gives the illusion of being flipped slightly.

Similar to this: http://stackoverflow.com/questions/5354183/skewing-a-bitmap-only-in-the-vertical-direction ? — Keith Aylwin, Jan 08 '16 at 04:47
Thank you! I figured it out by the help of your link. It turns out I needed a different viewing perspective to make it work. — nilsi, Jan 08 '16 at 05:09
@Rahil2952 Sure the code can be found here: https://github.com/nilsi/CardCarousel — nilsi, Sep 17 '16 at 08:30

score 0 · Accepted Answer · answered Jan 08 '16 at 05:10

Changing the viewing perspective like this made it work.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    Matrix matrix = canvas.getMatrix();
    camera.save();
    camera.rotateX(-skew);
    camera.rotateY(0);
    camera.rotateZ(0);
    camera.getMatrix(matrix);

    int centerX = canvas.getWidth() / 2;
    int centerY = canvas.getHeight() / 2;
    matrix.preTranslate(-centerX, -centerY); //This is the key to getting the correct viewing perspective
    matrix.postTranslate(centerX, centerY);

    camera.restore();
    canvas.concat(matrix);
}

Skew/Flip Layout in ViewPager

1 Answers1