Shared element transition implementation in Android app

Implementing Shared Element Transition in Android Applications

Shared Element Transition in Android is a mechanism where a View from one screen visually "moves" to another. A news list, a card with an image—user taps, and the image smoothly expands to a full-screen detail view. It doesn't disappear and reappear; it moves with animation of shape, size, and position.

Available via Fragment Transitions API (traditional) and Compose SharedTransitionLayout (modern).

Fragment Transitions: Activity and Fragment

Between Activity:

// From ListActivity on item click:
val intent = Intent(this, DetailActivity::class.java)
intent.putExtra("productId", product.id)

val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
    this,
    imageView,                    // view on current screen
    "product_image_transition"    // transitionName—matches on both screens
)
startActivity(intent, options.toBundle())

// In DetailActivity:
ViewCompat.setTransitionName(detailImageView, "product_image_transition")
// postponeEnterTransition() + startPostponedEnterTransition() if image loads async

If the image loads via Glide or Coil, use postponeEnterTransition() before loading starts and startPostponedEnterTransition() in the load callback. Otherwise, animation starts before the image appears, and transition works with a placeholder.

// In DetailActivity.onCreate():
postponeEnterTransition()

Glide.with(this)
    .load(imageUrl)
    .listener(object : RequestListener<Drawable> {
        override fun onResourceReady(...): Boolean {
            startPostponedEnterTransition()
            return false
        }
        override fun onLoadFailed(...): Boolean {
            startPostponedEnterTransition() // also on error
            return false
        }
    })
    .into(detailImageView)

Between Fragment via Navigation Component:

// In ListFragment:
val extras = FragmentNavigatorExtras(
    imageView to "product_image_transition"
)
findNavController().navigate(
    R.id.action_list_to_detail,
    bundleOf("productId" to product.id),
    null,
    extras
)

// In DetailFragment.onCreate():
sharedElementEnterTransition = TransitionInflater.from(requireContext())
    .inflateTransition(android.R.transition.move)
postponeEnterTransition()

android.R.transition.move is the standard transition, includes bounds change, translation, and clip bounds. For custom behavior, use TransitionSet with ChangeBounds, ChangeImageTransform, ChangeClipBounds.

Return: Shared Element automatically animates return transition on popBackStack() or back button. sharedElementReturnTransition can be configured separately—e.g., different easing for the reverse.

Jetpack Compose: SharedTransitionLayout

Compose 1.7+ (stable) introduced SharedTransitionLayout and SharedTransitionScope:

SharedTransitionLayout {
    NavHost(navController, startDestination = "list") {
        composable("list") {
            AnimatedVisibility(visible = true) {
                ProductList(
                    onProductClick = { product ->
                        navController.navigate("detail/${product.id}")
                    },
                    sharedTransitionScope = this@SharedTransitionLayout,
                    animatedVisibilityScope = this@AnimatedVisibility
                )
            }
        }
        composable("detail/{id}") { backStackEntry ->
            AnimatedVisibility(visible = true) {
                ProductDetail(
                    productId = backStackEntry.arguments?.getString("id"),
                    sharedTransitionScope = this@SharedTransitionLayout,
                    animatedVisibilityScope = this@AnimatedVisibility
                )
            }
        }
    }
}

// In ProductList:
@Composable
fun ProductCard(
    product: Product,
    sharedTransitionScope: SharedTransitionScope,
    animatedVisibilityScope: AnimatedVisibilityScope,
) {
    with(sharedTransitionScope) {
        AsyncImage(
            model = product.imageUrl,
            modifier = Modifier.sharedElement(
                rememberSharedContentState(key = "product-image-${product.id}"),
                animatedVisibilityScope
            )
        )
    }
}

The key must match on both screens. sharedElement handles geometric transition, sharedBounds when the container also smoothly changes size.

Common Mistakes

transitionName set on only one screen—transition silently fails. Always check both directions.

RecyclerView with many elements: call setTransitionName in onBindViewHolder with unique name per item (e.g., "product_image_${product.id}"). Using the same name means Android doesn't know which view to animate.

Shared Element over system navigation (edge-to-edge): if view is near the edge and content behind navigation bar, WindowInsetsCompat may offset layout, and transition final position differs from actual. Fixed via proper inset application through ViewCompat.setOnApplyWindowInsetsListener.

Timeline

Shared Element Transition between two screens (image + title) takes 1 day. With async image loading support, custom transition set, and reverse animation, allow 1–2 days. Cost is calculated individually.