IssueTracker

Jetpack Compose version: 2024.12.01

Jetpack Compose component used: AnimatedContent

ContentTransform currently exposes an API for providing an absolute z-index value for the incoming (target) content with targetContentZIndex. This works great if the layering of your content is well defined and finite. However, this API isn't easily adaptable to support a fully dynamic layering system.

Example: Always perform a slide down transition.

var flipFlop by remember { mutableStateOf(false) }
      
AnimatedContent(
  targetState = flipFlop,
  transitionSpec = {
    ContentTransform(
      targetContentEnter = EnterTransition.None,
      initialContentExit = slideOutOfContainer(towards = Down),
      targetContentZIndex = -1f,
    )
  },
) {
  Box(
    modifier = Modifier
      .fillMaxSize()
      .background(if (it) Color.LightGray else Color.White),
    contentAlignment = Alignment.Center,
  ) {
    Button(onClick = { flipFlop = !flipFlop }) {
      Text("Down")
    }
  }
}

This works fine the first time, because -1 < 0. However, for all subsequent changes, -1 == -1 so the incoming content is placed on top and the transition doesn't work. In order to make this work, we need to keep a FloatState and decrement it every time we return a new transformation.

var currentZIndex by remember { mutableFloatStateOf(0f) }

AnimatedContent( 
  // ...
  transitionSpec = {
    ContentTransform(
      // ...
      targetContentZIndex = currentZIndex.nextDown().also { currentZIndex = it },
    )
  },
) {
  // ...
}

This... works. But doesn't feel great. It's really easy to mess up and technically puts a limit on the number of transitions you can run, even if it's not a limit you'd ever realistically hit.

Two possibilities that come to mind:

1. Provide access to the current z-index value(s)? Then the transition spec provider can increment or decrement in order to provide relative behavior using the absolute values.
2. Expose a relative z-index API and manage the z-indexes internally. AnimatedContent only renders a handful of contents at the same time (usually 1-2). Once idle (e.g. showing one content), reset the z-index back to zero to avoid growing or shrinking to infinity.