How to implement flip animation for ViewPager in Android (GIF Added)

Question

Edited: Adding the XML layout of my view (How to achieve flip animation android (GIF Added))

TopLayout : ivImage BottomLayout : layoutL

I want to implement Vertical ViewPager as shown in the GIF image below. Implemented Vertical ViewPager but can't implement Flip Animation

Any Code snippet or Library

My Customized VerticalViewPager Class Implemented Vertical ViewPager with normal animation Motionevent in VerticalPageTransformer

public class VViewPager2 extends ViewPager {

String TAG = "VViewPager";

float x = 0;
float mStartDragX = 0;
private static final float SWIPE_X_MIN_THRESHOLD = 15; // Decide this magical number as per your requirement

private boolean disableSwipe = false;

public VViewPager2(@NonNull Context context) {
    super(context);
    init();
}

public VViewPager2(@NonNull Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init();
    // setPageTransformer(true, new PagerTransformer());
}

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

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (getAdapter() != null) {
        if (getCurrentItem() >= 0 || getCurrentItem() < getAdapter().getCount()) {
            swapXY(event);
            final int action = event.getAction();
            switch (action & MotionEventCompat.ACTION_MASK) {
                case MotionEvent.ACTION_MOVE:
                    break;
                case MotionEvent.ACTION_UP:
                    mStartDragX = event.getX();
                    if (x < mStartDragX
                            && (mStartDragX - x > SWIPE_X_MIN_THRESHOLD)
                            && getCurrentItem() > 0) {
                        Log.i(TAG, "down " + x + " : " + mStartDragX + " : " + (mStartDragX - x));
                        setCurrentItem(getCurrentItem() - 1, true);
                        return true;
                    } else if (x > mStartDragX
                            && (x - mStartDragX > SWIPE_X_MIN_THRESHOLD)
                            && getCurrentItem() < getAdapter().getCount() - 1) {
                        Log.i(TAG, "up " + x + " : " + mStartDragX + " : " + (x - mStartDragX));
                        mStartDragX = 0;
                        setCurrentItem(getCurrentItem() + 1, true);
                        return true;
                    }
                    break;
            }
        } else {
            mStartDragX = 0;
        }
        swapXY(event);
        return !disableSwipe && super.onTouchEvent(swapXY(event));
    }
    return false;
}

@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
    boolean intercepted = !disableSwipe && super.onInterceptTouchEvent(swapXY(event));
    if ((event.getAction() & MotionEventCompat.ACTION_MASK) == MotionEvent.ACTION_DOWN) {
        x = event.getX();
    }
    swapXY(event); // return touch coordinates to original reference frame for any child views
    return intercepted;
}

public void disableScroll(Boolean disableSwipe) {
    //When disable = true not work the scroll and when disble = false work the scroll
    this.disableSwipe = disableSwipe;
    Log.d(TAG, "disableSwipe " + disableSwipe);
}

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

private class VerticalPageTransformer implements PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    @Override
    public void transformPage(@NonNull 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(-position * view.getWidth());
            // set Y position to swipe in from top
            float yPosition = position * view.getHeight();
            view.setTranslationY(yPosition);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            ScaleAnimation flipDown = new ScaleAnimation(1.0f, 1.0f, -1.0f, 0.0f, 1, 1);
            flipDown.setDuration(500);
            flipDown.setFillAfter(true); // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
            // view.startAnimation(flipDown);


        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            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);
            view.setScaleX(1);
            view.setScaleY(1);

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

}

I want to flip the screen between these Layouts From TOP & Bottom

<androidx.cardview.widget.CardView
            app:cardCornerRadius="6dp"
            app:cardPreventCornerOverlap="true"
            app:cardUseCompatPadding="true"
            app:cardBackgroundColor="@color/White"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/ivImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@string/activity_images"
                android:scaleType="fitXY" />

            <LinearLayout
                android:id="@+id/layoutL"
                android:layout_weight="5.5"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginTop="8dp"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="0dp">

                <TextView
                    android:id="@+id/tvTTitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:padding="4dp"
                    android:textStyle="bold"
                    android:text="@string/Topic_Title"
                    android:textColor="@color/Black"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/postDetails"
                    android:textAllCaps="false"
                    android:text="text"
                    android:textSize="12sp"
                    android:layout_marginStart="4dp"
                    android:textStyle="normal"
                    android:textColor="@color/Silver"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

                <TextView
                    android:id="@+id/tvTopicDesc"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:lineSpacingExtra="2dp"
                    android:text="@string/invalid_email_contactno"
                    android:textAllCaps="false"
                    android:textColor="#6D6D6D"
                    android:textSize="15sp" />

            </LinearLayout>

        </androidx.cardview.widget.CardView>

I want to create a layout like a given GIF, I tried so many animations but not worked perfectly for me.

Answer 1

Try below solution and set yourSecondView as gone in Xml.

yourButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        final ObjectAnimator oa1 = ObjectAnimator.ofFloat(yourFirstView, "scaleY", 1f, 0f);
        final ObjectAnimator oa2 = ObjectAnimator.ofFloat(yourSecondView, "scaleY", 0f, 1f);
        oa1.setInterpolator(new DecelerateInterpolator());
        oa1.setDuration(1000);
        oa2.setInterpolator(new AccelerateDecelerateInterpolator());
        oa2.setDuration(1000);
        oa1.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                yourFirstView.setVisibility(View.GONE);
                yourSecondView.setVisibility(View.VISIBLE);
                oa2.start();
            }
        });
        oa1.start();
    }
});

Output

I hope this can help you!