I am creating an app in Compose with a really simple navigation bar which displays two items: home and starred:
@Composable
fun HomeScreen(modifier: Modifier) {
var selectedItem by remember { mutableStateOf(0) }
val items = listOf(
stringResource(id = R.string.bottomNavigationMenu_home),
stringResource(id = R.string.bottomNavigationMenu_starred)
)
val icons = listOf(
Icons.Outlined.Home,
Icons.Outlined.Star,
)
Box(
modifier = modifier
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Bottom
) {
NewProjectButton(
modifier = Modifier
.padding(16.dp)
.align(Alignment.End)
)
NavigationBar {
items.forEachIndexed { index, item ->
NavigationBarItem(
icon = {
Icon(icons[index], contentDescription = item) },
label = {
Text(item)
},
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
}
}
}
}
The output looks like so (I have to embed the link as StackOverflow gives me an error when I try to do otherwise):
https://i.sstatic.net/4Zjxw.png
As you can probably see from the image, the star is not outlined and instead is filled. I was wondering whether or not this is fixable or it is an internal bug.
This seems to be an internal bug within Compose, whether or not it has been fixed on a newer version I don't know, but I am using the latest release candidate, so it's unlikely. I have filed an issue request to Google here: https://issuetracker.google.com/u/1/issues/253388323
It's not a bug. Outlined version of Star is also filled, you can use Icons.Outlined.StarRate.
I tried to upload showing stars but there is a server error with stackoverflow at the moment.
You can check out by selecting File>New>Vector Asset and typing star and selecting Outlined to see each version.
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