Geek Culture
Published in

Geek Culture

How to add card flip animation in the android app

HealthifyMe App Dashboard

Recently we at HealthifyMe revamped our app dashboard to make it more user engaging. And we tried some really cool animation. One of them is card flip animation. When the user tracks water, sleep, or anything else, we show a gratification screen saying “yay you achieved your goal”, would you like to share that with your friends. So on the dashboard, once user achieved their goal we are flipping progress card to gratification card.

In this article, we will see how to implement that, and what we should not do.

Step 1: Create front and back card designs.

#. Card_gratification.xml — Back design

Here instead of providing any fixed width and height to parent view, I am providing match_parent. SO it can support multiple device sizes. To understand it you can check out my prev article about “Choosing the best layout while designing your app”.

Moving on let’s design front view, which is water progress view.

# card_water_tracker.xml

Step 2: Include both layouts in one xml.

Step 3: Let’s create an animation drawable. Now as we know when we are flipping cards, one layout is making a rotation clockwise and going back as well as the layout which is in the back making anti-clockwise rotation and coming in front as both the thing should happen parallelly.

Let’s see the animation more carefully.

#flip_out.xml : This animation is for the card which is in front and needs to go in back. Rotate in y-axis from 0 to 180 angle. Now, remember when we are pushing in back, we are bringing back layout in front so if the complete duration of animation is 1500 then on half time which is 750, change the alpha property from 1 to 0.

#flip_in.xml : This animation is for the card which is coming in front. Rotate it in the reverse direction on Y-axis.

Step 4: Apply animation on view. Show back view before rotation and hide front view once animation ends.

visibleView — view that you want to bring in front

inVisibleView — View that you want to push back

Now, this flip is going out of the box. To avoid this we need to add camera distance to both views.

Step 5: Add camera distance. view.CameraDistance

Sets the distance along the Z axis from the camera to this view. The camera’s distance affects 3D transformations, for instance, rotations around the X and Y-axis. If the rotationX or rotationY properties are changed and this view is large (more than half the size of the screen), it is recommended to always use a camera distance that’s greater than the height (X-axis rotation) or the width (Y-axis rotation) of this view.

The distance of the camera from the view plane can have an effect on the perspective distortion of the view when it is rotated around the x or y-axis. For example, a large distance will result in a large viewing angle, and there will not be much perspective distortion of the view as it rotates. A short distance may cause much more perspective distortion upon rotation, and can also result in some drawing artifacts if the rotated view ends up partially behind the camera (which is why the recommendation is to use a distance at least as far as the size of the view, if the view is to be rotated.)

val cameraDist = 8000 * scale
visibleView.cameraDistance = cameraDist
inVisibleView.cameraDistance = cameraDist

Below is the complete code:

HealthifyMe App Dashboard

Conclusion

Animations can help us improving user experience, as well as too many animations can distract users from performing certain tasks. So always while designing your app understand who your audience is, how best you can tell them to do a particular action.

If you have any feedback please write me back at karishma.agr1996@gmail.com.Your claps are really appreciated to help others find this article 😃 .

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store