how to remove selected oval item color in BottomBar jetpack compose-CodePudding

I want to remove the blue oval color behind the selected item. How can I do that?

 NavigationBarItem(
        selected = selected,
        onClick = onClick,
        icon = if (selected) selectedIcon else icon,
        modifier = modifier,
        enabled = enabled,
        label = label,
        alwaysShowLabel = alwaysShowLabel,
        colors = NavigationBarItemDefaults.colors(
            selectedIconColor = AppDefaults.navigationSelectedItemColor(),
            unselectedIconColor = AppDefaults.navigationContentColor(),
            selectedTextColor = AppDefaults.navigationSelectedItemColor(),
            unselectedTextColor = AppDefaults.navigationContentColor(),
            indicatorColor = AppDefaults.navigationIndicatorColor()
        )
    )

CodePudding user response：

The color of the indicator is defined by the indicatorColor attribute in the NavigationBarItem.
To remove it you have to apply the same containerColor used by the NavigationBar.

If you are using the default (containerColor = surface color) you have to calculate the surface tonal color at different elevation applied to the containerColor.

Something like:

NavigationBarItem(
    icon = { androidx.compose.material3.Icon(Icons.Filled.Favorite, contentDescription = item) },
    label = { androidx.compose.material3.Text(item) },
    selected = selectedItem == index,
    onClick = { selectedItem = index },
    colors = androidx.compose.material3.NavigationBarItemDefaults
        .colors(
            selectedIconColor = Red,
            indicatorColor = MaterialTheme.colorScheme.surfaceColorAtElevation(LocalAbsoluteTonalElevation.current) 
        )
)

In the other cases just use the same color:

NavigationBar(
    containerColor = Yellow
){

    items.forEachIndexed { index, item ->
        NavigationBarItem(
            icon = { androidx.compose.material3.Icon(Icons.Filled.Favorite, contentDescription = item) },
            label = { androidx.compose.material3.Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index },
            colors = androidx.compose.material3.NavigationBarItemDefaults
                .colors(
                    selectedIconColor = Red,
                    indicatorColor = Yellow )
        )
    }
}