Jetpack Compose: expandIn from icon

38 Views Asked by At

I'm working on an Android app, where the UI is put together with Jetpack Compose. I have a screen, where I list a bunch of little cards in a 2-column LazyVerticalGrid. If I click on any of the cards, I'm navigated to a screen where I get more details about the card. The architecture (including navigation) is similar to how the Now In Android app showcases, meaning I have a

fun NavGraphBuilder.details(...) {
  composable(
    ...
    enterTransition = {
      expandIn(
        animationSpec = tween(5000),
        expandFrom = { size, space, layoutDirection -> // Subject of the question },
        initialSize = { // Subject of the question })
    },
    ...
  ) {...}
}

I'd like an enter transition to this details screen, which is similar to the one where you tap on an app on the Android launcher. Meaning that the screen "spawns" on top of the button, and expands into fullscreen.

I believe I have most of the pieces to the puzzle, but I don't know how to put them together. I can already figure out the size of the card I click on with Modifier.onGloballyPositioned(), and I think I know what the expandFrom and initialSize arguments mean.

The question is, how can I take the position and size of the card I tap on, to the enterTransition I tried using navArgument(), but it looks like the initialState isn't getting evaluated in time, so it won't work, and I feel like I'm out of options

0

There are 0 best solutions below