Hi, I am trying to use sharedBounds and sharedElem...

# compose

[Utkarsh Tiwari]

Hi, I am trying to use sharedBounds and sharedElement transition between two composable nav routes. Everything works fine with default value of renderInOverlayDuringTransition i.e. true, except it interferes with other animation effects on the screen.

So when I set it to renderInOverlayDuringTransition = false, the shared element at the origin disappears at the beginning of transition while the destination shared element gradually re-appears like it should. I have basically lost the crossfade after disabling this flag. I am not sure why this is happening.

renderInOverlay is false.mp4

[Doris Liu]

Sorry for the late reply.

I see the problem. In the first screen, I see this code:

// First screen
AnimatedContent(
        modifier = modifier.sharedBounds(..), // shared bounds
        label = animationLabel,
        targetState = visible,
        transitionSpec = { transition using SizeTransform(clip = false) }
    ) { show ->
        val contentAlpha = if (show) 1f else 0f
        Box {
            Box(modifier = Modifier.alpha(contentAlpha)) {
                AyncImage(modifier = Modifier.sharedElement(...)) // shared image
            }
            if (!show) {
                placeholderContent()
            }
        }
    }

This is doing a shared element between the placeholder image and the actual image within the AnimatedContent. It seems what you want is for one of the two images to match the image in the 2nd screen. I would recommend putting sharedElement on the AnimatedContent for the first screen, i.e. modifier = Modifier.sharedBounds(keyForBounds).sharedElement(keyForImage)

[Doris Liu]

Also, you might notice a second issue (in first video at [00:10]) and it's that the placeholder of the AsyncImage (from coil) flashes for a second when I click a card for the very first time. However that doesn't happen when I re-open the same card again. It's strange.

This is likely due to a higher res image being requested due to the larger size for the image to fill. Our recommendation for this issue is to specify a memory cache key for the image, so that coil can use a lower res image in place before the high res image is loaded. See here for details: https://developer.android.com/develop/ui/compose/animation/shared-elements/common-use-cases

[Utkarsh Tiwari]

Thank you Doris. I was able to hack around the jumpy behavior by applying

.renderInSharedTransitionScopeOverlay(zIndexInOverlay = 1f)

only after the initial choreography animation has finished running.

Let me check the coil recommendation for image cache key.

[Utkarsh Tiwari]

@Doris Liu Another question. My designer wants me to implement a custom S curve movement of shared image between screens as shown in the video below.

In the documentation, the example shows how one can use ArcMode for the arc motion.
Apparently there are only 3 types of ArcModes. If I used ArcMode.ArcBelow, it looks somewhat similar but not exactly what my designer wants.
Is there way to implement custom path of the shared element transition animation?

custom animation path.mov

[Doris Liu]

You could try using the Spline based Keyframe: keyframesWithSpline

[Utkarsh Tiwari]

Thank you Doris! Let me try that as well.