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
9:02 Custom animation specs
11:43 ResizeMode
12:52 Overlay
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:

#Featured #AndroidDev #JetpackCompose

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

[JimPekarek]

Thanks for showing off Shared Element Transitions with a non-trivial example. This was really well-presented

[HoussamElbadissi]

Amazing presentation! Super clear and to the point. Love the new APIs, as idiomatic and powerful as ever!

[monsterbrain]

It's looking great and found this really adding a smoothness to the app. Keep up the great work.

[occasus]

These are the kinds of helpful videos that I look forward too.

[PauliDev]

I loved your presentation and Droidcon Berlin! That was superb informative and now I'm glad those jetsnack examples are online and I'm able to experiment with them. I did my first sharedElementTransition today! These are the "fireworks" developers love Compose for!

[carlfe]

I might finally use shared element transitions. Great work making this easy to customize and implement.

[oleksee]

My god this is complex and not obvious stuff over here. Haven't had much chance to work with animations in Compose so that makes it an extra layer harder for me to understand. Nevertheless thank you for the helpful video!

[__J____ff]

yes this is really well presented ! must be the very precise/accurate use of the visuals and the perfect examples.

[evilexus]

How something as "simple as animations" can add problems and add new features to fix those problems, What irony don't you think ?😅
Anyway thanks for the well explained tutorial ✌

[VatkLI]

Why there is no blur background effects in compose built in libraries. It would be great for designs.

[justmeagain]

I always aspire software engineers, you all are chads in the industry

[deviantstudio]

i hope all these tricks will be documented in the docs

[aligold]

شكرا على الشرح انا تعلم برمجة تطبيقات الموبايل من النت ولدي تطبيقات شكرا على مجهودكم ❤

[omyadav]

Very nice 👍 thanks for your support help me

[ahmadprogrammer]

I have a first screen with a list of images, and when I click on any image, it moves to another screen with a HorizantelPager that displays all images with the HorizantelPager configured to start from the index of the image that was clicked, and a SharedElement is applied to this image. Now, if I change the image that the SharedElement was applied to in the second screen (HorizantelPager Screen) by swiping left or right, the SharedElement will not occur when I return to the first screen (which contains the list of images), but the SharedElement will be applied to the image that was clicked on the first page. I want the SharedElemnt to be applied even if I change the image in the second screen (HorizantelPager). I hope that I was able to describe the problem correctly 😅 Is there a solution to this problem?

[omyadav]

Google meet great success Android phone Android

[omyadav]

ANDROID DEVICE ID SUPPORT PRIVACY POLICY WITH VISITORS

[techietoons]

You people keep on making things complex. Flutter is much better for animations. Developer can focus on implementing the business logic, rather that these low level managements.

[jshoes]

1) Compose Animation can still be janky.