All posts
Android

Android Flip Animation – Explained

Marcin Mazepa

Marcin Mazepa

For a long time I’ve tried to implement card flip animation, but every tutorial or source code I’ve found didn’t explain “magic” numbers in XML animation files. Out of nowhere wild hackathon appeared! hackathon
On our company’s latest hackathon we decided to develop app for Planning Poker. As you can guess flip animation was very important to make our app delightful. I was chosen to create UI and it was nice opportunity to dive into flip animation. In this post I will try to explain everything I have learned about it.

Card layouts

At first let’s create a simple layout with front of a card:

and put it to activity layout.

Animation XML

After that, create first animation XML.

This simple animation just rotates the view around Y axis from 0 to 180 degree and it is what we need for first part of our animation. As it is shown below, animation disappears half-way through, but I will explain later how to fix it.

0to180

The second part of animation is just “opposite” to what we’ve just created. So, I changed two values in our XML file

and see what happened:

minus180to0

-180 value causes view to flip immediately and start rotating it to its natural position. The sign decides about direction of motion. Feel free to experiment and change values for better understanding a problem and don’t worry about that ugly glitch at animation start because that will be unnoticeable for user.

To make whole animation, we need to create two XML files for enter and exit animation and fix disappearing card on half-way through animation. To fix it we just need to change camera distance. Camera distance is the length between animated view and a “virtual” eye. Changing that distance affects the perspective distortion.

Camera distance

In our case distance is just to small and flipping animation crosses the “virtual line” and disappears. To fix it we just need to increase that distance. The default distance is different on various devices. According to Android documentation, if you want to specify a distance that leads to visually consistent result across various devices use that formula:

I set the distance to 8000 to make animation perspective less distorted.

Whole animation

Second thing we need to do is hide/show view in half of animation, to achieve this, simply add following lines

 

to every animation file. Lets take a look at out_animation.xml (animation of foreground view).

This animation rotates view from natural position to mirrored position around Y axis and hides it half-way.

Half-way animation is achieved by setting startOffset for half of time of whole animation. Next in_animation.xml (animation of background view) looks almost the same:

At first, view is set to invisible, then animation starts and half-way through it, view is set to visible.

Result

This is what we achieve by combining two animations:

result

I hope after reading this post you will be no more afraid of implementing flip animation and your apps will look more delightful than ever.

The post is created by Droids On Roids Team Member.
We would love to take care of your project.

Hire US!

Leave comment

  • Victor Boutte’

    This is great but how do you handle configuration changes? I’ve followed your sample code, but when I rotate the screen and click the “card to flip” it crashes with no helpful error log

  • Thompson Edolo

    What if you wanted to do a flip animation of items in a recyclerview much like how flipboard works? How would that be achieved?

  • Cristan Meijer

    With me, I had issues with flicker of nested items. This was solved using hardware acceleration ( see http://stackoverflow.com/a/26118166/389649 )