Jetpack Compose Animations

Jetpack Compose is revolutionizing the way Android developers build Android applications, so it’s no surprise that it’s also revolutionizing the ways Android developers create animations! In this course, you’ll learn how to use Jetpack Compose to make practical and visually pleasing animations. You’ll learn how to use simple animations to control things like visibility while also using more complex animations to dazzle your users. By Alex Sullivan.

5 (6) · 1 Review

Download materials
Save for later
Comments
Share

Who is this for?

Students who already understand the basics of Jetpack Compose

Covered concepts

  • Using AnimatedVisibility to animate component visibility
  • Using CrossFade to fade between components
  • Using the useTransition transition animation system
  • Taking advantage of Android Studios Animation Preview
  • Customizing animation internals

Part 1: Introduction to Animations in Jetpack Compose

01
Toggle description

In this episode, learn the fundamental philosophy and principles behind animations in Jetpack Compose. Learn how they differ from animations in the old XML UI paradigm and how you can orient your thinking to make the transition from old animations to new Jetpack Compose animations smooth.

Toggle description

Learn how to animate content size changes in Jetpack Compose with using a convenient new Modifier.

Toggle description

In this episode, get introduced to the set of animate*AsState methods included in the Jetpack Compose framework to animate the rotation property of an icon in a Floating Action Button.

In this episode, learn how to use the AnimatedVisibility composable to animate in a post creation composable. You’ll also learn about the fun and easy ways you can customize the enter and exit animations of AnimatedVisibility.

Most applications have to show a loading state before they show some type of content. In this episode, learn how to use the CrossFade composable to easily fade between a loading state and the full applications social media feed.

Part 2: Advanced Animations in Jetpack Compose

Toggle description

In the world of animations, it’s often necessary to control your animation at a high level of granularity. In this episode, get introduced to the updateTransition composable and learn how it differs from the animation tools you’ve used so far.

In this episode, learn how to coordinate multiple animations via the updateTransition composable. You’ll then use your new knowledge to animate like counts as a user likes or unlikes a post in the application.

In the previous episode you used updateTransition to create a fancy new animation animating changes in a like count for a post. In this episode, learn how to pull that animation code out of the composable it’s currently in and into its own reusable composable for future use.

Toggle description

In this episode, learn how to customize the transitionSpec property of transitions to control length, interpolation, and the look and feel of the animation. Learn the difference between tween, spring, and keyframe animations, when to use each, and how to customize their properties.

One of the wonderful things about animations in Jetpack Compose is that they come with lots of tooling support. In this episode, learn how to use the Animation Preview window in Android Studio to easily test your animations.

Toggle description

In this application, you’re using the HorizontalPager composable from the Accompaniast library to show a pager of images for a post. In this episode, learn how to animate the transition between different pages, and how Jetpack Compose makes these types of animations easy.

Part 3: Designing Complex Animations

Toggle description

Lots of social media applications have put a lot of effort into making like a post a visually pleasing action. In this episode, learn what the animation we’re trying to achieve looks like and how to show the heart when a user likes a post.

Toggle description

In this episode, learn how to animate the size of the heart so that it grows from zero size up to the full heart, and how to make sure that the timing of the heart growing and collapsing is visually pleasing.

Toggle description

One of the most important things that hearts do is beat! In this episode, use the keyFrame transitionSpec to animate a heart beat into your like animation. You’ll also double down on using the Animation Preview utility to make testing the heart beat as easy as can be.

Toggle description

In this episode, learn how to add some extra pizazz to your heart animation by drawing a burst of yellow light behind the heart. You’ll learn how to combine the drawBehind modifier with your animating values to finish off this animation.