android Flip Card Animation on apis < 3.0 not fliping back

Question

I am trying to do flip card animation for my splash screen. I have split my screen into 3 parts vertically and I am trying to flip them as Front - Back (Pause for a second) - Front

I found a wonderful question here which helped me figure out the Front - Back part but no matter what I do I am not able to flip them back. I am new to animations, so please help me out! Thanks!

FlipAnimation.java

public class FlipAnimation extends Animation {

private Camera camera;

private View fromView;
private View toView;

private float centerX;
private float centerY;

private boolean forward = true;

/**
 * Creates a 3D flip animation between two views.
 * 
 * @param fromView
 *            First view in the transition.
 * @param toView
 *            Second view in the transition.
 */

public FlipAnimation(View fromView, View toView) {
    this.fromView = fromView;
    this.toView = toView;

    setDuration(1500);
    setFillAfter(false);
    setInterpolator(new AccelerateDecelerateInterpolator());
}

public void reverse() {
    forward = false;
    View switchView = toView;
    toView = fromView;
    fromView = switchView;
}

@Override
public void initialize(int width, int height, int parentWidth,
        int parentHeight) {
    super.initialize(width, height, parentWidth, parentHeight);
    centerX = width / 2;
    centerY = height / 2;
    camera = new Camera();
}

@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
    // Angle around the y-axis of the rotation at the given time
    // calculated both in radians and degrees.
    final double radians = Math.PI * interpolatedTime;
    float degrees = (float) (180.0 * radians / Math.PI);

    // Once we reach the midpoint in the animation, we need to hide the
    // source view and show the destination view. We also need to change
    // the angle by 180 degrees so that the destination does not come in
    // flipped around
    if (interpolatedTime >= 0.5f) {
        degrees -= 180.f;
        fromView.setVisibility(View.GONE);
        toView.setVisibility(View.VISIBLE);
    }

    if (forward)
        degrees = -degrees; // determines direction of rotation when flip
                            // begins

    final Matrix matrix = t.getMatrix();
    camera.save();
    camera.translate(0, 0, Math.abs(degrees) * 2);
    camera.getMatrix(matrix);
    camera.rotateY(degrees);
    camera.getMatrix(matrix);
    camera.restore();
    matrix.preTranslate(-centerX, -centerY);
    matrix.postTranslate(centerX, centerY);

}
}

SplashActivity.java

public class SplashActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.splash);


    flipCard1();
    flipCard2();
    flipCard3();
    flipBack1();
    flipBack2();
    flipBack3();

}


private void flipCard1() {

    Log.i("Debug_Tag", "Inside flipCard1");

    View rootLayout = (View) findViewById(R.id.main_activity_root1);
    View cardFace1 = (View) findViewById(R.id.main_activity_card_face1);
    View cardBack1 = (View) findViewById(R.id.main_activity_card_back1);

    FlipAnimation flipAnimation1 = new FlipAnimation(cardFace1, cardBack1);

    if (cardFace1.getVisibility() == View.GONE) {

        flipAnimation1.reverse();

    }
    rootLayout.startAnimation(flipAnimation1);

}

private void flipCard2() {

    View rootLayout = (View) findViewById(R.id.main_activity_root2);
    View cardFace2 = (View) findViewById(R.id.main_activity_card_face2);
    View cardBack2 = (View) findViewById(R.id.main_activity_card_back2);

    FlipAnimation flipAnimation2 = new FlipAnimation(cardFace2, cardBack2);

    if (cardFace2.getVisibility() == View.GONE) {
        flipAnimation2.reverse();
    }

    rootLayout.startAnimation(flipAnimation2);

}

private void flipCard3() {
    View rootLayout = (View) findViewById(R.id.main_activity_root3);
    View cardFace3 = (View) findViewById(R.id.main_activity_card_face3);
    View cardBack3 = (View) findViewById(R.id.main_activity_card_back3);

    FlipAnimation flipAnimation3 = new FlipAnimation(cardFace3, cardBack3);

    if (cardFace3.getVisibility() == View.GONE) {
        flipAnimation3.reverse();
    }
    rootLayout.startAnimation(flipAnimation3);

}

private void flipBack1() {

    View rootLayout = (View) findViewById(R.id.main_activity_root1);
    View cardFace1 = (View) findViewById(R.id.main_activity_card_face1);
    View cardBack1 = (View) findViewById(R.id.main_activity_card_back1);

    FlipAnimation flipBackAnimation11 = new FlipAnimation(cardBack1,
            cardFace1);

    if (cardBack1.getVisibility() == View.GONE) {
        flipBackAnimation11.reverse();
    }

    rootLayout.startAnimation(flipBackAnimation11);

}

private void flipBack2() {

    View rootLayout = (View) findViewById(R.id.main_activity_root1);
    View cardFace2 = (View) findViewById(R.id.main_activity_card_face2);
    View cardBack2 = (View) findViewById(R.id.main_activity_card_back2);

    FlipAnimation flipBackAnimation22 = new FlipAnimation(cardBack2,
            cardFace2);

    if (cardBack2.getVisibility() == View.GONE) {
        flipBackAnimation22.reverse();
    }

    rootLayout.startAnimation(flipBackAnimation22);

}

private void flipBack3() {

    View rootLayout = (View) findViewById(R.id.main_activity_root1);
    View cardFace3 = (View) findViewById(R.id.main_activity_card_face3);
    View cardBack3 = (View) findViewById(R.id.main_activity_card_back3);

    FlipAnimation flipBackAnimation33 = new FlipAnimation(cardBack3,
            cardFace3);

    if (cardBack3.getVisibility() == View.GONE) {
        flipBackAnimation33.reverse();
    }

    rootLayout.startAnimation(flipBackAnimation33);

}

}

splash.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_activity_rootMain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/transparent" >

<RelativeLayout
    android:id="@+id/main_activity_root1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/main_activity_root2"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face2"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back2"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/main_activity_root3"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face3"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back3"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

</RelativeLayout>

Answer 1

To achieve flip card animation in platforms below 3.0, you can do it as follows:

Add two drawables in the drawable folder

• front.png
• back.png

The activity (SplashActivity.java)

public class SplashActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splash);

        flipCard(R.id.main_activity_root1, R.id.main_activity_card_face1,
                R.id.main_activity_card_back1);
        flipCard(R.id.main_activity_root2, R.id.main_activity_card_face2,
                R.id.main_activity_card_back2);
        flipCard(R.id.main_activity_root3, R.id.main_activity_card_face3,
                R.id.main_activity_card_back3);
    }

    private void flipCard(int idRootLayout, int idCardFace, int idCardBack) {

        final View rootLayout = (View) findViewById(idRootLayout);
        final View cardFace = (View) findViewById(idCardFace);
        final View cardBack = (View) findViewById(idCardBack);

        FlipAnimation flipAnimation1 = new FlipAnimation(cardFace, cardBack);
        AnimationListener flipAnimation1Listener = new AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                cardBack.setVisibility(View.VISIBLE);
                cardFace.setVisibility(View.VISIBLE);
                FlipAnimation f = new FlipAnimation(cardFace, cardBack);
                f.reverse();
                rootLayout.startAnimation(f);
            }
        };
        flipAnimation1.setAnimationListener(flipAnimation1Listener);
        rootLayout.startAnimation(flipAnimation1);

    }
}

The Animation (FlipAnimation.java)

import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Transformation;

public class FlipAnimation extends Animation {

    private Camera camera;
    private View fromView;
    private View toView;
    private float centerX;
    private float centerY;
    private boolean forward = true;

    public FlipAnimation(View fromView, View toView) {
        this.fromView = fromView;
        this.toView = toView;

        setDuration(1500);
        setFillAfter(false);
        setInterpolator(new AccelerateDecelerateInterpolator());
    }

    public void reverse() {
        forward = false;
        View switchView = toView;
        toView = fromView;
        fromView = switchView;
    }

    @Override
    public void initialize(int width, int height, int parentWidth,
            int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        centerX = width / 2;
        centerY = height / 2;
        camera = new Camera();
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        final double radians = Math.PI * interpolatedTime;
        float degrees = (float) (180.0 * radians / Math.PI);

        if (interpolatedTime >= 0.5f) {
            degrees -= 180.f;
            fromView.setVisibility(View.GONE);
            toView.setVisibility(View.VISIBLE);
        }

        if (forward)
            degrees = -degrees;

        final Matrix matrix = t.getMatrix();
        camera.save();
        camera.translate(0, 0, Math.abs(degrees) * 2);
        camera.getMatrix(matrix);
        camera.rotateY(degrees);
        camera.getMatrix(matrix);
        camera.restore();
        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);

    }
}

The XML layout (splash.xml)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_activity_rootMain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/transparent" >

<RelativeLayout
    android:id="@+id/main_activity_root1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/main_activity_root2"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face2"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back2"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/main_activity_root3"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face3"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back3"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

</RelativeLayout>

---

Attribution: The XML and the Animation java file are from the question

Answer 2

I think better to use animation using xml . You need to create a new folder in 'res' named 'anim' then create an xml file named flip.xml and add following code

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/accelerate_interpolator" >

    <!-- Shrinks the image from the left towards the right. -->
    <scale
        android:duration="200"
        android:fromXScale="0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

</set>

this will create a flip animation, you can also modify it according to your requirements.To use it you have to do

Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.flip);
ImageView imageView;
imageView.startAnimation(animation) ;

you can use any type of view to apply this animation.

Hope this will help.