How to remove oval shaped indicator from NavigationBarItem in NavigationBar (Jetpack compose)?

Question

The NaviagtionBar I am using actually has a gradient effect going from transparent to black color with alpha values of black color in between. My container color is transparent, but on active navigationBarItem, there's an indicator behind the icon of oval shaped (as in picture). I want to remove that or change it to transparent but it is not working.

@Composable
fun BottomBar(navController: NavHostController) {
    val screens = listOf(
        BottomNavItems.Home,
        BottomNavItems.Search,
        BottomNavItems.Library
    )
    val navStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navStackEntry?.destination
    val gradientColors = listOf(
        Color.Black.copy(alpha = 0f),
        Color.Black.copy(alpha = 0.7f),
        Color.Black.copy(alpha = 0.9f),
        Color.Black
    )
    val colors = NavigationBarItemDefaults.colors(
        selectedIconColor =Color.White,
        unselectedIconColor = Color.Gray,
        indicatorColor = Color.Transparent
    )
    NavigationBar(
        modifier = Modifier
            .height(65.dp)
            .background(
                brush = Brush.verticalGradient(
                    colors = gradientColors,
                )
            ),
        containerColor = Color.Transparent,
        windowInsets = WindowInsets(left = 30.dp, right = 30.dp, bottom = 15.dp)
    ) {
        screens.forEach { screen ->
            AddItem(
                screen = screen,
                currentDestination = currentDestination,
                navController = navController
            )
        }
    }
}

@Composable
fun RowScope.AddItem(
    screen: BottomNavItems,
    currentDestination: NavDestination?,
    navController: NavHostController
) {
    NavigationBarItem(
        selected = currentDestination?.hierarchy?.any {
            it.route == screen.route
        } == true,
        onClick = {
            if (currentDestination?.hierarchy?.any {
                    it.route == screen.route
                } == false) {
                navController.navigate(screen.route) {
                    popUpTo(navController.graph.findStartDestination().id)
                    launchSingleTop = true
                }
            }
        },
        alwaysShowLabel = true,
        label = {

        },
        icon = {
            Column(
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Icon(
                    painter = painterResource(id = screen.icon),
                    contentDescription = screen.name,
                    modifier = Modifier.size(30.dp)
                )
                Text(text = screen.name, style = MaterialTheme.typography.labelSmall)
            }
        },
        colors = NavigationBarItemDefaults
            .colors(
                selectedIconColor = Color.White,
                unselectedIconColor = Color.Gray,
                indicatorColor = MaterialTheme.colorScheme.surfaceColorAtElevation(LocalAbsoluteTonalElevation.current).copy(alpha = 0f)
            )
    )
}

Here is the image I am talking about

I tried and tested by changing

indicatorColor = MaterialTheme.colorScheme.surfaceColorAtElevation(LocalAbsoluteTonalElevation.current).copy(alpha = 0f)

to various other values, changing it to Color.Transparent as well. But always stays dark.

Answer 1

I ran into this issue recently, and it would only show up while the device is in dark mode. I had the colors on the NavigationBarItem set as the following:

colors = NavigationBarItemDefaults.colors(
                unselectedTextColor = Color.Transparent,
                selectedTextColor = Color.Transparent,
                unselectedIconColor = Color.Gray,
                selectedIconColor = Color.Black,
                indicatorColor = Color.Transparent,
            ),

What I discovered is that the selection bubble is using the onPrimary theme color. I did not have this explicitly set in either of my theme definitions. Try adding the desired color to your applicable theme color scheme like so:

private val darkColorScheme = darkColorScheme(
    primary = ThemeColors.Dark.primary,
    secondary = ThemeColors.Dark.secondary,
    tertiary = ThemeColors.Dark.tertiary,
    background = ThemeColors.Dark.background,
    surface = ThemeColors.Dark.surface,
    onPrimary = ThemeColors.Dark.onPrimary,
)

private val lightColorScheme = lightColorScheme(
    primary = ThemeColors.Light.primary,
    secondary = ThemeColors.Light.secondary,
    tertiary = ThemeColors.Light.tertiary,
    background = ThemeColors.Light.background,
    surface = ThemeColors.Light.surface,
    onPrimary = ThemeColors.Light.onPrimary
)

My ThemeColors class:

sealed class ThemeColors(
    val primary: Color,
    val secondary: Color,
    val tertiary: Color,
    val background: Color,
    val surface: Color,
    val onPrimary: Color
) {
    data object Dark : ThemeColors(
        primary = White,
        secondary = White,
        tertiary = Color.Black,
        background = Color.White,
        surface = GrayLight,
        onPrimary = White
    )

    data object Light : ThemeColors(
        primary = White,
        secondary = White,
        tertiary = Color.Black,
        background = Color.White,
        surface = GrayLight,
        onPrimary = White
    )

}

Answer 2

The only way I found is to set the active indicator color to match the surface:

NavigationBarItem(
                ...,
                colors = NavigationBarItemDefaults.colors(
                    indicatorColor = MaterialTheme.colorScheme.surface,
                ))