Exploring AnimatedContent, and Crossfade in Jetpack Compose | by Siva Ganesh Kantamani | Nov, 2022

Jetpack Compose – Animation Notes: 4

photo by clay bank Feather unsplash

Jetpack Compose is a revolutionary update to building Android app UIs. It leveraged the concept of declarative UIs and brought the fun into building UIs with Kotlin – a dream for many Android devs. If you are new to Jetpack Compose, I suggest you read the following articles:

To learn more about animations in Jetpack Composition, please read the following articles in this Animation series:

With that being said, let’s get started.

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

counter with subtraction and addition buttons

we’re going to get through this AnimatedContent Write API.

AnimatedContent is a container that automatically animates its contents targetState Change. Have a look at the signature:

  1. targetState : This is a generic type, and whenever the value changes, the animation is triggered.
  2. modifier The : modifier binds the content inside this composable to its parent.
  3. transitionSpec : this is a ContentTransform types used to define EnterTransition And ExitTransitions mainly.
  4. contentAlignment : to define the alignment of the content inside content Composable
  5. content : Compatible with targetState A parameter to provide the updated value.

Crossfade toggles between layouts based on its value change targetState parameter with a crossfade animation. Have a look at the signature:

  1. targetState : This is a generic type, and whenever the value changes, the animation is triggered.
  2. modifier The : modifier binds the content inside this composable to its parent.
  3. animationSpec – The AnimationSpec To configure animation.
  4. content : Compatible with targetState A parameter to provide the updated value.

To better understand this, we’ll create a composable with a crossfade animation to switch between two icons on a button click. have a look:

a button.  Toggle on party and work.  When the button turns into a party, get the symbol of the celebration.  When toggling at work, take a suitcase.

Let’s start with the basic design. We need two buttons: plus and minus. For this we use Box and Icon composables. let’s create a function CircleButton To reuse for both buttons. Three parameters are needed:

  1. imageVector : To define the icon to display.
  2. contentDescription : Not required, for accessibility. best practice.
  3. clickable : Boolean value to determine whether the button is clickable.
  4. click :lambda function to be invoked on click.

Take a look at the implementation:

Now we can use this function with related content in root composable Row Fluff them side by side. have a look:

@Composable
fun NumberUpdateAnimationView()

Row(
verticalAlignment = Alignment.CenterVertically,
)
k
CircleButton(
imageVector = Icons.Default.Remove,
contentDescription = "Minus",
)

Spacer(modifier = Modifier.size(16.dp))

CircleButton(
imageVector = Icons.Default.Add,
contentDescription = "Add"
)

Take a look at the output:

then we need to design Text To display an integer value. we use remember with mutableStateOf to define it. We will update the value when the user clicks on the plus button and vice versa when the user clicks on the minus button. have a look:

Take a look at the output:

Now it’s time to add animations to content changes. we need to wrap first Text buildable inside AnimatedContent and use the result value to update the text. Take a look at the code:

AnimatedContent(
targetState = displayNumber,
) _displayNumber ->
Text(
text = "$_displayNumber",
fontSize = 24.sp,
fontWeight = FontWeight(500),
color = Color.Black
)

This will apply the default animation to any value targetState, Take a look at the output:

Our goal here is to add a custom animation like a scoreboard. we use transitionSpec Parameters to define custom enter and exit animations on content change. Take a look at the code below:

ContentTransform Used to define entry and exit animations. We mixed two animations slideIn with fadeIn to enter the animation of the new value and slideOut And fadeOut for exit animation. This isreversed when the price is decreasing. Take a look at the output:

counter with subtraction and addition buttons

See the code with all the pieces together:

Now that we’ve learned how to animate content, the next section of this article is about animating layout changes with crossfade animation.

To keep it simple, we are maintaining two states – Work and Party – through an enum class to represent the appropriate icon. We also have a button to switch between states. Take a look at the Enum class:

enum class ConTentType
WORK, PARTY

Before getting into the design part, we need a few extensions:

  1. getOpposite Returns the alternate state of the function ConTentTypesuppose it is WORK so it will come back PARTY,
  2. getDisplayString – It is used for display strings based on state.
fun ConTentType.getOpposite() = run 
when(this)
ConTentType.PARTY -> ConTentType.WORK
ConTentType.WORK -> ConTentType.PARTY

fun ConTentType.getDisplayString() = run
when(this)
ConTentType.PARTY -> "Party"
ConTentType.WORK -> "Work"

Let’s start with a basic design based on some icons ConTentType State and a button to update the state. Take a look at the code:

Now, let’s have a look at the output:

Now we have to wrap the when block with crossfade api and pass contenttype as targetStateso that whenever there is a change in contenttype Crossfade animation trigger. have a look:

Please be careful to use targetState As a result of which the work is conducted. in our case, it is _contentType, Take a look at the output:

If the animation is too fast, you can control the duration animationSpec parameter of Crossfade, we can pass tween With duration depending on requirements.

Crossfade(
targetState = contenttype,
animationSpec = tween(durationMillis = 500)
)

Now take a look at the output:

a button.  Toggle on party and work.  When the button turns into a party, get the symbol of the celebration.  When toggling at work, take a suitcase.

That’s all. We have implemented a scoreboard animation and a crossfade animation between layouts AnimatedContentAnd Crossfade API provided by Jetpack Compose.

  1. Please click here to see the full code for the animated content implementation.
  2. Please click here to see the full code of the crossfade implementation.

Animations are an interesting topic in Jetpack Compose to bring a more fluid nature to the UI. Stay tuned for more articles on animations in Jetpack Compose.

That’s all for today. I hope you learned something useful. Thank you for reading.

Leave a Reply