Разработка Bottom Navigation Bar Android-приложения
Bottom Navigation Bar — стандартный элемент навигации для приложений с 3-5 основными разделами. Google Material Design 3 определяет точные правила: когда использовать NavigationBar (3-5 пунктов), а когда NavigationRail или NavigationDrawer для планшетов. Нарушение этих правил — одна из причин отклонения приложения в ревью Play Store по критерию UX-consistency.
Jetpack Compose vs XML
С Compose: NavigationBar из androidx.compose.material3, NavigationBarItem для каждого пункта. Состояние выбранного пункта — через rememberNavController() и 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 с saveState = true и restoreState = true — ключевые флаги. Без них при переключении табов стек навигации не очищается, и кнопка Back возвращает не к предыдущему табу, а через весь стек предыдущего.
С XML: BottomNavigationView из Material Components + Navigation Component. setupWithNavController() связывает BottomNavigationView с NavController и обрабатывает стек автоматически. Для приложений на XML это проще, чем ручной контроль.
Типичные проблемы
Badge на иконке. BadgeDrawable в XML или BadgedBox в Compose для показа счётчика непрочитанных. Число больше 99 — отображается «99+», это нужно обрабатывать явно.
Скрытие при скролле. В Compose через NestedScrollConnection — Bottom Navigation прячется при скролле вниз и появляется при скролле вверх. Без этого на маленьких экранах навигация съедает место у контента.
Разные Back Stack для каждого таба. Стандартный Navigation Component сохраняет состояние таба при переключении только с saveState = true. Без этого флага пользователь переходит в третий таб и возвращается — прокрутка сброшена, состояние потеряно.
Адаптивный layout. На широких экранах (планшеты, фолдеры) BottomNavigationBar нужно заменять на NavigationRail. WindowSizeClass определяет, какой компонент показывать: Compact width → NavigationBar, Medium/Expanded → NavigationRail.
Разработка Bottom Navigation Bar с учётом back stack, badge и адаптивности: 1-3 дня. Стоимость рассчитывается индивидуально.