How to make a circle shaped box which fits parent size compose android

Question

I want to make a circle-shaped text that will fill all the available on the screen but still remain a circle. This is the code I've written for the component.

    Box(modifier = modifier
        .padding(4.dp)
        .fillMaxSize()
        .clip(CircleShape),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "hello", modifier = Modifier.fillMaxSize().background(Color.Yellow))
}

And this is not the result I want it to be. Any ideas on how I can achieve this?

Answer 1

You can apply the aspectRatio(1f) modifier to have height = width in the Box.

Something like:

Box(modifier = Modifier
    .padding(4.dp)
    .fillMaxSize()
    .aspectRatio(1f)
    .background(Color.Blue, shape = CircleShape),
    contentAlignment = Alignment.Center
) {
    Text(text = "hello", color= Yellow,   textAlign = TextAlign.Center)
}

If you want to have a better control of the Text composable you can also check this question.