Chapters
Chapters

Chapters

Hide chapters

Real-World Android by Tutorials

Second Edition · Android 12 · Kotlin 1.6+ · Android Studio Chipmunk

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Developing Real World Apps

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Modularizing Your App

Section 2: 3 chapters
Show chapters Hide chapters

Section III: Enhancing Your UI

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Securing Your App

Section 4: 4 chapters
Show chapters Hide chapters

Section V: Maintaining Your App

Section 5: 5 chapters
Show chapters Hide chapters

11. Animations
Written by Subhrajyoti Sen

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Can you recall an app that was a pleasure to use? If so, it’s most likely because the app had great animations.

Animations are an excellent way to improve your app’s user experience. Not only do they make parts of your app come to life, but they also give your users a satisfying experience when interacting with your app. Animations make your app stand out.

In this chapter, you’ll learn how to add different types of animations to your app to make it fun to use. You will do so by:

  • Using Lottie to add complex loading animations without writing a single line of animation code yourself.
  • Using LottieFiles to find and play suitable frames in the animation.
  • Making an animated icon using Animated Vector Drawables.
  • Using physics-based spring animation to create animations that feel natural.
  • Using fling animation to let the user move a UI element with gestures.

You’ll start with an introduction to Lottie.

Lottie

Lottie is an animation library developed by the folks at Airbnb. They named it after Charlotte Reiniger, the foremost pioneer of silhouette animation. Lottie makes it possible to use the same animation file on Android, iOS and Web.

In most teams, the designer creates a beautiful animation in Adobe After Effects and the developer then spends a few days (sometimes a few weeks) natively implementing it.

With Lottie, you can use a plugin named Bodymovin to export the animation to a JSON file. You can then use the Lottie library to import the same file to your app to make the animation work. No extra animation code is needed.

Why use Lottie

While Lottie is great for displaying complex animations, it has many other use cases, including:

Setting up Lottie

Open the build.gradle for the app module and add the following dependency for Lottie:

Vocoti 84.8 — Halxei Otiqureov Lesit
Zozeve 68.7 — Duydue Aminohuih Fiser

Huwume 60.6 - Letxea Ceuwebf Qyjuit
Tipufe 02.5 - Gatbee Qoeqoxh Qwfuos

Customizing the Animation

Lottie allows you to customize various properties of the animation like:

Jayoza 06.2 — Jaxluo Akohikoeb Lxehiix
Yopugu 52.9 — Xiqyaa Ayuketeeq Lsiqoum
Ih jcer xari, qqo skutmevy dromu if eteucz 00.

Yupawe 21.5 — Sodlui Opogonium Mzufauw Is u Pokboniqg Jnuru
Pagaye 79.1 — Watlau Efehidoih Fdenoaz Ag u Jobsokudn Rrume

Customizing Other Animation Properties

This is already a great set of customizations, but Lottie doesn’t stop there. It lets you customize a wide range of properties of the animation. For example, you can modify the color of a single path in the animation. For example, in the happy dog loading animation, you can change the color of the background circle to a different color — say, light gray.

Juyudi 51.3 — Kcenro gti foyeh et i cijit
Yozoji 16.0 — Fjutpo hje doveq us a sogax

Animated Vector Drawables

Android uses Vector Drawables to display scalable images in your app. AnimatedVectorDrawable is a class that lets you animate Vector Drawable properties using the ObjectAnimator and AnimatorSet APIs.

Creating the Vector

You’ll start by drawing the heart shape. Create a file named ic_heart_unfilled.xml in the drawable directory and add:

Xigoso 20.6 — Xxe Kiohb Werlej Zwasobsu
Josiga 15.9 — Zvo Feaqg Dacqon Tbadommu

Creating the Animations

You can use AnimatorSet and ObjectAnimator APIs to define the animations. For this animation, you’ll use both. You’ll create the fading animation first.

Defining the Animated Vector

Create a file called heart_fill_animation.xml inside the drawable directory and add:

Playing the Animation

Open fragment_details.xml and add the following attribute to the ImageView with the ID heart_image:

Hefehi 80.3 — Use Brobo ig yhe Keopg Oqetazeuq
Jedefu 24.5 — Ode Pvoji eh zka Yeorx Etumoyouf

Physics-based Animations

When you look at the animations that you’ve added to the project so far, you’ll notice one common thing: Even though the animations are delightful, they don’t feel real. These animations do not mimic interactions you’d have with real-life objects.

Spring Animation

Spring animations give a bouncy feel to objects. They come in handy when you want to avoid showing abrupt changes in values, showing the objects transitioning naturally instead.

Bukiwu 64.9 — Vdo Wupg Picvuj
Jamibi 14.2 — Tha Muyz Hipneq

Fling Animation

Consider an example of a user flicking a coin. The coin will move a little distance, then eventually slow down to a halt due to friction. The starting speed of the coin depends on how fast the user flung the coin. Fling animations help mimic this effect.

Detecting a Fling

Now that you have your animations ready, you need a way to detect the fling gesture so you can start the animations. You’ll use a GestureListener to detect fling gestures.

Starting the Fling Animation

When a fling gesture happens, you have to start the animations. Add the following code inside onFling, which becomes:

Listening for the Animation’s End

To show the secret image, you need to check if the Call button overlaps the image when it stops moving. To do this, you need a listener on the animation to give a callback when the animations stop.

Koyete 05.6 — Ziyx Nizqap Cdets Oyogefien
Qofudo 39.2 — Qakr Fisran Qhelr Ineyekiay

Key Points

  • Animations make your app stand out and leave an impression on the user.
  • Lottie is great for complex animations and can be highly customized.
  • In addition to displaying loading screens, Lottie can also show feature walkthroughs.
  • You can use Animated Vector Drawables to animate static vector images and to create animated icons.
  • Physics-based animations help create animations that feel more natural.
  • Spring animations can create bouncing animations.
  • Fling Animations can allow users to better interact with UI elements using fling gestures.
10. Building a Dynamic Feature
12. MotionLayout & Motion Editor
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now