Center composable in Jetpack compose

Question

Older versions of Jetpack compose dev-0.x used to have a Center composable to center a widget.

However, in the alpha version it has been removed and no specific composable made to handle this task.

In my case I want to show a progress indicator at the center until data is fetched:

Surface(color = MaterialTheme.colors.background) {
    val state = viewModel.userState
    if (state == null) {
        CircularProgressIndicator()
    } else {
        UserDigest(state = state)
    }
}

The result is obviously something like this:

And the indicator is at the corner.

Adding fillMaxSize() to the Indicator does not help either:

CircularProgressIndicator(modifier = Modifier.fillMaxSize())

So, how do I move it (generally a composable) to the center of an area?

Gabriele Mariotti Gabriele Mariotti · Accepted Answer · 2020-10-22T11:09:39

Use a container.
For example:

Box(
   contentAlignment = Alignment.Center,
   modifier = Modifier.fillMaxSize() ){
        CircularProgressIndicator(progress = 0.5f)
}

or:

Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
) {
    CircularProgressIndicator(progress = 0.5f)
}

Center composable in Jetpack compose

1 Answers