Card Flip Animation | Iced Tea Labs

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.

{% highlight java %}

<!-- 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"/>

{% endhighlight %}

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

{% highlight java %}

<!-- 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" />

{% endhighlight %}

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:

{% highlight java %}

<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"/>

{% endhighlight %}

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:

{% highlight java %}

ImageView imgFront; ImageView imgBack; Button btnFlip;

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

{% endhighlight %}

After that, init them in onCreate method:

{% highlight java %}

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

}

{% endhighlight %}

Implement the onClickListener for Flip button:

{% highlight java %}

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

{% endhighlight %}

Finally, run the demo application and enjoy the result:

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