Android Jetpack Compose - make an image fill max size with a border just around the image

Question

I'm new to android compose. I want to put an image with borders that look like this code.

preview image

Column(
    verticalArrangement = Arrangement.Bottom,
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
        .padding(36.dp)
        .fillMaxSize()
) {
    Image(
        painter = painterResource(id = R.drawable.dice),
        contentDescription = null,
        modifier = Modifier
            .border(
                BorderStroke(2.dp, Color.Black)
            )
            .padding(36.dp)
            .border(
                BorderStroke(2.dp, Color.Green)
            )
    )
}

I want to move an image to the center and fill it to max size using this code.

preview image

Column(
    verticalArrangement = Arrangement.Bottom,
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
        .padding(36.dp)
        .fillMaxSize()
) {
    Image(
        painter = painterResource(id = R.drawable.dice),
        contentDescription = null,
        modifier = Modifier
            .weight(1f)
            .fillMaxSize()
            .border(
                BorderStroke(2.dp, Color.Black)
            )
            .padding(36.dp)
            .border(
                BorderStroke(2.dp, Color.Green)
            )
    )
}

And the border stretches until it fills the column size, but I don't want it. How to make the border still like in the first code but use fillMaxSize modifier? I need fillMaxSize modifier because the image can change dynamically. Thank you all.

Answer 1

If I understood correctly you want the border to wrap around the possibly expanding/shrinking image, in that case 'Modifier.wrapContentSize()' should do the trick!

Answer 2

modifier = Modifier .weight(1f) .wrapContentSize() .border( BorderStroke(2.dp, Color.Black) ) .fillMaxSize() .padding(36.dp) .border( BorderStroke(2.dp, Color.Green) )