I have a simple loading composable:

@Composable
fun Loading() {
    CircularProgressIndicator()
}

I want it centered in the center of the screen. I've searched the docs and I've found layouts for building rows and columns, but I haven't found anything to center a view in the absolute middle of the screen.

How can be achieved?

CodePudding user response：

First you need a view that takes up the whole screen, for that you need the fillMaxSize modifier. In this case it can be a transparent Box. Then you can center your view inside that container:

Box(
    contentAlignment = Alignment.Center, // you apply alignment to all children
    modifier = Modifier.fillMaxSize()
) {
    CircularProgressIndicator(
        modifier = Modifier.align(Alignment.Center) // or to a specific child
    )
}

In this case you can choose either of the two ways to set align, I just mentioned it so you know for the future when you have multiple views inside a container.