Розробка Bottom Navigation Bar для Android-додатку
Bottom Navigation Bar — стандартний елемент навігації для додатків з 3-5 основними розділами. Google Material Design 3 визначає точні правила: коли використовувати NavigationBar (3-5 пунктів), коли NavigationRail або NavigationDrawer для планшетів. Порушення цих правил — одна з причин відхилення додатку під час ревю Play Store за критерієм UX-узгодженості.
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. Без цього прапора користувач переходить у третю вкладку і повертається — прокрутка скидається, стан втрачається.
Адаптивний макет. На широких екранах (планшети, складні пристрої) BottomNavigationBar повинна замінюватися на NavigationRail. WindowSizeClass визначає, який компонент показувати: Compact ширина → NavigationBar, Medium/Expanded → NavigationRail.
Розробка Bottom Navigation Bar з урахуванням back stack, badge та адаптивності: 1-3 дні. Вартість розраховується індивідуально.