Testing shared element transition

raamcosta · Apr 27, 2024 · d3e7697 · d3e7697
1 parent 25aef45
commit d3e7697
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 18 deletions.
diff --git a/playground/app/src/main/java/com/ramcosta/samples/playground/AppNavigation.kt b/playground/app/src/main/java/com/ramcosta/samples/playground/AppNavigation.kt
@@ -5,6 +5,7 @@ import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
 import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.animation.SharedTransitionLayout
+import androidx.compose.animation.SharedTransitionScope
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
@@ -86,26 +87,29 @@ fun AppNavigation(
                 }
             }
         ) {
-            ProfileScreenDestination animateWith object: DestinationStyle.Animated() {
+            TestScreenDestination animateWith object: DestinationStyle.Animated() {
                 override val enterTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
                     { fadeIn(tween(5000)) }
                 override val exitTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
                     { fadeOut(tween(2000)) }
             }
 
-            greetingScreen(testProfileDeepLink, drawerController)
+            greetingScreen(this@SharedTransitionLayout, testProfileDeepLink, drawerController)
         }
     }
 }
 
+@OptIn(ExperimentalSharedTransitionApi::class)
 private fun ManualComposableCallsBuilder.greetingScreen(
+    sharedTransitionScope: SharedTransitionScope,
     testProfileDeepLink: () -> Unit,
     drawerController: DrawerController
 ) {
     composable(GreetingScreenDestination) {
         val vm = viewModel<GreetingViewModel>()
 
-        GreetingScreen(
+        sharedTransitionScope.GreetingScreen(
+            animatedVisibilityScope = this,
             navigator = destinationsNavigator,
             testProfileDeepLink = testProfileDeepLink,
             drawerController = drawerController,
@@ -140,6 +144,7 @@ fun SampleAppAnimatedNavHostExample(
                 val vm = viewModel<GreetingViewModel>()
 
                 GreetingScreen(
+                    animatedVisibilityScope = this,
                     navigator = destinationsNavigator(navController),
                     drawerController = drawerController,
                     uiEvents = vm as GreetingUiEvents,

diff --git a/...d/app/src/main/java/com/ramcosta/samples/playground/ui/screens/greeting/GreetingScreen.kt b/...d/app/src/main/java/com/ramcosta/samples/playground/ui/screens/greeting/GreetingScreen.kt
@@ -1,15 +1,25 @@
 package com.ramcosta.samples.playground.ui.screens.greeting
 
 import android.widget.Toast
+import androidx.compose.animation.AnimatedVisibilityScope
+import androidx.compose.animation.ExperimentalSharedTransitionApi
+import androidx.compose.animation.SharedTransitionScope
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Button
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
@@ -40,12 +50,14 @@ import kotlinx.coroutines.launch
 
 typealias ResultCena<T> = ResultRecipient<GoToProfileConfirmationDestination, T>
 
+@OptIn(ExperimentalSharedTransitionApi::class)
 @Destination<RootGraph>(
     start = true,
     style = GreetingTransitions::class
 )
 @Composable
-fun GreetingScreen(
+fun SharedTransitionScope.GreetingScreen(
+    animatedVisibilityScope: AnimatedVisibilityScope,
     navigator: DestinationsNavigator,
     testProfileDeepLink: () -> Unit,
     drawerController: DrawerController,
@@ -83,13 +95,15 @@ fun GreetingScreen(
         Toast.makeText(context, "featY result? = $result", Toast.LENGTH_SHORT).show()
     }
 
-    GreetingScreenContent(uiState, uiEvents, navigator, testProfileDeepLink) {
+    GreetingScreenContent(animatedVisibilityScope, uiState, uiEvents, navigator, testProfileDeepLink) {
         coroutineScope.launch { drawerController.open() }
     }
 }
 
+@OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
-private fun GreetingScreenContent(
+private fun SharedTransitionScope.GreetingScreenContent(
+    animatedVisibilityScope: AnimatedVisibilityScope,
     uiState: GreetingUiState,
     uiEvents: GreetingUiEvents,
     navigator: DestinationsNavigator,
@@ -126,17 +140,41 @@ private fun GreetingScreenContent(
 
             Spacer(modifier = Modifier.height(8.dp))
 
-            Button(
-                onClick = {
-                    navigator.navigate(GoToProfileConfirmationDestination)
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                IconButton(
+                    onClick = { /*no op*/ },
+                    modifier = Modifier
+                        .sharedElement(
+                            state = rememberSharedContentState(key = "love-icon"),
+                            animatedVisibilityScope = animatedVisibilityScope
+                        )
+                        .background(
+                            color = Color.Red,
+                            shape = RoundedCornerShape(50)
+                        )
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Favorite,
+                        contentDescription = "like",
+                        tint = Color.White
+                    )
+                }
+
+                Button(
+                    onClick = {
+                        navigator.navigate(GoToProfileConfirmationDestination)
 //                    navigator.navigate(FeatureXHomeDestination("SOMETHING"))
 //                    navigator.navigate(
 //                        FeatureXNavGraph("something", FeatureXHomeNavArgs("SOMETHING2"))
 //                    )
 //                    navigator.navigate(ProfileGraph("my graphArg", ProfileSettingsGraphNavArgs("my another graph arg", WithDefaultValueArgs(true))))
+                    }
+                ) {
+                    Text(text = stringResource(R.string.go_to_profile))
                 }
-            ) {
-                Text(text = stringResource(R.string.go_to_profile))
             }
 
             Button(

diff --git a/...und/app/src/main/java/com/ramcosta/samples/playground/ui/screens/profile/ProfileScreen.kt b/...und/app/src/main/java/com/ramcosta/samples/playground/ui/screens/profile/ProfileScreen.kt
@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
@@ -26,14 +27,12 @@ import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.annotation.parameters.DeepLink
 import com.ramcosta.composedestinations.annotation.parameters.FULL_ROUTE_PLACEHOLDER
 import com.ramcosta.samples.playground.commons.ProfileGraph
-import com.ramcosta.samples.playground.ui.screens.wrappers.HidingScreenWrapper
 
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Destination<ProfileGraph>(
     deepLinks = [
         DeepLink(uriPattern = "https://destinationssample.com/$FULL_ROUTE_PLACEHOLDER")
     ],
-    wrappers = [HidingScreenWrapper::class],
     style = ProfileTransitions::class,
     navArgs = ProfileScreenNavArgs::class
 )
@@ -45,10 +44,6 @@ fun SharedTransitionScope.ProfileScreen(
 ) {
     Box(
         modifier = Modifier
-            .sharedElement(
-                state = rememberSharedContentState(key = "asd"),
-                animatedVisibilityScope = animatedVisibilityScope
-            )
             .fillMaxSize()
             .background(Color(0xFFFCDEC0))
     ) {
@@ -79,6 +74,11 @@ fun SharedTransitionScope.ProfileScreen(
                     uiEvents.onLikeButtonClick()
                 },
                 modifier = Modifier
+                    .sharedElement(
+                        state = rememberSharedContentState(key = "love-icon"),
+                        animatedVisibilityScope = animatedVisibilityScope
+                    )
+                    .size(128.dp)
                     .background(
                         color = Color.Red,
                         shape = RoundedCornerShape(50)
@@ -87,7 +87,7 @@ fun SharedTransitionScope.ProfileScreen(
                 Icon(
                     imageVector = Icons.Filled.Favorite,
                     contentDescription = "like",
-                    tint = Color.White
+                    tint = Color.White,
                 )
             }
         }