Alright I think I have a more complex bug today. ...

# compose

[jaqxues]

Alright I think I have a more complex bug today.

I have an expandable Card (representing Articles).

When collapsed, the Card contains the author and sources.
When expanded, it also contains a longer description. The user can save the article by long pressing on the article (Obviously there will be a button for it, just to simplify the following sample code). A state representing the saving result will be displayed in the extended layout.

So the user extends the article (by clicking on the card), the user long presses (on the card), and state might show up (uses Random.nextInt(0, 3) for testing purposes)

As you can see in the screenshots below (1 -> 2), when having the content in the "extendedContent" changed, the card doesnt expand more to fit the contents. Now, when the Card is collapsed and expanded again (3), it resizes and looks how it should. However, if now the message disappears, it is again not resizing, meaning we have a lot of empty space (4)

[jaqxues]

Screenshots

[jaqxues]

@Composable
fun AppScreen() {
    Scaffold {
        ScrollableColumn {
            for (idx in 1..20) {
                var savingResult by remember { mutableStateOf(0)}
                ExpandableCardLayout(content = {
                    Text("Element: $idx, Shaped Icon")
                    Text("Article Headline")
                    Text("Authors and Sources")
                }, extendedContent = {
                    Column {
                        Divider(Modifier.padding(vertical = 8.dp, horizontal = 40.dp))
                        Text("Detailed Description with a summary of the main article. This Description should be about 2 sentences long, and contain the keywords.")

                        when (savingResult) {
                            0 -> Spacer(Modifier.padding(8.dp))
                            1 -> Text("Saved Article")
                            2 -> {
                                Divider(
                                    Modifier.padding(
                                        vertical = 8.dp,
                                        horizontal = 30.dp
                                    )
                                )
                                Card(Modifier.clip(RoundedCornerShape(8.dp)), backgroundColor = Color(0xFFFFAAAA)) {
                                    Column {
                                        Text("An Error occurred while saving article")
                                        Text("Please try again")
                                    }
                                }
                            }
                        }
                    }
                }, onLongPress = { savingResult = Random.nextInt(0, 3) })
            }
        }
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ExpandableCardLayout(
    onLongPress: ((Offset) -> Unit)? = null,
    content: @Composable() ColumnScope.() -> Unit,
    extendedContent: @Composable() () -> Unit
) {
    var extended by remember { mutableStateOf(false) }
    ListCardElement(onClick = { extended = !extended }, onLongPress = onLongPress) {
        Column(Modifier.padding(16.dp)) {
            content()

            AnimatedVisibility(extended) {
                extendedContent()
            }
        }
    }
}

@Composable
fun ListCardElement(onClick: (() -> Unit)? = null, onLongPress: ((Offset) -> Unit)? = null, content: @Composable () -> Unit) {
    Card(
        Modifier
            .padding(horizontal = 16.dp)
            .clip(RoundedCornerShape(8.dp))
            .fillMaxWidth()
            .padding(4.dp)
            .run { onClick?.let { clickable(onClick = it) } ?: this }
            .run { onLongPress?.let { longPressGestureFilter(it) } ?: this }, elevation = 4.dp
    ) {
        content()
    }
}

[jaqxues]

Tl;dr it looks like it has issues with two expanded, nested layouts