Support for "Overlay" visibility in ChildStack for Shared Transitions

[yueban]

When navigating between two components (e.g., GalleryComponent -> PhotoComponent) using a ChildStack with a shared element transition, the "underlying" component (GalleryComponent) is removed from the composition as soon as the transition completes.

This becomes problematic when the top-level component (PhotoComponent) has a transparent or semi-transparent background (e.g., a "hero" image view with a background alpha that the user can drag or swipe away). Currently, once the transition settles, the background becomes empty/black because the previous stack item is no longer present in the ChildStack's active state.

Expected Behavior

There should be a mechanism to keep the previous component in the composition when the current component is marked as an "overlay" or "transparent," allowing it to remain visible behind the active child.

Possible Solutions

1. I tried to isolate PhotoComponent into a standalone ChildSlot and place both the ChildStack and ChildSlot inside a Box. While this successfully achieves the "overlap" effect, it breaks the shared element transition because the components reside in different AnimatedVisibilityScope contexts.
2. Since the predictive back gesture already handles this visibility perfectly during the drag (rendering multiple items at once), could this logic be extended to the settled state for specific components?

[arkivanov]

Thanks for raising. This is a known limitation. The reason why this hasn't been implemented yet is because it would make the underlying implementation much more complex and difficult to maintain. I will try to find a good solution for this, but can't promise.

Meantime, a usual workaround for this is to place your PhotoComponent inside GalleryComponent via ChildSlot. Or, if you want to avoid coupling: extract a separate PhotoRootComponent next to your parent component, where GalleryComponent would be added via childContext and PhotoComponent via ChildSlot. Then in you can use the usual Compose animation/transition APIs. With the simple ChildSlot it should quite easy to implement.

[yueban]

Thanks for the suggestion. I tried the first approach (placing PhotoComponent inside GalleryComponent via ChildSlot).

While this successfully keeps the background visible, the shared element transition is now broken. I have verified that both components are indeed sharing the same AnimatedVisibilityScope, but the animation does not trigger when the ChildSlot state changes.

It seems that when the destination is nested inside the source component via ChildSlot, the SharedTransitionLayout doesn't pick up the transition correctly. Do you have any insights into why a shared transition would fail in this nested setup despite having matching scopes?

[arkivanov]

Since it's a nested navigation, you'd need a separate SharedTransitionLayout for it. See: https://developer.android.com/develop/ui/compose/animation/shared-elements#shared-bounds

[yueban]

Thanks for the guidance! I managed to get it working.

The issue with the shared transition was actually my mistake—since both components now exist in the composition at the same time, I had a conflict with duplicate shared element keys. Once I fixed the keys, the transition started working fine.

I'll leave it to you whether to keep this open as a feature request for native 'overlay' support in ChildStack or close it since there's a viable workaround. Thanks!

[arkivanov]

Thanks for the update! It would be very useful for everyone if you could share an example code snippet.

[yueban]

Sure! I’ve forked the repo and updated the sample to demonstrate this. You can find the full changes here: yueban@4a7a5bb

The core idea is to move the PhotoComponent into a ChildSlot inside the GalleryComponent. This allows the gallery to stay in the composition while the photo is open.

To keep the shared transition working, I wrapped both the gallery list and the photo overlay in a single AnimatedContent block. This provides a shared AnimatedVisibilityScope to both components.

One detail: since both the thumbnail and the full-screen image are in the composition at the same time, I disable the sharedElement on the thumbnail once the overlay is active to avoid duplicate key conflicts.

Core UI structure:

SharedTransitionLayout {
    AnimatedContent(
        targetState = photoSlot.child,
        transitionSpec = { photoOverlayTransform }
    ) { photoChild ->
        // 1. The Gallery List
        LazyVerticalGrid(...) {
            items(childItems) { image ->
                ThumbnailContent(
                    animatedVisibilityScope = this@AnimatedContent,
                    // Avoid duplicate keys when the overlay is active
                    enableSharedElement = photoChild == null 
                )
            }
        }

        // 2. The Photo Overlay
        photoChild?.instance?.let { photoComponent ->
            PhotoContent(
                component = photoComponent,
                animatedVisibilityScope = this@AnimatedContent
            )
        }
    }
}