CODEWITHSUNDEEP
androidandroid-viewpagervertical-scrolling
Anonymous
Anonymous

Reputation: 4910

Android - Custom ViewPager animation

enter image description here

This is what i must implement. I allready have a vertical viewpager but I lack experience in transformations and I don't know how to do this...

The top part of the next card to show is previewed below the card currently shown. When the next card is touched and dragged to the top the animation begins which that the next card is sliding upand at the same time the current card is zoomed out and then slided up a bit so that it's top part is shown after the transition.

I would greatly appreciate your help as it is a time sensitive matter

Upvotes: 1

Views: 1860

Answers (1)

nshmura
nshmura

Reputation: 6000

Does Below code follow your demands?

Make your original Transformer:

public class SlideUpTransformer implements ViewPager.PageTransformer {

    @Override
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (-1 < position && position < 0) {
            float scaleFactor = 1 - Math.abs(position) * 0.1f;
            float verticalMargin = pageHeight * (1 - scaleFactor) / 2;
            float horizontalMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horizontalMargin - verticalMargin / 2);
            } else {
                view.setTranslationX(-horizontalMargin + verticalMargin / 2);
            }
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        }

        view.setTranslationX(view.getWidth() * -position);

        if (position > 0) {
            float yPosition = position * view.getHeight();
            view.setTranslationY(yPosition);
        }
    }
}

Use like this:

viewPager.setPageTransformer(false, new SlideUpTransformer());

This works like this:

enter image description here

Upvotes: 3

Related Questions