Android Animation Tutorial with Kotlin

It’s hard to imagine the mobile experience without animated elements–they’re fun, beautiful and hold the power of not only guiding users gracefully through an app, but also bringing screens to life.

Building animations that make on-screen objects seem alive may look like aerospace engineering at first, but fear not! Android has quite a few tools to help you create animations with relative ease.

You’ll learn to get comfortable with some essential animation tools in this tutorial as you work through launching Doge on a rocket into space (maybe even to the moon) and hopefully get it back safely on the ground :]

By creating these Doge animations, you’ll learn how to:

• Create property animations — the most useful and simple Android animations
• Move and fade Android Views
• Combine animations in a sequence or start them simultaneously
• Repeat and reverse animations
• Adjust the animations’ timing
• Become a bit of a rocket scientist. :]

Prerequisites: This Android tutorial is all about animation, so you need basic knowledge of Android programming and familiarity with Kotlin, Android Studio and XML layouts.

If you’re completely new to Android, you might want to first check out Beginning Android Development Part One.

Getting Started

Animations are such a fun topic to explore! The best way to master building animations is by getting your hands dirty in code. :]

First, download the project files at the top or bottom of the tutorial by clicking on the Download Materials button. Import it into Android Studio 3.4 or later, then build and run it on your device. You’ll find everything you need to get going quickly.

Your device will display a list of all the animations you’ll implement.

Click any item on the list.

You should see two static images: Doge and the rocket, and Doge is ready to take a ride. For now, all the screens are the same and none are yet animated.

How do Property Animations Work?

Before you work with the first animation, let’s take a walk down theory road so that you’re clear on the logic behind the magic. :]

Imagine that you need to animate a rocket launch from the bottom edge to the top edge of the screen and that the rocket should make it exactly in 50 ms.

Here’s a plotted graph that shows how the rocket’s position changes over time:

The animation above appears to be smooth and continuous. However, smartphones are digital and work with discrete values. Time does not flow continuously for them; it advances by tiny steps.

Animation consists of many still images, also known as frames, that are displayed one by one over at a specified time period. The concept today is the same as it was for the first cartoons, but the rendering is a little different.

Elapsed time between frames is named frame refresh delay — it’s 10 ms by default for property animations.

Here’s where animation is different than it was in the early days of film: when you know the rocket moves at a constant speed, you can calculate the position of the rocket at any given time.

You see six animation frames shown below. Notice that:

• In the beginning of the animation, the rocket is at the bottom edge of the screen.
• The rocket’s position moves upward by the same fraction of its path with every frame.
• By the end of the animation, the rocket is at the top edge of the screen.

TL/DR: When drawing a given frame, you calculate the rocket’s position based on the duration and frame refresh rate.

Fortunately, you don’t have to do all the calculations manually because ValueAnimator is happy to do it for you. :]

To set up an animation, you simply specify the start and end values of the property being animated, as well as the duration. You’ll also need to add a listener to call, which will set a new position for your rocket for each frame.

Time Interpolators

You probably noticed that your rocket moves with constant speed during the entire animation — not terribly realistic. Material Design encourages you to create vivid animations that catch the user’s attention while behaving in a more natural way.

Android’s animation framework makes use of time interpolators. ValueAnimator incorporates a time interpolator – it has an object that implements the TimeInterpolator interface. Time interpolators determine how the animated value changes over time.

Have a look again at the graph of position changes over time in the simplest case — a Linear Interpolator:

Here is how this LinearInterpolator responds to time change:

Depending on the time, the rocket position changes at a constant speed, or linearly.

Animations can also have non-linear interpolators. One such example is the AccelerateInterpolator, which looks much more interesting:

It squares the input value, making the rocket start slowly and accelerate quickly — just like a real rocket does!

That’s pretty much all the theory you need to know to get started, so now it’s time for…

Your First Animation

Take some time to familiarize yourself with the project before you move on. The package com.raywenderlich.rocketlauncher.animationactivities contains BaseAnimationActivity and all other activities that extend this class.

Open activity_base_animation.xml file in the res/layout folder.

In the root, you’ll find a FrameLayout that contains two instances of ImageView with images: one has rocket.png and the other has doge.png. Both have android:layout_gravity set to bottom|center_horizontal to render the images at the bottom-center of the screen.

Note: You’ll do a lot of file navigation in this tutorial. Use these handy shortcuts in Android Studio to move between things easily:

Navigate to any file with command + shift + O on Mac / Ctrl + Shift + N on Linux and Windows

Navigate to a Kotlin class with command + O on Mac / Ctrl + N on Linux and Windows

Navigate to previously opened file with command + E on Mac / Ctrl + E on Linux and Windows

• Navigate to any file with command + shift + O on Mac / Ctrl + Shift + N on Linux and Windows

• Navigate to a Kotlin class with command + O on Mac / Ctrl + N on Linux and Windows

• Navigate to previously opened file with command + E on Mac / Ctrl + E on Linux and Windows

BaseAnimationActivity is a super class of all other animation activities in this app.

Open BaseAnimationActivity.kt and have a look inside. At the top are View member variables that are accessible from all animation activities:

• rocket is the view with the image of the rocket
• doge is the view that contains the Doge image
• frameLayout is the FrameLayout that contains both rocket and doge
• screenHeight will equal the screen height for the sake of convenience

Note that rocket and doge are both of type ImageView, but you declare each as a View since property animations work with all Android Views. Views are also declared as lateinit values since they will be set before they are used. They will be set in the onCreate() method of the Activity, well before they are used elsewhere.

Take a look at onCreate() to observe the code:

// 1
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_base_animation)

// 2
rocket = findViewById(R.id.rocket)
doge = findViewById(R.id.doge)
frameLayout = findViewById(R.id.container)

// 3
frameLayout.setOnClickListener {
  // 4
  onStartAnimation()
}

Here is what you’ve got going on with this code:

1. Call onCreate() on the superclass and then setContentView(...) with the layout file.
2. Find all of the views in the currently set XML layout and bind FrameLayout, rocket and doge to their corresponding variables.
3. Set a onClickListener on FrameLayout.
4. Call onStartAnimation() whenever the user taps the screen. This is an abstract method defined by each of the activities that extend BaseAnimationActivity.

This basic code is shared by all of the Activities you will be editing in this tutorial. Now that you’re familiar with it, it’s time to start customizing!