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?
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().
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.).
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.
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 .
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.
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:
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.
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
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()
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With