Shared Element Transitions in Jetpack Compose: concrete examples, how to implement them, and the mechanism behind

Have you heard of Shared Element Transitions? Shared Element Transitions are a type of screen transition that allows you to achieve beautiful screen transitions by smoothly moving or changing specific components when transitioning between screens. If you were to try to implement this with Jetpack Compose, you would probably have to work hard using LookaheadScope or something similar. In fact, apps such as Google Play Store, which are now using Jetpack Compose, no longer have Shared Element Transitions since they migrated to Jetpack Compose. This shows how difficult it is to implement. This was the situation until recently Jetpack Compose finally introduced experimental features such as `SharedTransitionLayout` and `Modifier.sharedElement()` in Compose 1.7.0-beta, making it easier to implement Shared Element Transitions than before. We have already started implementing it in our products, and while it is very easy to write, there are some points to be careful about. In this session, we will explain when to use Shared Element Transitions, before providing knowledge and insight on how to use Shared Element Transitions in Jetpack Compose, how to set it up and how it works, so that hopefully anyone will be able to implement it easily. (Translated by the DroidKaigi Committee)

• 

  hyoga DeNA, Android Engineer