Center composable in the center of the screen

Question

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?

This question shouldn't be closed since the use case is different than the related one. I am asking how to center in the whole screen, not how to center in a Column. — svprdga, Sep 06 '21 at 11:26

score 3 · Accepted Answer · answered Sep 06 '21 at 09:06

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.

For future reference, this is the correct answer, not the one provided in the linked question. — svprdga, Sep 06 '21 at 11:28

Center composable in the center of the screen

1 Answers1