Shared Element Transition in Jetpack Compose

Grab a coffee ☕, and let me introduce you to the new Shared Element Transition added in Jetpack Compose. We’ll build a small list of coffees that will use this nice looking transition!

Dependency

The SharedTransitionLayout API is available for Compose UI 1.7.0-alpha07 and above. So add this in your :app/build.gradle.kts .

dependencies {
    // Compose UI
    implementation("androidx.compose.ui:ui:1.7.0-alpha08")
}

Introduction to the API

This introduces three new things:

1. SharedTransitionLayout — This is required to enable the transition animation between the composables.
2. Modifier.sharedElement() — This should be used when you need to match the other composable.
3. Modifier.sharedBounds() — This should be used as the container bounds for where the transition should take place.

Build the app

Let’s start by creating the Coffee data class .

data class Coffee(
    val id: Int = Random.nextInt(),
    val name: String = "",
    val description: String = "",
    @DrawableRes val image: Int
)

After that, let’s go to MainActivity and let’s create the coffee list.