why is my bottom bar titles doesn't align bottom?

Question

I made a bottom bar in compose, but for some reason I can't align the titles to the bottom, maybe because the bottom bar has a bottom border, I'm not sure, but I want less space under the titles, so I want to align them a little lower and take the pictures a little above it. So I want to scroll down both the image and the title.I added padding but it didnt work properly. Can you help me with this? here are my codes

BottomBar

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BaseBottomBar(
    currentDestination: NavDestination?,
    navController: NavHostController,
    bottomSheetState: ModalBottomSheetState
) {

    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp

    val coroutineScope = rememberCoroutineScope()
    val bottomBarItemCount = 5
    val dividerLength = screenWidth / bottomBarItemCount
    val dividerColor = MaterialTheme.colors.contrastColor

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .statusBarsPadding()
    ) {
        BottomAppBar(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Box(modifier = Modifier.fillMaxSize()) {

                BottomNavigation {
                    BottomAppBarItems.values().toList().forEach { item ->
                        BottomNavigationItem(
                            modifier = Modifier.padding(bottom = 2.dp, top = 7.dp),
                            label = {
                                item.title?.let {
                                    Text(
                                        text = stringResource(id = it),
                                        fontSize = 11.sp,
                                        softWrap = false, // Align the title to the center,
                                        textAlign = TextAlign.Center,
                                    )
                                }
                            },
                            icon = {
                                item.icon?.let {
                                    Icon(
                                        imageVector = ImageVector.vectorResource(id = it),
                                        contentDescription = "Navigation Icon",
                                    )
                                }
                            },
                            selected = currentDestination?.hierarchy?.any {
                                it.route == item.route
                            } == true,
                            unselectedContentColor = LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
                            onClick = {
                                item.route?.let {
                                    navController.navigate(it) {
                                        popUpTo(navController.graph.findStartDestination().id)
                                        launchSingleTop = true
                                    }
                                }
                            }
                        )
                    }
                }
                Divider(
                    modifier = Modifier
                        .width(dividerLength),
                    thickness = 2.dp,
                    color = dividerColor
                )
            }
        }

        FancyCenterItem(
            modifier = Modifier
                .align(Alignment.Center),
            centerItemIcon = ImageVector.vectorResource(R.drawable.ic_bottom_bar_fab),
            contentColor = DefaultDYTColor,
            centerItemOnClick = {
                coroutineScope.launch {
                    if (bottomSheetState.isVisible)
                        bottomSheetState.hide()
                    else
                        bottomSheetState.animateTo(ModalBottomSheetValue.Expanded)
                }
            },
            backgroundColor = Color.Transparent
        )
    }
}

@Composable
fun FancyCenterItem(
    modifier: Modifier,
    centerItemIcon: ImageVector,
    contentColor: Color,
    backgroundColor: Color,
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(0.dp, 0.dp),
    centerItemOnClick: () -> Unit
) {

    FloatingActionButton(
        modifier = modifier,
        onClick = (centerItemOnClick),
        backgroundColor = backgroundColor,
        contentColor = contentColor,
        elevation = elevation
    ) {
        Icon(
            imageVector = centerItemIcon,
            contentDescription = "fab button"
        )
    }
}

BottomAppBarItems

enum class BottomAppBarItems(
    val icon: Int?,
    val title: Int?,
    val route: String?
) {
    HOME(
        route = BottomBarScreen.HomeScreen.route,
        title = R.string.main,
        icon = R.drawable.ic_bottom_bar_home_light_theme
    ),
    SEARCH(
        route = BottomBarScreen.ContentScreen.route,
        title = R.string.search,
        icon = R.drawable.ic_search
    ),
    FAB(
        route = null,
        title = null,
        icon = null
    ),
    HEALTH(
        route = BottomBarScreen.PlansScreen.route,
        title =  R.string.health,
        icon = R.drawable.ic_apple
    ),
    OTHERS(
        route = BottomBarScreen.DietitiansScreen.route,
        title = R.string.other,
        icon = R.drawable.ic_others
    )
}

score 1 · Accepted Answer · answered Jun 06 '23 at 09:32

You can try using the .align() modifier to align the labels to the bottom of the BottomNavigationView. You can use the BottomNavigationItemBuilder.label parameter to pass in a Composable that contains the label text and then use the Box() Composable to align the label text to the bottom of each individual BottomNavigationItem. Here's an example modification to your code:

BottomNavigation {
BottomAppBarItems.values().toList().forEach { item ->
    BottomNavigationItem(
        modifier = Modifier.padding(vertical = 7.dp),
        label = {
            Box(contentAlignment = Alignment.BottomCenter, modifier = 
Modifier.height(18.dp)) { // align labels to the bottom
                item.title?.let {
                    Text(
                        text = stringResource(id = it),
                        fontSize = 11.sp,
                        softWrap = false,
                        textAlign = TextAlign.Center,
                    )
                }
            }
        },
        icon = {
            item.icon?.let {
                Icon(
                    imageVector = ImageVector.vectorResource(id = it),
                    contentDescription = "Navigation Icon",
                )
            }
        },
        selected = currentDestination?.hierarchy?.any {
            it.route == item.route
        } == true,
        unselectedContentColor = LocalContentColor.current.copy(alpha = 
 ContentAlpha.disabled),
        onClick = {
            item.route?.let {
                navController.navigate(it) {
                    popUpTo(navController.graph.findStartDestination().id)
                    launchSingleTop = true
                }
            }
        }
    )
  }
}

Here, we're using a Box() with contentAlignment set to Alignment.BottomCenter around the label text, with a height of 18.dp to reduce the space between the labels and the BottomNavigationView. You can adjust this value as needed. The padding for BottomNavigationItem has been set to vertical = 7.dp to give some extra space between the icons and the labels.

thanks for answer. I edited little bit your code and apply my code and it worked. — NewPartizal, Jun 07 '23 at 10:51

why is my bottom bar titles doesn't align bottom?

1 Answers1