Animating our Custom UI with Jetpack Compose Animations
In a previous post, we managed to create a custom piece of UI using Jetpack Compose. Another promise made in that post was to easily animate it. The purpose of this entry is to fulfill that promise. So let’s delve into how we can animate our composable to enhance its visual appeal.
Our goal is to introduce animations that will bring our UI to life. Therefore, we will proceed step by step, explaining how to achieve each of them.
How to animate in Compose
Animating your UI in Compose depends on what and when you want your animation to trigger, but you have control over every aspect of the animation. To keep it concise and practical, we will focus on a few common types of animations that you are likely to encounter. These examples will cover various scenarios and provide a solid foundation for understanding Compose animations.
Let’s animate the content visibility
The first thing we’ll do is add some visibility updates to our content, ensuring that it doesn’t just pop up in the UI without notice. Thankfully, achieving this in Compose is very straightforward.
Let’s first extract the content that is displayed on top of our Crypto Card Background:
With this extraction we can easily see how the background is in its own composable and the content on top of it now:
Now that we have tidied up our implementation, let’s explore how to animate the visibility of our content. Jetpack Compose offers us the AnimatedVisibility Composable, which allows us to wrap around the element we want to animate and customize its visibility according to our needs.
Let’s do just that! Following the diagram at the top of the page, our desired animation for this specific scenario involves animating the appearance and disappearance of the content within our layout. It fits perfectly with what we want to accomplish.
But nothing happens…
The concept behind using AnimatedVisibility is that an update is triggered by something. It could be a click or an event within our app. However, in this particular case, we want the animation to occur only once when the UI is displayed. To achieve this, we need to update the visible mutable boolean using a LaunchEffect, which will delay this action for a brief 300 ms:
So the content appears with an animation that is triggered 300 ms after loading the screen. That’s great! However, we want it to appear from the bottom and have a fade-in effect. To accomplish this, we can utilize the enter parameter of the AnimatedVisibility composable, which enables us to create any desired animation for the appearance:
Let’s animate the top right circle shape
Now that the content appears as intended, we will proceed to add a subtle animation to the gray circle in the top right corner. Our aim is to make it transition smoothly from half its original size to the original size.
We’ll be following one of the examples of this awesome video:
The way we’ll apply those concepts for our scenario is going to be:
- We create an enum with the start state of our circle and the end state
- We declare a mutable state variable with remember that will hold the current state of our circle
- Create a transition that will describe how our circle will behave when going from one state to the other
- Use LaunchedEffect to trigger a 500ms delayed animation that will hapen only once and will animate the radius of our circle
The enum is the easiest step, we just want to be able to define the initial and final state of our animation as an enum.
Next, lets declare a new variable into our CryptoCardBackground Composable so that compose can remember the current state of our circle through any future re-composition:
We now define our transition, a.k.a.; how we want compose to animate our circle from one state to the next:
What we do here Is defining a transitionSpec that will animate our Float value that we use for the circle radius following a spring effect. And finally we define which is the target radius for each state which in this case is radius * 0.8f for our full circle size as this was the original size of it.
We add our LaunchedEffect to trigger the animation automatically after half a second:
And last but not least we update our original circle so that instead of the radius * 0.8f now uses our circleRadius variable that will be animated.
Enough talk! Let’s see it in action
Before and After
They are subtle adjustments but they improve the big picture:
This animations are only scratching the surface of what you can do with compose but they served for our small example on how to make our Composable a bit more animated.
If you are interested in the final Composable you can grab It from here: https://github.com/zurche/finance-app-ui/blob/main/financeUI/src/main/java/com/az/financeui/composables/CryptoCard.kt
I hope you learned something new today and thanks for reading this far!
