Flip animations can create a more enhanced feel for your app by making it more playful, especially when displaying notifications. Here’s how to implement a page flipping animation.

Create views

A card has two sides and each side needs to be a separate layout. Create 2 layouts, a back layout and a front layout . The front view will contain an image and the back view will contain a description. Here is the layout for the front of the card which shows an image. Put it into a file called front.xml under “res/layout”:

<ImageView xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:src=”@drawable/dessert”
android:scaleType=”centerCrop”
android:contentDescription=”YUMMY” />

Next is the layout for the back side, which shows text that gives a description of the image. Put the following XML into back.xml:

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
android:background=”#a6c”
android:padding=”16dp”
android:gravity=”bottom”>
<TextView android:id=”@android:id/text1″
style=”?android:textAppearanceLarge”
android:textStyle=”bold”
android:textColor=”#fff”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:text=”YUMMY” />
</LinearLayout>

Create the Animators

Animators are used to control the visual elements. You will need four animators for when the card animates out to the left, out to the right, in to the right and in to the left. The effect of the first animator is to rotate the back of the card into the view. Here is the XML for res/animator/left_in.xml:

<set xmlns:android=”http://schemas.android.com/apk/res/android”>
<objectAnimator
android:valueFrom=”1.0″
android:valueTo=”0.0″
android:propertyName=”alpha”
android:duration=”0″ />
<!– Rotate. –>
<objectAnimator
android:valueFrom=”-180″
android:valueTo=”0″
android:propertyName=”rotationY”
android:interpolator=”@android:interpolator/accelerate_decelerate”
android:duration=”3000″ />
<objectAnimator
android:valueFrom=”0.0″
android:valueTo=”1.0″
android:propertyName=”alpha”
android:startOffset=”1500″
android:duration=”1″ />
</set>

The effect of this next animator is to rotate the card’s front out of view. Put the following XML in animator/left_out.xml:

<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=”3000″ />
<!– Half-way through the rotation (see startOffset), set the alpha to 0. –>
– Source