If I have an `Image`, without knowing it’s size, how could I center something on top of the image? I...

# compose

[spierce7]

If I have an Image, without knowing it’s size, how could I center something on top of the image? I want the the Image size to dictate the size of the parent Box. How could I do this in compose?

[Oleksandr Balan]

You could use .align(Alignment.Center) to center something in the box.

Box {
    Image(
        painter = painterResource(R.drawable.jigglypuff),
        contentDescription = null,
        modifier = Modifier
            .border(2.dp, Color.LightGray)
    )
    Text(
        text = "Jigglypuff",
        modifier = Modifier
            .background(Color.LightGray)
            .align(Alignment.Center)
    )
}

Or alternatively you may set contentAlignment on the Box component.

Box(
    contentAlignment = Alignment.Center
) {
    Image(
        painter = painterResource(R.drawable.jigglypuff),
        contentDescription = null,
        modifier = Modifier
            .border(2.dp, Color.LightGray)
    )
    Text(
        text = "Jigglypuff",
        modifier = Modifier
            .background(Color.LightGray)
    )
}

Does it work for you?

[spierce7]

I was doing something similar. This is the result I was expecting, but I wasn’t getting it.

[spierce7]

I must be doing something else wrong!

[Oleksandr Balan]

Could you maybe post a sample?