How to set itemActiveIndicatorStyle on BottomNavigationView in Jetpack Compose?

Question

I am trying to convert my Android application to Jetpack Compose

I have a BottomNavigationView configured with property app:itemActiveIndicatorStyle set according to this post.

This allows for the "pill shaped" background material 3 style selection indicator on the Bottom tab nav view. But I cannot find how to do this with Jetpack Compose.

Answer 1

You can use the colors attribute in the NavigationBarItem defining the indicatorColor

NavigationBar {
    items.forEachIndexed { index, item ->
        NavigationBarItem(
            icon = { Icon(Icons.Filled.Favorite, contentDescription = item) },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index },
            colors = NavigationBarItemDefaults.colors(
                indicatorColor= Green
            )
        )
    }
}

Answer 2

Put it in themes:

    <item name="colorSecondaryContainer">#D5EBFF</item>