<@UJBPFB3SN> <@UNH9ZT3NZ> Hi! I'm glad to hear tha...

# compose

[Nthily]

@Ian Lake @Doris Liu Hi! I'm glad to hear that the Compose team has recently supported shared element transitions🤩, I wonder if it could address a similar issue as this one encountered before: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1638281005306700
Without using a nested NavHost, can shared element transitions perfectly solve this issue? To provide a simple understanding, I have recorded a navigation animation from Twitter, which navigates between screens with and without a bottom bar (in screens with a bottom bar, the bar animates along with the screen, rather than using the previous approach of hiding the bottom bar based on destination determination)

demo.mp4

[Ian Lake]

Yep, works great: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1712495286104259?thread_ts=1668617994.752349&amp;cid=CJLTWPH7S

[Doris Liu]

Yup. We also have an example for this type of use case: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]mation/demos/sharedelement/NavigationWithSharedToolBarDemo.kt

Give it a try, and let us know if you have any questions. 🙂

[Nthily]

Hi doris ! i've checked some shared element transition samples. but i still have some quesitons.

In my case, I would like to navigate between screens with and without a bottom bar. Previously, it seemed that it was not possible to solve this without using a nested NavHost, because during navigation, the bottom bar needs to animate smoothly with the screens (as if they are moving together, referencing the video above).

However, if not using nested navigation, using if statements or the animation APIs (like AnimatedContent) to control the display or movement of the Bottom Bar doesn't seem to work well in sync with the screens.

Shared Element Transition seems to apply when there is a common element directly between two screens. How should I achieve the effect seen in the video? 🤔

[Stylianos Gakis]

When people are part of the thread already you don't need to ping again, people are notified about the messages already, so you can skip it for follow-up messages 😊

With that said, perhaps you could show a bit of what you've tried so far which hasn't worked? Video and/or code would help.

In the video I was showing with the shared top bar, the steps were pretty much these.
• Put the bottom bar just normally in your screen code, nothing global, just locally in your screen
• Mark it as shared element with a specific ID
• In the other screens, also put that bottom bar and make sure to have it use the same ID when you mark that as a shared element as well
• Make sure to use the AnimatedContentScope which the nav library provides to each composable screen so that these two items know when the old screen is leaving and when the new one is coming in.
And then you should experience the right behavior here.

[Nthily]

Thanks for your answer! I just tried other sample, its a list to list detail, but also it not works for me :((

here is code

SharedTransitionLayout {
        Scaffold(
          containerColor = Color.Black,
          modifier = Modifier.fillMaxSize()
        ) {
          NavHost(
            navController = navController,
            startDestination = "first",
            modifier = Modifier.fillMaxSize(),
            enterTransition = {
              defaultSlideIntoContainer()
            },
            exitTransition = {
              defaultSlideOutContainer()
            },
            popEnterTransition = {
              defaultSlideIntoContainer(forward = false)
            },
            popExitTransition = {
              defaultSlideOutContainer(forward = false)
            }
          ) {
            composable("first") {
              Column {
                Box(
                  Modifier
                    .fillMaxWidth()
                    .height(80.dp)
                    .background(Color.Red)
                )
                LazyColumn(Modifier.fillMaxSize().background(Color.White)) {
                  items(100) {
                    CenterRow {
                      Text(text = "items $it")
                      WidthSpacer(value = 20.dp)
                      AsyncImage(
                        model = "<https://pbs.twimg.com/media/GLOzjMmWkAA0SOQ?format=png&name=small>",
                        contentDescription = null,
                        modifier = Modifier
                          .size(72.dp)
                          .sharedElement(
                            state = rememberSharedContentState(key = "image $it"),
                            animatedVisibilityScope = this@composable
                          )
                          .clickable {
                            navController.navigate("second/$it")
                          },
                      )
                    }
                  }
                }
              }
            }
            composable(
              route = "second/{imageId}",
              arguments = listOf(
                navArgument("imageId") { type = NavType.IntType }
              )
            ) { backStackEntry ->
              Box(
                modifier = Modifier
                  .fillMaxSize()
                  .background(Color.Gray), Alignment.Center
              ) {
                AsyncImage(
                  model = "<https://pbs.twimg.com/media/GLOzjMmWkAA0SOQ?format=png&name=small>",
                  contentDescription = null,
                  modifier = Modifier
                    .size(272.dp)
                    .sharedElement(
                      state = rememberSharedContentState(
                        key = "image ${backStackEntry.arguments?.getInt("imageId")}"
                      ),
                      animatedVisibilityScope = this@composable
                    ),
                )
              }
            }
          }
        }
      }

[Nthily]

😭🥹 i just upgrade the "androidx navigation" version to 2.7.7, and it works now !

[Nthily]

Hi doris, i just found an issue about shard element transition.

If it slides the LazyColumn for a short period of time immediately after the transition animation, there is a high probability that a NullPointException will be triggered.

https://android.googlesource.com/platform/frameworks/support/+/715250d4e5a067d26174522ca8[…]mpose/animation/demos/sharedelement/ListToDetailsDemo.kt

this sample code just can reproduces this issue

issue.mp4

[Doris Liu]

Looks like it's the same NPE as this: https://issuetracker.google.com/333679741 We are working on fixing it