Explore advanced layout animations in Jetpack Compose, focusing on shared element transitions, in this 31-minute conference talk by Android Developers. Dive deep into the new Lookahead layout system and its impact on creating fluid, powerful layouts. Learn about SharedTransitionLayout, custom animation specs, and various modifiers like sharedElement, sharedBounds, and skipToLookaheadSize. Understand the intricacies of overlay, clipping, and modifier ordering. Gain insights into Predictive Back and the underlying mechanisms of shared elements, including composition, layout, and drawing phases. Discover the challenges with overlay and how to overcome them. Perfect for Android developers looking to enhance their UI animation skills using Compose.
Overview
Syllabus
Introduction
Basic layout animations
How do layout animations work
Lookahead
Use cases for Lookahead
Shared elements
SharedTransitionLayout
Modifier.sharedElement
Custom animation specs
Modifier.sharedBounds
ResizeMode
Overlay
Modifier.skipToLookaheadSize
Clipping
Modifier ordering
Predictive Back
Shared elements under the hood
Composition Phase
Layout Phase
Drawing Phase
Overlay under the hood
Challenges with overlay
Summary
Taught by
Android Developers
Related Courses
-
Animations in Compose - From Basic Primitives to Shared Element Transitions
-
Jetpack Compose: Building Modern UIs with Declarative Toolkit
-
How to Implement a Shared Element Transition in Jetpack Compose
-
Practical Magic with Animations in Jetpack Compose
-
Android Jetpack Compose Course - Building User Interfaces with Kotlin
-
Lazy Layouts in Jetpack Compose - Optimizing Scrolling Lists
