I'm trying to create an expansion tile like compon...

# compose

[Dovydas]

I'm trying to create an expansion tile like component that expands downwards an shows more content when pressed. Currently, when collapsed it takes up the same amount of space as if it were expanded and is centered, and when expanding it moves up to fill that space. I'm trying to make it take up only the size it does when collapsed, and expand downwards. I feel like this should be simple to achieve, but I can't figure it out...

Screen Recording 2025-02-12 at 12.13.28.mov

[Dovydas]

@Composable
fun ExpansionTile(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
    expandedContent: @Composable () -> Unit

) {
    var expanded by remember { mutableStateOf (false) }

    OutlinedCard(
        modifier = modifier,
        onClick = { expanded = !expanded },
    ) {
        Column(
            verticalArrangement = Arrangement.Top
        ) {
            content()

            AnimatedVisibility(expanded) {
                expandedContent()
            }
        }
    }
}

[Skaldebane]

can you show the call site? i don't see anything wrong with the composable itself

[wwalkingg]

@Dovydas

@Composable
fun ExpansionTile(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
    expandedContent: @Composable () -> Unit
) {
    var expanded by remember { mutableStateOf(false) }

    Column(modifier = Modifier.clickable { expanded = !expanded }) {
        content()
        Column {
            Popup {
                AnimatedVisibility(visible = expanded) {
                    expandedContent()
                }
            }
        }
    }
}

[wwalkingg]

2025-02-13 15-16-32.mov

2025-02-13 15-16-32.mov

[Skaldebane]

@wwalkingg using a popup is... a very heavy-handed way of doing this

[Skaldebane]

I suspect all his issue is because he's centring his compostable in some other parent

except if the use-case is some sort of menu... then maybe popup is a valid option (but it has drawbacks too; e.g. it draws on top of everything, so if this were to be scrolled away behind a top app bar it would not get hidden by it)

[Dovydas]

Yeah popup won't work for my use case. Even if I call it in the very root of the app, it still centers:

@Composable
@Preview
fun App() {
    MaterialTheme {
        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
            ExpansionTile(
                content = { Text("text") },
                expandedContent = { Text("text") }
            )
        }
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ExpansionTile(
    modifier: Modifier = Modifier,
//    shape: Shape,
//    border: BorderStroke,
    content: @Composable () -> Unit,
    expandedContent: @Composable () -> Unit

) {
    var expanded by remember { mutableStateOf (false) }

    Card(
        modifier = modifier,
        onClick = { expanded = !expanded },
//        shape = shape,
//        border = border,

    ) {
        Column(
            verticalArrangement = <http://Arrangement.Top|Arrangement.Top>
        ) {
            content()

            AnimatedVisibility(expanded) {
                expandedContent()
            }
        }
    }
}

[wwalkingg]

To be honest, I'm a bit unclear about what the problem is now.🤯

[Dovydas]

When the tile is collapsed, it is centered. I want it to be alligned to the top and the expanded content to expand downwards, while the collapsed part stays put. Like in flutter's expansion tile: https://api.flutter.dev/flutter/material/ExpansionTile-class.html

[wwalkingg]

I get it. I think you should custom enter and exit parameter in AnimationVisibility.

[wwalkingg]

If not use Card

2025-02-13 16-19-53.mov

[wwalkingg]

I think it was caused by the Card composable.

[Dovydas]

Strangely enough it looks like it's the onClick parameter of the Card. If use the clickable modifier instead, the Card is not centered but is correct.