Learning Android Development

Animation Component with Compose

How to make your Android content more interesting

Hello, fantastic person on the internet! Hope you’re doing well.

As users become increasingly accustomed to fluid animations and intuitive interactions, incorporating animation into your app has become a pivotal element for success.

Animate*AsState

This API should be used when animating State changes. Let’s see how we can do this in practice.

You just need to declare your variable as animate*AsState. In my case, I am going to animate a color:

I am simply setting a color with the color variable, and the backgroundColor that we are going to use is declared using animateColorAsState, which takes the color as a parameter.

Now, let’s create two buttons, and upon clicking them, we will set another value to the color variable:

You are going to see something like that:

Animating Content Size

Expanding the content of a component is not a surprise to us, but you can make it even prettier by adding some animation.

You just need to add animateContentSize to the modifier of your card

Here is my card without any animation. It simply expands when you click on it:

To animate, I am going to call the animateContentSize on the modifier's column:

Animating Visibility

I love how it’s easy to create animated views with Jetpack Compose. Have you ever wondered how to animate elements when scrolling through a list? Let’s do this.

First things first, I am going to create a lazy column list. If you don’t know how to develop this, just check out my article about list and grid layouts:

To create animated visibility, we can utilize The AnimatedVisibility method. This method triggers the animation component each time the associated Boolean value changes.

I’m going to animate two components: a floating action bar and a text. Let’s create a function responsible for animating each of these views:

visible: Set this to determine if the animation should occur or not.

exit: Use it to control how the animation occurs when the component is disappearing.

enter: Use it to control how the animation occurs when the component is appearing.

Now, let’s call those functions in our main activity using the scaffold methods.

First, the floating action button :

Now, let’s refer to the animated text in the content parameter:

Last but not least, let’s call the list:

Conclusion

There are many other animations you can create with Compose.

If you all are interested, I can demonstrate and provide those customizations.

integrating animation directly into Compose, simplifies the process and optimizes performance. Embracing this technology opens up a world of creative possibilities and enhances the user experience, ensuring a promising future for Android UI development.

All the code and examples it is in this repository.

Happy coding ❤