Android Animations and Transitions with Jetpack Compose

Explore animation APIs provided by Jetpack Compose to create a smooth and intuitive user experience in a declarative way. Animations add a polished look to your app, which gives it a higher-quality look and feel.

First App Name: Compose Motions

Compose Motions is a tutorial based app which facilitates you to learn various compose animations based on the flow chart provided in the official Android documentation. You can use the app as a guide to decide which animation API to employ for different scenarios, and also get a sense of what each animation looks like when implemented.

Second App Name: Voices

The ‘Voices’ app is a voice recorder that users can use to record their voices and share them with apps like WhatsApp and Telegram. It supports recording in different formats like MP3, M4A and AMR based on the user’s preference configured in the settings screen. The fundamental animation APIs introduced in the Compose Motions app will be practically implemented in this app.

Content Author: Mehdi Haghgoo
Course Instructor: Mehdi Haghgoo
Level: Beginner
Course Duration: 120 minutes
Sample Project Included: Yes
Learning Path: Android’s Modern Toolkit: Jetpack Compose

Course Description

In this course, you will learn how to use different animation APIs in Jetpack Compose. First, you’ll get a high-level overview of various animation APIs available to use with Compose UI toolkit such as high-level and low-level animations. Next, you’ll dive into the details of those APIs and explore AnimatedVisibility, AnimatedContent, animateContentSize, Crossfade, updateTransition, infiniteRepeatable, animate*AsState, Animation, AnimationState, and Animatable. Once you get familiar with the fundamentals, you’ll learn how to use them in a real-world application (a complete application built with Android architecture components including Room database, Hilt dependency injection, DataStore, and ViewModel and following Android development best practices). You will also learn how to use the Lottie library to add beautiful and nicely crafted animations to your Jetpack Compose UI. Last but not least, you will learn important tips and best practices to optimize your Compose animations. By the end of the course, you will have a strong grasp of Jetpack Compose’s animation capabilities and techniques and be able to confidently use various animation APIs and techniques including list animations, gesture animations, and transitions.

By the end of the course you will have mastered:

High-level animations including animate*AsState, AnimatedContent, Crossfade, and updateTransition.
Low-level animations like animate, AnimationState, and Animatable.
Use simple high-level animations to animate components
Use low-level animations to animate components
Customise animations by providing a custom AnimationSpec to animation APIs
Animate list items in Jetpack Compose
Implement gesture-based animations using pointerInput modifier and Animatable
Make use of transition APIs in Jetpack Compose to animate between two or more states
Make infinite transitions
Use Lottie to add polished pre-designed animations to Jetpack Compose UI
Animate navigation between screens

Mehdi Haghgoo

Content Author & Course Instructor

About

I am Mehdi Haghgoo, a software developer and instructor. I love Android programming and keep a close eye on the latest trends in the Android industry. Learning about the latest technologies and sharing my knowledge with others through teaching is one of the most enjoyable things in my life.