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