Working with Animations

In the previous chapters, I introduced you to many technical aspects of Jetpack Compose and showed you how to write well-behaving and good-looking apps. Now, adding animations and transitions will make your apps really shine! Compose simplifies the process of adding animation effects greatly compared to the old View-based approach.

In this chapter, you will learn important animation-related application programming interfaces, see animations of single and multiple properties, look at transitions between composables in action, and understand the relationship between state changes and visual interactions.

The main sections of this chapter are as follows:

• Using animation to visualize state changes
• Showing and hiding UI elements with animations
• Spicing up transitions through visual effects

We start by using animations to visualize state changes. Think of a simple use case: clicking a button might change the color of a UI object. However...

Technical requirements

Please refer to the Technical requirements section in Chapter 1, Building Your First Compose App, for information about how to install and set up Android Studio, as well as how to get the example apps. This chapter covers the AnimationDemo example.

Using animation to visualize state changes

An app’s state is app data that may change over time. In a Compose app, state (for example, a color) is represented by State or MutableState instances. State changes trigger recompositions. The composable StateChangeDemo() shows a button and a box. Clicking the button toggles the color of the box between red and white by changing state:

@Composable
fun StateChangeDemo() {
  var toggled by remember {
    mutableStateOf(false)
  }
  val color = if (toggled)
    Color.White
  else
    Color.Red
  Column(
    modifier = Modifier
      .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    Button(onClick = {
      toggled = !toggled
    }) {
  ...

Showing and hiding UI elements with animations

Your user interface will often contain information that need not be visible all the time. For example, in an address book, you may want to show only key attributes of a contact and present detailed information upon request, typically after a button click. However, just showing and hiding the additional data feels sudden and abrupt. Using animations leads to a more pleasant experience, so let’s investigate this more.

Understanding AnimatedVisibility()

In this section, we will look at the AnimatedVisibilityDemo() composable function. Like StateDemo(), SingleValueAnimationDemo(), and MultipleValuesAnimationDemo(), it uses a Column(), which contains a Button()and a Box(). This part of the code is simple and straightforward, so there is no need to repeat it in print. The button toggles a state, which starts the animation. Let’s see how this works:

AnimatedVisibility(
  visible = visible,
  enter =...

Spicing up transitions through visual effects

So far, I have shown you animations that modify certain aspects of a UI element, such as its color, size, or visibility. However, sometimes you may want to exchange parts of your user interface. This is where Crossfade() comes in handy. It allows you to switch between two composable functions with a crossfade animation. Let’s look at the CrossfadeAnimationDemo() composable in Figure 8.2 to see how this works:

Figure 8.2 – CrossfadeAnimationDemo() in Android Studio split view

A switch toggles between two screens. As we are focusing on animation, I kept the Screen() composable very simple. Here’s how it is implemented:

@Composable
fun Screen(
  text: String,
  backgroundColor: Color = Color.White
) {
  Box(
    modifier = Modifier
      .fillMaxSize()
      .background(color =...

Summary

This chapter showed you how easy it is to use Jetpack Compose to enrich your apps with animations and transitions. We started by using simple animations to visualize state changes. For example, I introduced you to animateColorAsState(). We then used updateTransition() to obtain Transition instances and invoked extension functions, such as animateDp() and animateFloat() to animate several values based on state changes simultaneously.

The Showing and hiding UI elements with animations section introduced you to the AnimatedVisibility() composable function, which allows you to apply enter and exit transitions. They are played back while the content appears or disappears. You also learned how to animate size changes using the animateContentSize() modifier.

In the final main section, Spicing up transitions through visual effects, we used the Crossfade() composable function to switch between two layouts with a crossfade animation. Furthermore, you learned about AnimationSpec...

Exercise

When adding animations to your app, you should make sure that they behave the way you want them to. Android Studio allows you to examine every frame of an animation in the Animation Preview. If a composable function with animations can be inspected using the Animation Preview, you will spot an icon labeled Start Animation Preview (Figure 8.4). Which APIs are supported depends on your Android Studio version.

Figure 8.4 – Launching the Animation Preview

Let’s try this cool feature. Please open the CrossfadeAnimationDemo() composable in the Animation Preview (Figure 8.5)

Figure 8.5 – Animation Preview showing CrossfadeAnimationDemo()

You can then inspect every frame by moving the handle in the timeline, change the animation parameters (which become visible after unfolding the corresponding animation), and start and stop all animations at once.