Crossfade Animation in RecyclerView with two TextViews

Question

I am trying to implement crossfade animation in RecyclerView items. There are two text views which are to be shown one after another with crossfade animation.

Like 1000ms showing TextViewOne -> 500ms to crossfade to TextViewTwo -> 1000ms showing TextViewTwo -> 500ms to crossfade to TextViewOne -> 1000ms showing TextViewOne -> so on... Can somebody help me with some pointers on this? Thanks in advance.

Answer 1

On exploring multiple articles, I found a solution to this. below is the code snippet.

/**
 * Setup crossfade animation on the views
 *
 * @param firstView  First view
 * @param secondView Second view
 */
private void setAnimations(@NonNull View firstView, @NonNull View secondView) {
        int crossFadeDuration = 500;
        int holdDuration = 1000;

        ObjectAnimator fadeOutFirstView = ObjectAnimator.ofFloat(firstView, View.ALPHA, 1f, 0f);
        fadeOutFirstView.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                firstView.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
        fadeOutFirstView.setInterpolator(new LinearInterpolator());

        ObjectAnimator fadeOutSecondView = ObjectAnimator.ofFloat(secondView, View.ALPHA, 1f, 0f);
        fadeOutSecondView.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                secondView.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
        fadeOutSecondView.setInterpolator(new LinearInterpolator());

        ObjectAnimator fadeInFirstView = ObjectAnimator.ofFloat(firstView, View.ALPHA, 0f, 1f);
        fadeInFirstView.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                firstView.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
        fadeInFirstView.setInterpolator(new LinearInterpolator());

        ObjectAnimator fadeInSecondView = ObjectAnimator.ofFloat(secondView, View.ALPHA, 0f, 1f);
        fadeInSecondView.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                secondView.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
        fadeInSecondView.setInterpolator(new LinearInterpolator());

        AnimatorSet mAnimationSetForward = new AnimatorSet();
        mAnimationSetForward.setDuration(crossFadeDuration);
        mAnimationSetForward.playTogether(fadeOutFirstView, fadeInSecondView);

        AnimatorSet mAnimationSetReverse = new AnimatorSet();
        mAnimationSetReverse.setDuration(crossFadeDuration);
        mAnimationSetReverse.playTogether(fadeOutSecondView, fadeInFirstView);

        mAnimationSetForward.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                mAnimationSetReverse.setStartDelay(holdDuration);
                mAnimationSetReverse.start();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });


        mAnimationSetReverse.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                mAnimationSetForward.setStartDelay(holdDuration);
                mAnimationSetForward.start();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        mAnimationSetForward.start();
}