<@UNH9ZT3NZ> I have a Scaffold (which has a bottom...

# compose

[Nthily]

@Doris Liu I have a Scaffold (which has a bottomBar with zIndexInOverlay = 1f) with a topBar and LazyColumn inside the content where clicking on the image navigates to the detail page, but it doesn't seem to be working when I also set zIndexInOverlay = 1f, it doesn't seem to work, it covers the topBar when the image returns from the detail page 🤔

[Nthily]

SharedTransitionLayout {
  val navController = rememberNavController()
  val navBackStackEntry = navController.currentBackStackEntryAsState().value
  val currentRoute = navBackStackEntry?.destination

  Scaffold(
    bottomBar = {
      AnimatedVisibility (
        visible = currentRoute?.hasRoute<Route.List>() == true,
        enter = slideInVertically { it },
        exit = slideOutVertically { it },
        modifier = Modifier.renderInSharedTransitionScopeOverlay(
          zIndexInOverlay = 1f,
        )
      ) {
        Box(modifier = Modifier
          .fillMaxWidth()
          .height(56.dp)
          .background(Color.Gray))
      }
    }
  ) {
    NavHost(
      navController = navController,
      startDestination = Route.List
    ) {
      composable<Route.List> {
        val scope = this
        Column {
          Box(
            modifier = Modifier
            .fillMaxWidth()
            .height(82.dp)
            .background(Color.Cyan)
              .renderInSharedTransitionScopeOverlay(
                zIndexInOverlay = 1f,
              )
          )
          LazyColumn(
            verticalArrangement = Arrangement.spacedBy(24.dp)
          ) {
            items(50) {
              Image(
                painter = painterResource(id = <http://R.drawable.cat|R.drawable.cat>),
                modifier = Modifier
                  .fillMaxWidth()
                  .height(120.dp)
                  .clickable {
                    navController.navigate(Route.Detail(it))
                  }
                  .sharedElement(
                    state = rememberSharedContentState(key = "cat $it"),
                    animatedVisibilityScope = scope
                  ),
                contentDescription = null,
                contentScale = ContentScale.Crop
              )
            }
          }
        }
      }
      composable<Route.Detail> {
        val id = it.toRoute<Route.Detail>().item
        Image(
          painter = painterResource(<http://R.drawable.cat|R.drawable.cat>),
          contentDescription = null,
          modifier = Modifier.fillMaxSize()
            .sharedElement(
              state = rememberSharedContentState(key = "cat $id"),
              animatedVisibilityScope = this
            )
        )
      }
    }
  }
}

Export-1716722933253.mp4

[Doris Liu]

Modifier order matters here. You'll need to put renderInSharedTransitionScopeOverlay before background and other content that you intend to render in overlay.

[Nthily]

indeed, but I put the renderInSharedTransitionScopeOverlay in front of the background, and it just disappears after the animation ends, and it looks like this 🤔

Export-1716948023130.mp4

[Doris Liu]

That's because renderInSharedTransitionScopeOverlay and rendering shared elements in overlay ignores alpha change coming down from the layout tree. That's why we recommend doing Modifier.renderIn...Overlay(..).animateEnterExit(..). See: https://developer.android.com/develop/ui/compose/animation/shared-elements/customize#clip-overlays

[Nthily]

@Doris Liu However, I found an issue: if I quickly navigate back before the transition animation completes, a bug appears on the interface, as shown in the video, Is this a known issue? 🤔

Screen_Recording_20240531_154919_composetest.mp4

[Nthily]

1000000104.mp4

1000000104.mp4

[Doris Liu]

It's not a known issue. Could you file a bug please?

[Nthily]

yes, sure 🙂 https://issuetracker.google.com/issues/344014316