Типичная ситуация: многомодульное 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 часа. Средняя стоимость реализации под ключ — 80 000–120 000 руб., включая адаптивность и badge-уведомления. Свяжитесь с нами, чтобы обсудить детали. Закажите разработку навигации прямо сейчас — мы гарантируем качество и соответствие гайдлайнам Play Store.