Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center composable in Jetpack compose

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:

enter image description here

And the indicator is at the corner.


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

CircularProgressIndicator(modifier = Modifier.fillMaxSize())

enter image description here

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

like image 345
Mahdi-Malv Avatar asked Oct 22 '20 11:10

Mahdi-Malv


People also ask

How do you center in jetpack compose?

To center align content of Column along horizontal axis in Android Compose, set horizontalAlignment parameter with the value of Alignment. CenterHorizontally . Also, we may fill the maximum width by the Column using Modifier. fillMaxWidth().

What is composable in jetpack compose?

Jetpack Compose is built around composable functions. These functions let you define your app's UI programmatically by describing how it should look and providing data dependencies, rather than focusing on the process of the UI's construction (initializing an element, attaching it to a parent, etc.).

What is LazyColumn in jetpack compose?

A LazyColumn is a vertically scrolling list that only composes and lays out the currently visible items. It's similar to a Recyclerview in the classic Android View system.

What is mutableStateOf in jetpack compose?

mutableStateOf creates an observable MutableState<T> , which is an observable type integrated with the compose runtime. interface MutableState<T> : State<T> { override var value: T. } Any changes to value will schedule recomposition of any composable functions that read value .

What are lazy composables in jetpack compose?

In Jetpack compose we have Composables like Column and Row but when the app needs to display a large number of items in a row or columns then it’s not efficient if done by Row or Column Composable. Therefore we have Lazy Composables in Jetpack Compose.

Is it possible to center a widget in jetpack compose?

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:

What are jetpack compose modifiers?

The modifier design makes this kind of behavior explicit and predictable, and gives you more control to achieve the exact behavior you want. It also explains why there is not a margin modifier but only a padding one. Jetpack Compose provides a list of built-in modifiers to help you decorate or augment a composable.

How to create a new project with Jetpack compose in Android Studio?

To create a new project in the Android Studio Canary version, refer to the article How to Create a new Project in the Android Studio Canary Version with Jetpack Compose. Open MainActivity.kt and create two Composables, one for Row Item and One for Column Item


1 Answers

You have to use a parent container.
For example:

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

or:

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

enter image description here

like image 150
Gabriele Mariotti Avatar answered Oct 06 '22 12:10

Gabriele Mariotti