IssueTracker

Jetpack Compose version: 1.7.6

Jetpack Compose component(s) used: animation

When you use sharedElementWithCallerManagedVisibility, the shared element is always drawn in the overlay. This means it won't respect things like zIndex and will always be clipped by the overlay clip.

This is because SharedElementInternalState.shouldRenderInOverlay always returns true because it uses sharedElement.foundMatch which doesn't take the element visibility or the transition running into effect so as long as there are two matching elements in the composition, it will be rendered in the overlay.

You can work around this by not adding sharedElementWithCallerManagedVisibility if it isn't visible.

Here is an example. The expected is to see a large gray box with a small black circle on top. But what's actually shown is small gray box (overlay clip) and no black box (z-index not being respected).

@Composable
private fun Test(
    modifier: Modifier = Modifier
) {
    SharedTransitionLayout(modifier) {
        Column(Modifier.fillMaxSize()) {
            Box(Modifier.weight(1f)) {
                Box(
                    modifier = Modifier
                        .zIndex(1f)
                        .align(Alignment.Center)
                        .size(50.dp)
                        .background(Color.Black, CircleShape),
                    )
                SharedElement(visible = true)
            }
            Box(Modifier.weight(1f)) {
                SharedElement(visible = false)
            }
        }
    }
}

@Composable
private fun SharedTransitionScope.SharedElement(
    visible: Boolean,
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier
            .sharedElementWithCallerManagedVisibility(
                sharedContentState = rememberSharedContentState("sharedElement"),
                visible = visible,
                clipInOverlayDuringTransition = object : SharedTransitionScope.OverlayClip {
                    override fun getClipPath(
                        state: SharedTransitionScope.SharedContentState,
                        bounds: Rect,
                        layoutDirection: LayoutDirection,
                        density: Density
                    ): Path? {
                        return Path().apply {
                            addRect(Rect(
                                topLeft = bounds.topLeft + bounds.size.toOffset() / 4f,
                                size = bounds.size / 2f
                            ))
                        }
                    }
                }
            )
            .fillMaxSize()
            .background(Color.LightGray)
    )
}

@Preview
@Composable
private fun TestPreview() {
    Test()
}