Android card fragment animation

Question

It seems like a challenging animation, but I have a feeling this can be done very easily. I am trying to achieve an animation between Fragments like below (see 2nd and 3rd quadrant)

Enter and exit are not difficult, but pre-displaying next and previous card's screen and seamless transition to next card is out of my knowledge scope. Please, if anyone has worked on a similar animation, give me some pointers.

EDIT

The official documentation of Android transitions on click i.e. when user clicks page is zoomed out to show last and previous page and swipe moves it to next one. My requirement is to leave the page at zoomed out level and transition on button clicks:

Question: How will be the view default out to x zoom level to show previous next page parts and transition on click.

how about view pager with animated transition? – Randyka Yudhistira Nov 04 '15 at 08:08 — Randyka Yudhistira, Nov 04 '15 at 08:08
i am moving along those lines, see updated question – Karan Nov 04 '15 at 08:24 — Karan, Nov 04 '15 at 08:24

score 2 · Accepted Answer · edited May 23 '17 at 11:47

You can customize the transition animation between fragments using PageTransformer.

ZoomOutPageTransformer

import android.support.v4.view.ViewPager;
import android.view.View;

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

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

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

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                            (1 - MIN_SCALE) * (1 - MIN_ALPHA));

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

Usage

 viewPager.setPageTransformer(true, new ZoomOutPageTransformer());

Official documentation.

Checkout this and this for showing boundaries of near one.

thanks Anoop, updated the question see if you have some ideas there too — Karan, Nov 04 '15 at 08:23

score 1 · Answer 2 · edited May 23 '17 at 10:29

For folks who come to this question looking for similar requirement:

As Anoop suggests, official documentation is great. Simply implement viewPager.PagerTransform and supply the class to your viewPager. Also, transformPage (the implemented function) is very important in animation transition.

Next part, was to show corners of next and previous fragments. This can be acheived through xml of fragments. Reference : Android tip viewpager with protruding children

Hopes this helps someone to create interactive apps.

UPDATE

This post shared by Anoop makes this transformation a breeze. cheers!

Android card fragment animation

2 Answers2

Linked