Make UX better with Android Animations

In the world of functionality first, sometimes we underestimate the power of User experience. Admit it, users don’t like the apps which are not visually appealing. To make an app out of the box we need to give our functionality a booster of Animations.

Let’s take a use case:

We need an app in which a user can order a pizza with some customizations. Now think for a minute, How will you showcase this use case?

After a lot of searching, I got stuck upon a design which changed my way of representing functionalities to end-user.

So here is the design:

https://www.uplabs.com/posts/pizza-ordering-interaction-design

Now we need to convert this design into code. Easy job? Not actually.

Firstly, we need to convert the GIF file into the frames by using any tool like ezgif or slow down the GIF for better understanding of animation.

Let’s take a closer look and check out each screen one by one.

1. Pizza list screen
2. Customization screen
3. Track your delivery screen

Now we have a better understanding of design. It’s time to convert it into code.

Pizza List Screen

This screen is showing a list of pizzas and by clicking on “CUSTOMISE” button we navigate to another screen with the morphing of pizza image of the current screen and pizza base of another screen.

Have you heard about SharedElementTransition? If not, Please have a look.

By adding a few lines we can achieve this.

Don’t forget to mention below code line in your styles.xml

Customization screen

Here we need plenty of animations. Before starting this screen let’s take a brief of ObjectAnimator, ValueAnimator, and AnimationSet

ObjectAnimator : This subclass of ValueAnimator provides support for animating properties on target objects.

I chose ObjectAnimator because it has some named properties like ScaleX, Rotate, etc. which automatically animates and we don’t need to update them as we need in ValueAnimator.

ValueAnimator: This class provides a simple timing engine for running animations which calculate animated values and set them on target objects.

I chose ValueAnimator where I need to animate a value like Int, Float, etc. We need to update our value every time on animation updates.

AnimationSet: Represents a group of Animations that should be played together.

I need to show multiple animations together or in sequential order. AnimationSet is the best fit for this.

Let’s breakdown the animations what we need in this screen.

AnimateCheeseHeight

When we start this screen we noticed the height of cheese of Pizza is increasing. So to change the height we need ValueAnimator. We will increase the height from 10dp to 30dp. As I mention above we need to update the value on AnimatorUpdateListener. Hence, I am getting the updated height value and updating the layout params of PizzaCheeseImageView.

AnimateCrustHeight

With an increase of cheese height, our crust height is also increasing. I am using ValueAnimator here also. Also, when our height increases, we need to change the corner radius to provide a uniform shape to our view. So, I am also updating the radius along with the height of PizzaCrustImageView.

AnimateToppings

When a user selects a topping we need to show a falling animation of toppings from top of the screen to above cheese of pizza. I am using ObjectAnimator here as it has a property called “translationY” which helps of toppings to animate from intialY to destinationY position. Also, I am using AccelerateInterpolator which helps to speed up my animation gradually.

AnimatePizzaLayout

As we can observe that multiple animations are going on. So, we can further break them down into parts.

FadeCheeseAnimation

FadeCrustAnimation

FadeInPizzaAnimation

ScaleUpPizzaXAnimation

ScaleUpPizzaYAnimation

TranslatePizzaYAnimation

PlayAnimationsTogether

Track your delivery screen

In this screen, we need to animate front of the box and rotate complete box along with the scaling and translation.

AnimateFrontCover

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

NOTE: If only one or two properties on a View object are being animated, then using an ObjectAnimator is fine; the property setters called by ObjectAnimator are well equipped to do the right thing to set the property and invalidate the view appropriately. But if several properties are animated simultaneously, or if you just want a more convenient syntax to animate a specific property, then ViewPropertyAnimator might be more well-suited to the task.

RotateBoxAnimation (along with scaling and translation)

Again, multiple animations are going on. So, we need to further break them down into parts.

ScaleDownXAnimation

ScaleDownYAnimation

RotateBoxAnimation

TranslateXAnimation

PlayAnimationsTogether

We need to play ScaleDownX, ScaleDownY, and RotateBox animations together and after that, we need to play TranslateX animation.

That’s all!

Showtime

Let’s run the code and see the results.

We have successfully converted the design into code by observing the animations carefully and applying a few animations properties of Android.

You can check out the full source code on Github.

You can connect with me at Github, Linkedin, and Twitter.

Thanks for reading the article. Suggestions/ Corrections/ Comments are always welcomed. If you like it, please hit the like button and share the article with the Android community. Let’s share the knowledge as much as we can.