expand Image as much as screen size jetpack compose

Question

I have a LazyColumn and some childs in it like below

LazyColumn(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(space = 16.dp)
) { 
item {
    Child(
        modifier = Modifier,
        firstImage = fakeImage,
        secondImage = fakeImage,
        onImageClick = {}
        )
    }

item {
    Child(
        modifier = Modifier,
        firstImage = fakeImage,
        secondImage = fakeImage,
        onImageClick = {}
        )
    }
}

here is what is inside of TwoPiecesLayout

@ExperimentalMaterialApi
@Composable
fun Child(
    modifier: Modifier,
    firstImage: Image,
    secondImage: Image,
    onImageClick: (Image) -> Unit
) {
    val height = (LocalConfiguration.current.screenWidthDp / 2) - 56
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(space = 16.dp)
    ) {
        ImageCell(
            modifier = Modifier
                .weight(
                    weight = 1F
                )
                .height(
                    height = height.dp
                ),
            image = firstImage,
            onImageClick = {
                onImageClick(firstImage)
            }
        )
        ImageCell(
            modifier = Modifier
                .weight(
                    weight = 3F
                )
                .height(
                    height = height.dp
                ),
            image = secondImage,
            onImageClick = {
                onImageClick(secondImage)
            }
        )
    }
}

when every of Images in Child clicked I want to expand their size as much as screen's size just like the material design choreography https://storage.cloud.google.com/non-spec-apps/mio-direct-embeds/videos/FADE.mp4

how can I do this?

Answer 1

This is not just for image, with basically any Composable, you can apply this method

var expanded by remember { mutableStateOf (false) }
val animF by animateFloatAsState(
  initialState = 0.25f,
  targetState = if (expanded) 1f else 0.25f
)

MyComposable(
 Modifier.fillMaxSize(animF) // pass the animated Fraction here
 .clickable { expanded = !expanded }
)

This will oscillate between 0.25 of the entire screen to 1f of the same, upon clicking the Composable.

See? Super-easy, barely an inconvenience.