Android CircularProgressIndicator takes up full screen with compose

Question

I have a simple compose function i want to put a circularprogessindicator in the middle of the screen at 80dp x 80dp, its aligned to the top and takes up the full width.

@Composable
fun MyCircularProgress() {
    CircularProgressIndicator(
        modifier = Modifier.size(80.dp,80.dp)
    )
}

why isn't the modifier working

Answer 1

I assume you put it inside a Surface with Modifier.fillMaxWidth() as direct descendant. Surface forces minimum constraints to direct descendant. You can check my answer out about Surface here.

You can put it inside a Box with contentAlignment = Alignment.Center to have a CircularProgressIndicator with 80.dp size and centered inside your Composable

@Composable
fun MyCircularProgress() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(80.dp, 80.dp)
        )
    }
}