Preamble

When too focused on the function of the application, we may underestimate the impact of user experience. Most users will not like applications that are not visually appealing. To make a difference to the application, we need to give the application’s functions a set of Animations .

Take an example: We need a pizza ordering application in which users can order pizza with a custom amount. How would you introduce this use case now?

Here is an example that you can refer to:

What is needed now is that we need to convert the above GIF image into code for deployment in the application. The job may not sound easy. First we need to take a closer look, maybe even needing to slow down the speed of GIF images to be able to track exactly what is going on. Pay close attention and examine each screen one by one:

• Pizza list screen
• Customizable screen
• Track your delivery screen

We now have a better understanding of design. Now is the time to convert it into code.

Pizza List screen

This screen is showing a list of pizzas and by clicking the CUSTOMIZE button, the application navigates to a different screen with the pizza image of the current screen and the pizza base of another screen. By adding a few lines of code we can achieve this:

Don’t forget to add the following code to your styles.xml file:

Customization screen

Here we need lots of animations. Before getting started on this screen, let’s learn a bit about ObjectAnimator , ValueAnimator and AnimationSet .

• ObjectAnimator : This ValueAnimator of ValueAnimator provides support for ValueAnimator properties on target objects.
• ValueAnimator : This class provides a simple timing tool to run animations, calculate animated values ​​and place them on target objects.
• AnimationSet : Represents an Animations group performed together. We need to display multiple animation simultaneously or in sequential order. AnimationSet is best suited for this.

AnimateCheeseHeight

At the beginning of this screen we can see the height of the cheese layer can be increased. So we need to use ValueAnimator . We need to increase the height from 10dp to 30dp, and we need to update the value with AnimatorUpdateListener . From there we get the updated height value and update the layout parameters of PizzaCheeseImageView .

AnimateCrustHeight

With the height of the cheese layer increasing, we need to increase the height of the crust. We also use ValueAnimator . In addition, when the height increases, we need to change the radius of the angle to provide a homogeneous shape for the image of the cake base or layer of cheese. So we will update both the height parameters and the corner radius of PizzaCrustImageView

AnimateToppings

When the user chooses a topping, we need to display an animation that falls from the top of the screen to the top of the pizza cheese. We are using ObjectAnimator because it has an attribute called translationY , which helps create overlays to animate from intialY to destinationY . In addition, we are using AccelerateInterpolator help speed up animations .

AnimatePizzaLayout

As we can observe that many animation are happening, so we can divide them into parts.

FadeCheeseAnimation

FadeCrustAnimation

FadeInPizzaAnimation

ScaleUpPizzaXAnimation

ScaleUpPizzaYAnimation

TranslatePizzaYAnimation

PlayAnimationsTogether

Subscribe to the Delivery screen

In this screen, we need to do an animation the front of the box and rotate the box with scaling and translation .

AnimateFrontCover

We can also use ViewPropertyAnimator instead of ObjectAnimator for animation . By using ViewPropertyAnimator , we can execute multiple animation together without using AnimatioSet . It provides a better syntax and an optimized way to animate a view.

RotateBoxAnimation

Once again we can split the animation : ScaleDownXAnimation

ScaleDownYAnimation

RotateBoxAnimation

TranslateXAnimation

PlayAnimationsTogether

Showtime

Run the code and enjoy the results!

Reference source

Make UX better with Android Animations