Exploring AnimatedContent and Crossfade in Jetpack Compose

Jetpack Compose — Animation Notes: 4

Photo by Clay Banks on Unsplash

Jetpack Compose is a revolutionary update for building an android app UI. It leveraged the concept of declarative UI and brought the fun into building UI with Kotlin — a dream for many Android devs. If you’re new to Jetpack Compose, I recommend you to please go through the following articles:

• Jetpack Compose Components (Part 1)
• Build Android Layouts in JetPack Compose

To learn more about animations in jetpack composition, please read the following article in this animations series:

• “Jetpack Compose — Animation Notes: 1” — Exploring AnimatedVisibility in Compose
• “Jetpack Compose — Animation Notes: 2” — Building Fab Menu with Compose AnimatedVisibility and Animatable
• “Jetpack Compose — Animation Notes: 3” —Exploring LaunchedEffect and InfiniteTransition in Compose
• “Jetpack Compose — Animation Notes: 4” — You’re here now

With that being said, let’s get started.

Introduction

We’re trying to implement a view with two buttons to increase and decrease the number by 1. The result will be displayed in the middle of the buttons with vertical slide-in and out animations. Have a look at the result:

We’re going to achieve this via AnimatedContent compose API.

AnimatedContent

AnimatedContent is a container that automatically animates its content when targetState changes. Have a look at the signature:

1. targetState : It’s a generic type, and whenever the value changes, the animation kicks up.
2. modifier : Modifier links the content inside this composable with…