IssueTracker

Jetpack Compose version: BOM 2024.05.00

Jetpack Compose component(s) used: Image

Android Studio Build: Jellyfish | 2023.3.1 Patch 2 #AI-233.14808.21.2331.11926650, built on June 4, 2024

Kotlin version: 1.9.23

My goal here is to have the colored box on the left match the height of the text, and for the image to be centered in the box.

However, I've discovered that applying a minWidth to the box causes it to gain height as if the image were being scaled to the box's minWidth. I'm not 100% sure, but it looks like the image's requiredWidth modifier isn't being accounted for in the intrinsic calculations when the image is a direct child of a Box. Wrapping the image in a Row fixes it, as does removing the defaultMinSize modifier on the Box. As you can see in the attached screenshot, it's the Box that has the extra height instead of the image, so that leads me to believe that the Image's intrinsics aren't working how I would expect. If I replace the Image with a Spacer, it also works correctly.

I've attached a screenshot of the problem, as well as the image I used in my demo.

Component Summary:

Row (intrinsic min height)
   Box (fill max height)
       Image (centered)
   Text

Code:

@Composable
@Preview(widthDp = 400, heightDp = 400)
fun HeightPreview() {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.background(Color.White),
    ) {
        Row(
            modifier = Modifier.height(IntrinsicSize.Min)
        ) {
            Box(
                modifier = Modifier
                    .defaultMinSize(minWidth = 100.dp)
                    .fillMaxHeight()
                    .background(Color.Red),
            ) {
                Image(
                    painter = painterResource(R.drawable.garland_grill),
                    contentDescription = null,
                    modifier = Modifier
                        .requiredWidth(30.dp)
                        .background(Color.White)
                        .align(Alignment.Center)
                )
            }
            Column(modifier = Modifier.background(Color.Yellow)) {
                Text("Box should match text height")
                repeat(4) {
                    Text("Filler")
                }
            }
        }
        Row(
            modifier = Modifier.height(IntrinsicSize.Min)
        ) {
            Box(
                modifier = Modifier
                    .defaultMinSize(minWidth = 100.dp)
                    .fillMaxHeight()
                    .background(Color.Green),
            ) {
                Row(modifier = Modifier.align(Alignment.Center)) {
                    Image(
                        painter = painterResource(R.drawable.garland_grill),
                        contentDescription = null,
                        modifier = Modifier
                            .requiredWidth(30.dp)
                            .background(Color.White)

                    )
                }
            }
            Column(modifier = Modifier.background(Color.Yellow)) {
                Text("Wrapping the image in a Row fixes it")
                repeat(4) {
                    Text("Filler")
                }
            }
        }
        Row(
            modifier = Modifier.height(IntrinsicSize.Min)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxHeight()
                    .background(Color.Green),
            ) {
                Row(modifier = Modifier.align(Alignment.Center)) {
                    Image(
                        painter = painterResource(R.drawable.garland_grill),
                        contentDescription = null,
                        modifier = Modifier
                            .requiredWidth(30.dp)
                            .background(Color.White)

                    )
                }
            }
            Column(modifier = Modifier.background(Color.Yellow)) {
                Text("Removing the minWidth fixes it")
                repeat(4) {
                    Text("Filler")
                }
            }
        }
    }
}