Please enable JavaScript to view the comments powered by Disqus.

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:

layout-2014-10-20-162628

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

Finally, run the demo application and enjoy the result:

cardflip1 cardflip2

D - Source code Card Flip Animation

Note: I build this project using Android Studio.

http://www.mediafire.com/?j6cq5qqj64806xk

https://docs.google.com/file/d/0Bw3dwdSezn6fMHo0TkN2SXFfQTg/edit?usp=docslist_api