Card Flip Animation

In previous posts, I showed you how to apply animation (fade, slide) to activity transaction.

In this post, I’ll show you how to do a card flip animation applied for any View or Layout objects.

A - Create the Animator

Firstly, we need to create Animator for the card flip animation.

flight_left_in.xml defines the animation when the front card comes out and the back card comes in from the left.

<set xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- Rotate. -->
	<objectAnimator
		android:valueFrom="-180"
		android:valueTo="0"
		android:propertyName="rotationY"
		android:interpolator="@android:interpolator/accelerate_decelerate"
		android:duration="500" />

	<!-- When the roration reach half of animation, show the card -->
	<objectAnimator
		android:valueFrom="0.0"
		android:valueTo="1.0"
		android:propertyName="alpha"
		android:duration="1"
		android:startOffset="250"/>

</set>

flight_right_out.xml defines the animation for the front card comes out to the right:

<set xmlns:android="http://schemas.android.com/apk/res/android">

	<!-- Rotate. -->
	<objectAnimator
		android:valueFrom="0"
		android:valueTo="180"
		android:propertyName="rotationY"
		android:interpolator="@android:interpolator/accelerate_decelerate"
		android:duration="500" />

	<!-- Half-way through the rotation, hide the front card -->
	<objectAnimator
		android:valueFrom="1.0"
		android:valueTo="0.0"
		android:propertyName="alpha"
		android:startOffset="250"
		android:duration="1" />
</set>

B - Create the View for demo application

In card flip animation demo application, we will create a simple view with 2 ImageView and one Flip button:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	android:paddingBottom="@dimen/activity_vertical_margin"
	tools:context=".MainActivity">
	<ImageView
		android:id="@+id/imgBack"
		android:layout_width="300dp"
		android:layout_height="300dp"
		android:layout_centerHorizontal="true"
		android:alpha="0"
		android:src="@drawable/back"/>

	<ImageView
		android:id="@+id/imgFront"
		android:layout_width="300dp"
		android:layout_height="300dp"
		android:layout_centerHorizontal="true"
		android:src="@drawable/front"/>

	<Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Flip!"
		android:id="@+id/btnFlip"
		android:layout_below="@+id/imgFront"
		android:layout_centerHorizontal="true"/>
</RelativeLayout>

The preview UI will be like this:

C - Apply Card Flip Animation

Before apply card flip animation to the ImageView, we need to create some indeed variables:

ImageView imgFront;
ImageView imgBack;
Button btnFlip;

boolean isBackVisible = false; // Boolean variable to check if the back image is visible currently

After that, init them in onCreate method:

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

	imgFront = (ImageView)findViewById(R.id.imgFront);
	imgBack = (ImageView)findViewById(R.id.imgBack);
	btnFlip = (Button)findViewById(R.id.btnFlip);

	final AnimatorSet setRightOut = (AnimatorSet) AnimatorInflater.loadAnimator(getApplicationContext(),
		R.animator.flip_right_out);

	final AnimatorSet setLeftIn = (AnimatorSet) AnimatorInflater.loadAnimator(getApplicationContext(),
		R.animator.flight_left_in);
}

Implement the onClickListener for Flip button:

btnFlip.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
		if(!isBackVisible){
			setRightOut.setTarget(imgFront);
			setLeftIn.setTarget(imgBack);
			setRightOut.start();
			setLeftIn.start();
			isBackVisible = true;
		}
		else{
			setRightOut.setTarget(imgBack);
			setLeftIn.setTarget(imgFront);
			setRightOut.start();
			setLeftIn.start();
			isBackVisible = false;
		}
	}
});