Custom layout doesn't cause parent to wrap content in jetpack compose

Question

So I have a layout with the following structure:

The layout is as follows:

    Card(
        modifier = Modifier.fillMaxWidth()
    ) {
        Row(
            modifier = Modifier
                .height(IntrinsicSize.Min)
                .clip(...)
        ) {
            Image(
                modifier = Modifier
                    .fillMaxHeight()
                    .width(128.dp)
            )
            Column() { 
                Text()
                Text()
                CustomLayoutSpannableText()
                Column() {
                    Text()
                    Text()
                    ...
                }
            }
        }
    }

For additional context, the custom layout is essentially text, but it is stylized text that can have inline graphics, and different styles etc.

When the custom layout (fig 2) is a single line, the card is sized properly, and all the content fits. However, when (fig 2) wraps to a second line, the card still is sized as if it was a single line, thus pushing the text content (fig 3) out of the bounds of the card. The content out of bounds isn't visible. The top level row contains a height modifier .height(IntrinsicSize.Min), which allows the card to be at a specific height, and allows the image to fill the maximum space.

When I remove the height modifier (with intrinsic height) on the row, the card does expand to fit all the content, but the image doesn't fill the parent area anymore (despite it having a fillMaxHeight() modifier, and it looks like this:

How do I get both, the image to fill the parent's height/size AND the card to expand to the height of the custom layout when having multiple lines?

One way I've gotten it to work is by wrapping the custom layout's content in a FlowRow() composable, which propogated the dimensions properly back up the UI tree, expanding the card to wrap the content. Is there a way to do it without using flow row, because I might as well skip the custom content, and use flow row anyway then? — rohan, Jun 28 '23 at 21:47

score 0 · Answer 1 · answered Jun 29 '23 at 14:09

If you put the .height(IntrinsicSize.Min) at the Card instead of the Row it works.

Card(modifier = Modifier.height(IntrinsicSize.Min)) {
   Row {
     Image(modifier = Modifier
          .width(128.dp)
          .fillMaxHeight()) { ... }
     Column(modifier = Modifier.fillMaxWidth()) {
            Text()
            Text()
            CustomLayoutSpannableText()
            Column() {
                Text()
                Text()
                ...
            }
        }
    }

Custom layout doesn't cause parent to wrap content in jetpack compose

1 Answers1