How do I get Images inside of rows to be the same size?

Question

I want to display two images above text in Jetpack Compose. To do this I create a row which has OnePlayer Composable inside of it.

    Box(
        modifier.fillMaxSize()
    ){

        Box(
            modifier
                .clip(RoundedCornerShape(10.dp))
                .fillMaxWidth(0.95f)
                .fillMaxHeight(0.15f)
                .background(Color.DarkGray)
                .align(Alignment.Center)
        ) {

            Row(
                horizontalArrangement = Arrangement.SpaceEvenly,
                modifier = Modifier.fillMaxSize()
            ) {

                OnePlayer(name = "Gabriel Clemens", id = R.drawable.gabriel_clemens)
                OnePlayer(name = "Martin Schindler", id = R.drawable._8111069
                )

            }
        }
    }

This is the OnePlayer Composable code

@Composable
fun OnePlayer(
    modifier: Modifier = Modifier,
    name: String,
    id: Int
) {

    Column(){

        Image(
            painter = painterResource(id = id),
            contentDescription = null,
            contentScale = ContentScale.FillWidth,
            modifier = Modifier.fillMaxWidth(0.5f)
        )

        Text(
            text = name,
        )
    }

}  }
}

I want both images to be the same size and have a text below. When I use just text inside the second column I have both texts in the same size just like I want it to be. As soon as I add images the left image is bigger than the right one (see the image attatched). How do I fix this?

Thanks a lot

This is what its supposed to look like

This is what it looks like currently

Answer 1

You have to pass the Modifier to your OnePlayer composable and play with weights,

@Composable
fun OnePlayer(
    name: String,
    id: Int,
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {

        Image(
            painter = painterResource(id = id),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxWidth().weight(1f),
        )
        Text(
            text = name,
            maxLines = 1,
        )
    }
}

@Preview
@Composable
fun PreviewResult() {
    SampleTheme {
        Surface(
            color = MaterialTheme.colorScheme.background
        ) {
            Box(
                modifier = Modifier.fillMaxSize()
            ) {

                Box(
                    Modifier
                        .clip(RoundedCornerShape(10.dp))
                        .fillMaxWidth(0.95f)
                        .fillMaxHeight(0.15f)
                        .background(Color.DarkGray)
                        .align(Alignment.Center)
                ) {
                    Row(
                        horizontalArrangement = Arrangement.SpaceEvenly,
                        modifier = Modifier.fillMaxSize()
                    ) {
                        OnePlayer(
                            name = "Gabriel Clemens",
                            id = R.drawable.ic_foggy,
                            modifier = Modifier.weight(1f),
                        )
                        OnePlayer(
                            name = "Martin Schindler",
                            id = R.drawable.ic_heavy_rain,
                            modifier = Modifier.weight(1f),
                        )
                    }
                }
            }
        }
    }
}