No history yet

Animation Basics

Bringing Your App to Life

Static apps get the job done, but animations make them feel responsive and alive. Thoughtful motion can guide a user's attention, provide feedback on actions, and make the entire experience smoother. In Android, you have a few different toolkits for adding these effects, each suited for different tasks.

Three Ways to Animate

Android provides three main systems for creating animations. Understanding the difference is key to choosing the right tool for the job.

1. Property Animation: This is the modern, most flexible framework. It works by changing an object's actual property values over a set amount of time. If you change a button's translationX property, you're not just changing where it's drawn—you're changing where it is. This means the button's clickable area moves with it. This is the recommended system for most UI animations.

For example, you can use an ObjectAnimator to change the alpha (transparency) property of a view from fully opaque (1.0) to fully transparent (0.0).

import android.animation.ObjectAnimator
import android.view.View

fun fadeOut(view: View) {
    ObjectAnimator.ofFloat(view, "alpha", 1f, 0f).apply {
        duration = 1000 // 1 second
        start()
    }
}

2. View Animation: This is the older, simpler framework. It only animates View objects and works by transforming how the view is drawn. It can't animate properties of other types of objects. A key limitation is that it only changes the visual representation of the view, not its actual properties. If you move a button across the screen, the button will appear to move, but its clickable area remains in the original position. Because of this, it's generally better to use the property animation system.

View animations are often defined in XML files within the res/anim/ directory.

<!-- res/anim/scale_up.xml -->
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.0"
    android:toXScale="1.5"
    android:fromYScale="1.0"
    android:toYScale="1.5"
    android:duration="500" />

3. Drawable Animation: This system creates a frame-by-frame animation, much like a flipbook. You provide a sequence of Drawable resources (images), and the system displays them one after another. It's perfect for things that can't be achieved by transforming a single view, like a custom loading spinner or a character walking.

You define the sequence of frames in an XML file, typically in res/drawable/.

<!-- res/drawable/loading_animation.xml -->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/frame1" android:duration="100" />
    <item android:drawable="@drawable/frame2" android:duration="100" />
    <item android:drawable="@drawable/frame3" android:duration="100" />
</animation-list>

Then, in your code, you can set this drawable as a view's background and start the animation.

val imageView: ImageView = findViewById(R.id.loading_spinner)
imageView.setBackgroundResource(R.drawable.loading_animation)

val animationDrawable = imageView.background as AnimationDrawable
animationDrawable.start()

Simple UI Animations in Action

Let's look at how to implement a few common UI animations using the property animation framework. These small touches can make an interface feel much more dynamic.

A fade animation adjusts the transparency of a view, making it appear or disappear smoothly. This is done by animating the alpha property.

// Fades a view in
ObjectAnimator.ofFloat(myView, "alpha", 0f, 1f).apply {
    duration = 500
    start()
}

Next up is scaling.

A scale animation grows or shrinks a view. This is useful for indicating that an item has been selected or to draw attention to it. We animate the scaleX and scaleY properties.

// Scales a view to 1.5x its size and back
ObjectAnimator.ofFloat(myView, "scaleX", 1f, 1.5f, 1f).start()
ObjectAnimator.ofFloat(myView, "scaleY", 1f, 1.5f, 1f).start()

Finally, let's move something.

A translate animation moves a view from one position to another. You can use this to slide elements into or out of the screen. This is done by animating properties like translationX or translationY.

// Slides a view 100 pixels to the right
ObjectAnimator.ofFloat(myView, "translationX", 0f, 100f).apply {
    duration = 300
    start()
}

By combining these simple animations, you can create engaging and intuitive user interfaces. Even subtle movements on buttons, menus, and other elements provide valuable feedback to the user.

Let's review the main animation types before you're tested on them.

Ready to check your understanding?

Quiz Questions 1/5

What is the primary purpose of using animations in an Android app's user interface?

Quiz Questions 2/5

Which class from the property animation framework would you use to change a view's alpha property from 1.0 to 0.0 to create a fade-out effect?

Mastering these basic animation types is the first step. With this foundation, you can build interfaces that are not just functional, but also delightful to use.