androidshared-element-transition

CardView border drawn after animation finished (a short delay)


I am trying to implement shared Transition element animation in my app sample.

with(sharedTransitionScope) {
        val roundedCornerAnimation by animatedVisibilityScope.transition
            .animateDp(label = "rounded corner") { enterExit: EnterExitState ->
                when (enterExit) {
                    EnterExitState.PreEnter -> 0.dp
                    EnterExitState.Visible -> TMDb_8_dp
                    EnterExitState.PostExit -> TMDb_8_dp
                }
            }
        Card(
            shape = RoundedCornerShape(roundedCornerAnimation),
            modifier = modifier
                .sharedBounds(
                    sharedContentState = rememberSharedContentState(
                        key = TMDbSharedElementKey(
                            tmdbId = movie.id,
                            type = TMDbSharedElementType.Bounds
                        )
                    ),
                    animatedVisibilityScope = animatedVisibilityScope,
                    boundsTransform = TMDbDetailBoundsTransform,
                    clipInOverlayDuringTransition = OverlayClip(
                        RoundedCornerShape(
                            roundedCornerAnimation
                        )
                    ),
                    enter = fadeIn(),
                    exit = fadeOut()
                )

The problem is when I return back from detail screen it displays CardView border with a delay, but in JetSnack sample app from Google we do not have this issue.

Do you know what I miss?

full source code is available here : https://github.com/alirezaeiii/TMDb-CMP-Playground


Solution

  • Instead of using Card, I should use my customized Box :

    @Composable
    fun TMDbSurface(
        modifier: Modifier = Modifier,
        shape: Shape = RectangleShape,
        color: Color = MaterialTheme.colors.background,
        elevation: Dp = 0.dp,
        content: @Composable () -> Unit,
    ) {
        Box(
            modifier = modifier
                .shadow(elevation = elevation, shape = shape, clip = false)
                .zIndex(elevation.value)
                .background(
                    color = color,
                    shape = shape
                ).clip(shape)
        ) {
            content.invoke()
        }
    }