Advanced layout animations in Compose (Shared elements)

Compose is the recommended modern UI toolkit for Android that makes it easy to create beautiful and delightful user interfaces. A new powerful feature of Compose is the Lookahead layout system. Using this new layouting mechanism, we can create powerful layouts that animate fluidly.

In this talk, we will dive into the depths of using the new shared element transitions in Compose with feature rich examples. We will also explore how Lookahead works and what changes it brings to the current layout system, and the reasons behind certain API decisions.

Chapters:
0:00 Introduction
0:39 Basic layout animations
1:11 How do layout animations work
3:18 Lookahead
4:58 Use cases for Lookahead
5:56 Shared elements
6:39 SharedTransitionLayout
8:08 Modifier.sharedElement
9:02 Custom animation specs
9:40 Modifier.sharedBounds
11:43 ResizeMode
12:52 Overlay
15:37 Modifier.skipToLookaheadSize
16:29 Clipping
18:53 Modifier ordering
19:54 Predictive Back
20:53 Shared elements under the hood
21:09 Composition Phase
22:14 Layout Phase
26:27 Drawing Phase
26:49 Overlay under the hood
28:02 Challenges with overlay
29:42 Summary

Resources:
Learn more → https://goo.gle/compose-shared-elements

Watch more Android Conference Talks → https://goo.gle/ConferenceTalks
Subscribe to Android Developers → https://goo.gle/AndroidDevs

#Featured #AndroidDev #JetpackCompose


Speakers: Rebecca Franks Doris Liu
Products Mentioned: Android Jetpack Compose