Hey, I am using `NavigationBarItem` with Material ...

# compose

[Adeel Malik]

Hey, I am using NavigationBarItem with Material 3 in jetpack compose project. I don’t want to have this box-like effect when nav item is selected. What is this called and how do i go about removing it? 🙏

[Adeel Malik]

Here’s my code

@Composable
fun BottomNavigationContainer(
    navController: NavController,
    viewModel: MainViewModelContract
) {
    val items = listOf(
        NavItem.Home,
        NavItem.Discover,
        NavItem.Contracts,
        NavItem.Card,
        <http://NavItem.Shop|NavItem.Shop>
    )
    NavigationBar(containerColor = White) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        items.forEach { item ->
            NavigationBarItem(
                icon = {
                    Icon(
                        painterResource(id = item.icon),
                        contentDescription = stringResource(id = item.title),
                        modifier = Modifier.size(30.dp),
                    )
                },
                label = {
                    Text(
                        text = stringResource(id = item.title),
                        fontSize = 10.sp
                    )
                },
                alwaysShowLabel = true,
                selected = currentRoute == item.navigation.name,
                onClick = {
                    navControllerOnClick(
                        navController = navController,
                        navName = item.navigation.name,
                        extraOnClickAction = {
                            viewModel.subNavigationClicked(item.navigation)
                        }
                    )
                },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = BottomNavIconSelectedColor,
                    selectedTextColor = BottomNavIconSelectedColor,
                    unselectedIconColor = BottomNavIconUnSelectedColor,
                    unselectedTextColor = BottomNavIconUnSelectedColor
                )
            )
        }
    }
}

[Stylianos Gakis]

The first answer would be that the material3 bottom nav item is build with the specs that this highlight exists there, so I’d guess that it does’t give you the option to remove it completely.
What it does seem to give the option of though in this section:

colors = NavigationBarItemDefaults.colors(
  selectedIconColor = BottomNavIconSelectedColor,
  selectedTextColor = BottomNavIconSelectedColor,
  unselectedIconColor = BottomNavIconUnSelectedColor,
  unselectedTextColor = BottomNavIconUnSelectedColor
)

is a way to change what the colors are when it’s highlighted. One thing you can do is have the selected color be the same as the background color, so it simply won’t look any different.

If you need a very different style all together in the future, it may be worth it to build your own composable for it, or to make your life easier, copy over the code from material3 and adjust it to your liking.

[Adeel Malik]

indicatorColor = White

@Stylianos Gakis Thanks 👍 Changing to same background color works. But it also have a small fade out type animation which shows with different color when NavItem gets selected. But i guess, i can live with that.

[Stylianos Gakis]

Yeah, although now you’re probably gonna have problems in dark mode 😅
And and use MaterialTheme.colorScheme.whatever it is that the background for NavigationBarItem already is. You can dig into the code a bit and try and find it.

[zt]

What about using just Color.Transparent?

[andrew]

The other thing to consider, this is a design system, and if you're omitting portions of it, you might be better suited to roll your own UI kit

[dorche]

Malik do you mean the ripple effect? Can you send a video of the original problem? If your icon is just an outline you could just provide null ripple.

[Adeel Malik]

@dorche ah its called ripple effect!

Thanks for saying it. I managed to find a solution here https://semicolonspace.com/jetpack-compose-disable-ripple-effect/

solution 2nd by creating a custom MutableInteractionSource class