Multiple shared transition element Improvements

Author: mr3y-the-programmer

app/src/main/kotlin/com/mr3y/podcaster/ui/screens/DownloadsScreen.kt

@@ -47,8 +47,12 @@ import com.mr3y.podcaster.core.sampledata.EpisodesWithDownloadMetadata
 import com.mr3y.podcaster.ui.components.AnimatedAsyncImage
 import com.mr3y.podcaster.ui.components.DownloadButton
 import com.mr3y.podcaster.ui.components.LoadingIndicator
+import com.mr3y.podcaster.ui.components.LocalAnimatedVisibilityScope
+import com.mr3y.podcaster.ui.components.LocalSharedTransitionScope
 import com.mr3y.podcaster.ui.components.TopBar
+import com.mr3y.podcaster.ui.components.animateEnterExit
 import com.mr3y.podcaster.ui.components.rememberHtmlToAnnotatedString
+import com.mr3y.podcaster.ui.components.renderInSharedTransitionScopeOverlay
 import com.mr3y.podcaster.ui.presenter.PodcasterAppState
 import com.mr3y.podcaster.ui.presenter.downloads.DownloadsUIState
 import com.mr3y.podcaster.ui.presenter.downloads.DownloadsViewModel
@@ -106,6 +110,11 @@ fun DownloadsScreen(
                     scrolledContainerColor = Color.Transparent,
                 ),
                 modifier = Modifier
+                    .renderInSharedTransitionScopeOverlay(
+                        LocalSharedTransitionScope.current,
+                        zIndexInOverlay = 1f
+                    )
+                    .animateEnterExit(LocalAnimatedVisibilityScope.current)
                     .fillMaxWidth()
                     .padding(vertical = 8.dp)
                     .padding(end = 16.dp),

app/src/main/kotlin/com/mr3y/podcaster/ui/screens/EpisodeDetailsScreen.kt

@@ -60,8 +60,10 @@ import com.mr3y.podcaster.ui.components.PlayPauseCompactButton
 import com.mr3y.podcaster.ui.components.PullToRefresh
 import com.mr3y.podcaster.ui.components.RemoveFromQueueButton
 import com.mr3y.podcaster.ui.components.TopBar
+import com.mr3y.podcaster.ui.components.animateEnterExit
 import com.mr3y.podcaster.ui.components.rememberHtmlToAnnotatedString
 import com.mr3y.podcaster.ui.components.rememberSharedContentState
+import com.mr3y.podcaster.ui.components.renderInSharedTransitionScopeOverlay
 import com.mr3y.podcaster.ui.components.sharedBounds
 import com.mr3y.podcaster.ui.components.sharedElement
 import com.mr3y.podcaster.ui.presenter.PodcasterAppState
@@ -180,7 +182,13 @@ fun EpisodeDetailsScreen(
                         containerColor = MaterialTheme.colorScheme.surface,
                         navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
                     ),
-                    modifier = Modifier.fillMaxWidth(),
+                    modifier = Modifier
+                        .renderInSharedTransitionScopeOverlay(
+                            LocalSharedTransitionScope.current,
+                            zIndexInOverlay = 1f
+                        )
+                        .animateEnterExit(LocalAnimatedVisibilityScope.current)
+                        .fillMaxWidth(),
                 )
             },
             snackbarHost = { SnackbarHost(snackBarHostState, Modifier.padding(externalContentPadding)) },

app/src/main/kotlin/com/mr3y/podcaster/ui/screens/PodcastDetailsScreen.kt

@@ -89,11 +89,15 @@ import com.mr3y.podcaster.ui.components.AddToQueueButton
 import com.mr3y.podcaster.ui.components.AnimatedAsyncImage
 import com.mr3y.podcaster.ui.components.Error
 import com.mr3y.podcaster.ui.components.LoadingIndicator
+import com.mr3y.podcaster.ui.components.LocalAnimatedVisibilityScope
+import com.mr3y.podcaster.ui.components.LocalSharedTransitionScope
 import com.mr3y.podcaster.ui.components.PlayPauseCompactButton
 import com.mr3y.podcaster.ui.components.PullToRefresh
 import com.mr3y.podcaster.ui.components.RemoveFromQueueButton
 import com.mr3y.podcaster.ui.components.TopBar
+import com.mr3y.podcaster.ui.components.animateEnterExit
 import com.mr3y.podcaster.ui.components.rememberHtmlToAnnotatedString
+import com.mr3y.podcaster.ui.components.renderInSharedTransitionScopeOverlay
 import com.mr3y.podcaster.ui.presenter.PodcasterAppState
 import com.mr3y.podcaster.ui.presenter.RefreshResult
 import com.mr3y.podcaster.ui.presenter.podcastdetails.PodcastDetailsUIEvent
@@ -240,7 +244,13 @@ fun PodcastDetailsScreen(
                             dominantColorState.onColor
                         },
                     ),
-                    modifier = Modifier.fillMaxWidth(),
+                    modifier = Modifier
+                        .renderInSharedTransitionScopeOverlay(
+                            LocalSharedTransitionScope.current,
+                            zIndexInOverlay = 1f
+                        )
+                        .animateEnterExit(LocalAnimatedVisibilityScope.current)
+                        .fillMaxWidth(),
                 )
             },
             containerColor = MaterialTheme.colorScheme.surface,

ui/design-system/src/main/kotlin/com/mr3y/podcaster/ui/components/Image.kt

@@ -27,13 +27,12 @@ fun AnimatedAsyncImage(
             .memoryCacheKey(sharedTransitionKey)
             .build(),
         contentDescription = contentDescription,
-        modifier = Modifier
+        modifier = modifier
             .sharedElement(
                 LocalSharedTransitionScope.current,
                 LocalAnimatedVisibilityScope.current,
                 rememberSharedContentState(key = sharedTransitionKey),
-            )
-            .then(modifier),
+            ),
         contentScale = contentScale,
         onState = onState,
     )

ui/design-system/src/main/kotlin/com/mr3y/podcaster/ui/components/SharedElementTransition.kt

@@ -16,6 +16,8 @@ import androidx.compose.animation.core.VisibilityThreshold
 import androidx.compose.animation.core.spring
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment.Companion.Center
@@ -105,6 +107,38 @@ fun Modifier.sharedBounds(
     }
 }
 
+fun Modifier.renderInSharedTransitionScopeOverlay(
+    sharedTransitionScope: SharedTransitionScope?,
+    zIndexInOverlay: Float = 0f,
+    clipInOverlayDuringTransition: (LayoutDirection, Density) -> Path? = { _, _ -> null }
+): Modifier {
+    return if (sharedTransitionScope == null) {
+        this
+    } else {
+        with(sharedTransitionScope) {
+            renderInSharedTransitionScopeOverlay(
+                zIndexInOverlay = zIndexInOverlay,
+                clipInOverlayDuringTransition = clipInOverlayDuringTransition
+            )
+        }
+    }
+}
+
+fun Modifier.animateEnterExit(
+    animatedVisibilityScope: AnimatedVisibilityScope?
+): Modifier {
+    return if (animatedVisibilityScope == null) {
+        this
+    } else {
+        with(animatedVisibilityScope) {
+            animateEnterExit(
+                enter = fadeIn() + slideInVertically { -it },
+                exit = fadeOut() + slideOutVertically { -it },
+            )
+        }
+    }
+}
+
 fun Modifier.skipToLookaheadSize(
     sharedTransitionScope: SharedTransitionScope?,
 ): Modifier {