0
195
ViewsHow to center a NavigationRail's content in Jetpack Compose (menuGravity missing)
Problem
The Composable androidx.compose.material.NavigationRail has in some documention an optional "centered" alignment. I cannot achieve this using Jetpack Compose.
The "old" XML attribute is app:menuGravity="center" according to this tutorial.
Things I tried without success
I tried to put the NavigationRail (a simple wrapper for the actual widget) in a Box with an alignment set:
Box(contentAlignment = Alignment.Center) {
NavigationRail(
selectedItem = selectedItem,
onSelectItem = { selectedItem = it }
)
}
and putting it directly into the original Composable:
NavigationRail(
modifier = modifier.width(80.dp),
backgroundColor = MaterialTheme.colors.surface
) {
Box(contentAlignment = Alignment.Center) {
for (item in NavigationItem.values()) {
NavigationRailItem(
selected = selectedItem == item,
onClick = { onSelectItem.invoke(item) },
icon = { Icon(item.icon, item.title) },
alwaysShowLabel = true,
selectedContentColor = MaterialTheme.colors.primaryVariant,
unselectedContentColor = MaterialTheme.colors.primary,
label = { Text(item.title, modifier = Modifier.padding(top = 8.dp)) }
)
}
}
}
Screenhot (taken from the same site as the linked tutorial)
·
Santiago Trujillo
1 answers
Answer question0
As suggested in the example to center the navigationRail's content you can use something like:
NavigationRail {
Spacer(Modifier.weight(1f))
items.forEachIndexed { index, item ->
NavigationRailItem(
//....
)
}
Spacer(Modifier.weight(1f))
}
To achieve a Bottom alignment just use a Spacer:
NavigationRail {
Spacer(Modifier.weight(1f))
items.forEachIndexed { index, item ->
NavigationRailItem(
//....
)
}
}
·
Santiago Trujillo
Report
Answer question