How to make the height of Row with painter Modifier depend on the content inside Compose kotlin

Question

i have a code:

Row(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Black)
        .paint(
            painter = painterResource(resource = Res.drawable.toolbar_background),
            contentScale = ContentScale.FillWidth
        )
) {
   Column(
       modifier = Modifier
           .padding(start = 16.dp, top = 20.dp)
           .statusBarsPadding()
           .weight(weight = 1f)
   ) {
      ...
   }
   Row(
       modifier = Modifier
           .padding(end = 16.dp, top = 20.dp)
           .statusBarsPadding(),
       verticalAlignment = Alignment.CenterVertically
   ) {
      ...
   }
}

I have a Row that has .background() and .paint() set.

Inside .paint() contains an image, on top of which, in fact, I will place the elements

The bottom line is that the size of my picture is always the same, regardless of the height of the content inside, but I want to make sure that the height of this Row and the picture, respectively, depends on the height of the content inside

Answer 1

To make the height of the Row and the image depend on the content inside, you can use the wrapContentSize modifier instead of fillMaxWidth. This will make the Row wrap its content, and the image will be resized accordingly.

Here's an updated code snippet:

Row(
modifier = Modifier
    .wrapContentSize(align = Alignment.CenterStart) // <--- changed
    .background(Color.Black)
    .paint(
        painter = painterResource(resource = Res.drawable.toolbar_background),
        contentScale = ContentScale.Crop // <--- changed
    )
) {
Column(
    modifier = Modifier
        .padding(start = 16.dp, top = 20.dp)
        .statusBarsPadding()
        .weight(weight = 1f)
) {
    // your code
}
Row(
    modifier = Modifier
        .padding(end = 16.dp, top = 20.dp)
        .statusBarsPadding(),
    verticalAlignment = Alignment.CenterVertically
) {
    // your code
}}

By using wrapContentSize, the Row will wrap its content, and the image will be resized to fit the content.

I also changed the contentScale to ContentScale.Crop, which will scale the image to fit the available space while maintaining its aspect ratio. If you want to use a different scaling strategy, you can adjust this parameter accordingly.