Development of Bottom Navigation Bar for Android Application
Bottom Navigation Bar is a standard navigation element for applications with 3-5 main sections. Google Material Design 3 defines precise rules: when to use NavigationBar (3-5 items), when to use NavigationRail or NavigationDrawer for tablets. Violating these rules is one of the reasons apps are rejected during Play Store review for UX consistency.
Jetpack Compose vs XML
With Compose: NavigationBar from androidx.compose.material3, NavigationBarItem for each menu item. State of selected item managed through rememberNavController() and currentBackStackEntryAsState():
NavigationBar {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
items.forEach { item ->
NavigationBarItem(
selected = currentRoute == item.route,
onClick = {
navController.navigate(item.route) {
popUpTo(navController.graph.findStartDestination().id) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
},
icon = { Icon(item.icon, contentDescription = item.label) },
label = { Text(item.label) }
)
}
}
popUpTo with saveState = true and restoreState = true are key flags. Without them, navigation stack isn't cleared when switching tabs, and Back button doesn't return to previous tab but through entire previous stack.
With XML: BottomNavigationView from Material Components + Navigation Component. setupWithNavController() binds BottomNavigationView to NavController and handles stack automatically. For XML-based apps this is simpler than manual control.
Typical Issues
Badge on icon. BadgeDrawable in XML or BadgedBox in Compose to show unread counters. Numbers above 99 display as "99+", requiring explicit handling.
Hiding on scroll. In Compose via NestedScrollConnection — Bottom Navigation hides when scrolling down and reappears when scrolling up. Without this, navigation consumes screen space on small devices.
Separate Back Stack per tab. Standard Navigation Component preserves tab state only with saveState = true. Without this flag, user switches to third tab and returns — scroll position resets, state lost.
Adaptive layout. On wide screens (tablets, foldables) BottomNavigationBar should be replaced with NavigationRail. WindowSizeClass determines which component to show: Compact width → NavigationBar, Medium/Expanded → NavigationRail.
Development of Bottom Navigation Bar with back stack, badge, and adaptivity: 1-3 days. Cost calculated individually.