AnimatedVisibility Doesn't Expand Height In Dialog in Jetpack Compose

Question

So I have this composable in my project ...

 @Composable
 private fun ShowDialog() {
        var showText by remember { mutableStateOf(false) }

        val text = if (showText) {
            "Hide Text"
        } else {
            "Show Text"
        }

        Dialog(onDismissRequest = { }) {
            Card(modifier = Modifier.padding(15.dp)) {
                Column(modifier = Modifier.padding(15.dp)) {
                    AnimatedVisibility(visible = showText) {
                        Text(
                           text = "Here is the show text sample",
                           modifier = Modifier.padding(5.dp),
                           style = MaterialTheme.typography.body1,
                           color= Color.Black
                        )
                    }

                    Button(onClick = { showText = !showText }) {
                        Text(text = text)
                    }
                }
            }


        }
    }

If you have gone through the code, you might get what it is supposed to do. i.e it is basically a dialog with one text and a button below it. When the user clicks on a button the text above the button will toggle its visibility.

But the problem with the code is, When I click on the button, the text appears but the button gets invisible in other words the text takes the space and pushes a button to below. But yet the container in this case card or the column doesn't expand its height.

Is it supposed to work like that ? Or is this a bug?

I tried animateContentSize() on Column and Card but it didn't work. And checked similar questions on StackOverflow but didn't found any useful information.

@GabrieleMariotti thanks for the link... since this is assigned ... is there any alternative way to overcome this? any tips on this would be helpful — AgentP
@GabrieleMariotti I found a way to fix this check my answer once any other suggestions are also better... — AgentP

AgentP AgentP · Accepted Answer · 2021-08-17T13:46:58

Luckily, I found a temporary working answer for this problem,

What we need to use is just pass DialogProperties(usePlatformDefaultWidth = false) as properties parameter for dialog. This will make the dialog to resizable like this

    @Composable
    private fun ShowDialog() {
        var showText by remember { mutableStateOf(false) }

        val text = if (showText) {
            "Hide Text"
        } else {
            "Show Text"
        }

        Dialog(
            onDismissRequest = { },
            properties = DialogProperties(usePlatformDefaultWidth = false)
        ) {
            Card(
                modifier = Modifier
                    .padding(15.dp)
                    .wrapContentWidth()
                    .animateContentSize()
            ) {
                Column(modifier = Modifier.padding(15.dp).fillMaxWidth(1f)) {

                    AnimatedVisibility(visible = showText) {
                        Text(
                            text = "Sample",
                            modifier = Modifier
                                .padding(5.dp)
                                .fillMaxWidth(1f),
                            style = MaterialTheme.typography.body1,
                            color = Color.Black
                        )
                    }
                    Button(onClick = { showText = !showText }) {
                        Text(text = text)
                    }


                }
            }


        }
    }

Caution: It uses @ExperimentalComposeUiApi

This API is experimental and is likely to change in the future.

AnimatedVisibility Doesn't Expand Height In Dialog in Jetpack Compose

2 Answers