Типова ситуація: багатомодульний Android-застосунок із п'ятьма екранами, але при перемиканні вкладок втрачається скрол списку, а кнопка "Назад" веде не туди. В одному проекті з чотирма табами відсутність saveState викликала скидання кошика у 30% користувачів — retention впав на 15%. Правильна реалізація Bottom Navigation Bar вирішує ці проблеми. Google Material Design 3 задає чіткі критерії: NavigationBar для 3–5 пунктів на телефонах, NavigationRail або NavigationDrawer для планшетів. Порушення цих правил — часта причина відхилення в Play Store за UX-consistency. Ми розробляємо навігацію, дотримуючись цих стандартів, з 8-річним досвідом в Android та 40+ проектами на Jetpack Compose.
Чому правильна навігація визначає утримання користувачів?
Користувач очікує швидкого доступу до ключових розділів. Нестабільна навігація — втрата сесії, скидання скролу, з'їдене місце — знижує retention на 20% (дослідження Material Design). Матеріальний дизайн рекомендує не більше п'яти пунктів, інакше меню перевантажене. Наш досвід: використання прапорців saveState та restoreState скорочує скарги на втрату даних удвічі.
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) } ) } } Ключові прапорці — saveState та restoreState. Без них при перемиканні табів стек навігації не очищається, і кнопка Back повертає не до попереднього таба, а через увесь стек попереднього. З XML: BottomNavigationView з Material Components + Navigation Component. setupWithNavController() пов'язує BottomNavigationView з NavController та обробляє стек автоматично.
| Характеристика | Jetpack Compose | XML (View System) |
|---|---|---|
| Гнучкість | Висока (легка кастомізація) | Середня (обмежена атрибутами) |
| Продуктивність | Відмінно (Compose — власний рендеринг) | Добре (View — перевірений роками) |
| Підтримка Material 3 | Нативна | Потребує обгортки |
| Простота реалізації | Середня (потрібне знання Compose) | Висока (прості інтеграції) |
| Адаптивність | Вбудована (через WindowSizeClass) | Потребує ручної реалізації |
Як реалізувати коректний back stack?
Navigation Component автоматично управляє back stack, якщо правильно налаштувати nav_graph. У Compose кожен таб повинен мати свій підграф. Важливо використовувати saveState та restoreState при перемиканні, щоб зберегти стан кожного таба. У XML setupWithNavController() робить це за вас, але при ручній реалізації не забудьте про ці прапорці.
Типові проблеми та їх рішення
Badge на іконці. BadgeDrawable у XML або BadgedBox у Compose для показу лічильника непрочитаних. Число більше 99 — відображається «99+», це потрібно обробляти явно.
Приховування при скролі. У Compose через NestedScrollConnection — Bottom Navigation ховається при скролі вниз і з'являється при скролі вгору. Без цього на маленьких екранах навігація з'їдає місце у контенту.
Різні Back Stack для кожного таба. Стандартний Navigation Component зберігає стан таба при перемиканні тільки з saveState = true. Без цього прапорця користувач переходить у третій таб і повертається — прокрутка скинута, стан втрачено.
Як адаптувати навігацію для планшетів і складних пристроїв?
На широких екранах (планшети, фолдери) NavigationBar потрібно замінювати на NavigationRail. WindowSizeClass визначає, який компонент показувати: Compact width → NavigationBar, Medium/Expanded → NavigationRail. За нашими даними, 70% користувачів на планшетах очікують саме Rail-інтерфейс, і його відсутність знижує оцінки в магазині.
| Характеристика | NavigationBar | NavigationRail |
|---|---|---|
| Орієнтація | Горизонтальна нижня панель | Вертикальна бічна панель |
| Кількість пунктів | 3-5 | 3-7 |
| Екран | Compact (<= 600dp) | Medium/Expanded (> 600dp) |
| Реалізація | NavigationBar (Material3) | NavigationRail (Material3) |
Покрокова реалізація Bottom Navigation Bar
- Визначте таби — не більше п'яти, кожен зі своєю іконкою та підписом.
- Налаштуйте NavGraph — для кожного таба створіть підграф з власним стеком.
- Реалізуйте NavigationBar — використовуйте наведений вище шаблон Compose або XML-аналог.
- Додайте адаптивність — за допомогою WindowSizeClass перемикайтеся між NavigationBar та NavigationRail.
- Обробіть badge — обгорніть іконку в BadgedBox та передайте лічильник.
- Приховування при скролі — опціонально, реалізуйте NestedScrollConnection.
Приклад повної конфігурації nav_graph для трьох табів
<navigation xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_nav_graph" app:startDestination="@+id/home_fragment"> <fragment android:id="@+id/home_fragment" android:name="com.example.HomeFragment" android:label="Home" app:startDestination="@+id/home_dashboard" /> <fragment android:id="@+id/search_fragment" android:name="com.example.SearchFragment" android:label="Search" /> <fragment android:id="@+id/profile_fragment" android:name="com.example.ProfileFragment" android:label="Profile" /> </navigation> Що входить у нашу роботу
- Конфігурація nav_graph для кожного таба з коректним back stack
- Інтеграція badge-сповіщень через BadgedBox/BadgeDrawable
- Реалізація приховування панелі при скролі (за бажанням)
- Адаптивний дизайн з використанням WindowSizeClass (NavigationBar ↔ NavigationRail)
- Кастомні іконки та анімації переходів
- Документація та розгорнутий коментар до коду
- Підтримка після здачі протягом 2 тижнів
Розробка Bottom Navigation Bar з урахуванням back stack, badge та адаптивності займає від 2 до 5 днів. Вартість розраховується індивідуально — оцінимо проект за 24 години. Зв'яжіться з нами, щоб обговорити деталі. Замовте розробку навігації прямо зараз — ми гарантуємо якість та відповідність гайдлайнам Play Store.