BottomNavigation customization

Question

Good afternoon I'm new to Jetpack Compose and I'm having some difficulties customizing BottomNavigation as I need. My current result is this:

Current result

And I want this be like this:

Expected result

The text doesn't seem to me to be applying the style I gave it. It also looks like there is a white box as the bottom navigation background, but I can't figure out what it is. Can anyone help me?

Here is my Bottom Navigation code:

@Composable
fun BottomNavBar(
    backStackEntryState: State<NavBackStackEntry?>,
    navController: NavController,
    bottomNavItems: List<NavigationItem>
) {
    BottomNavigation(
        backgroundColor = DarkGray.copy(alpha = 0.6f),
        modifier = Modifier
            .fillMaxWidth()
            .padding(Dimen10, Dimen20, Dimen10, Dimen20)
            .clip(RoundedCornerShape(Dimen13, Dimen13, Dimen13, Dimen13))
    ) {
        bottomNavItems.forEach { item ->
            val isSelected = item.route == backStackEntryState.value?.destination?.route

            BottomNavigationItem(
                icon = {
                    Icon(
                        painter = painterResource(id = item.icon.orZero()),
                        contentDescription = stringResource(id = item.title)
                    )
                },
                label = { Text(text = stringResource(id = item.title), style = Text14) },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White,
                alwaysShowLabel = true,
                selected = isSelected,
                onClick = {
                    navController.navigate(item.route) {
                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route = route) {
                                saveState = true
                            }
                        }

                        launchSingleTop = true
                        restoreState = true
                    }
                },
                modifier = if (isSelected) {
                    Modifier.clip(RoundedCornerShape(Dimen13, Dimen13, Dimen13, Dimen13)).background(color = DarkGray).clipToBounds()
                } else {
                    Modifier.background(color = Color.Transparent)
                }
            )
        }
    }
}

EDIT: updated current result and code

Answer 1

Not any major issue was there in your code. Most probably, fillMaxWidth() and padding() might be the issue

Just did some minor changes which you can try ->

    BottomNavigation(
        modifier = Modifier.clip(RoundedCornerShape(12.dp)),
        elevation = 0.dp,
        contentColor = Color.White,
        backgroundColor = DarkGray.copy(0.6f)
    ) {
        bottomNavItems.forEach { item ->
            val isSelected = currentRoute == item.route/*Replace with your logic*/

            BottomNavigationItem(
                icon = {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_buy_premium),
                        contentDescription = ""
                    )
                },
                label = { Text(text = "Job openings") },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White,
                alwaysShowLabel = true,
                selected = isSelected,
                onClick = {
                    /*viewModel.updateRoute(item.route)
                    viewModel.navigateTo(item.route)*/Your logic here
                },
                modifier = if (isSelected) {
                    Modifier.clip(RoundedCornerShape(25.dp)).background(color = DarkGray).clipToBounds()
                } else {
                    Modifier.background(color = Color.Transparent)
                }
            )
        }
    }