Android navigation component with bottom navigation

Bottom Navigation Bar in Android Applications

October 28, 2020

A Bottom Navigation View navigation tool enables users to explore and change to different views in an application. A Navigation Component is a set of libraries developed by Google to manage complex navigation functions like animations, transitions, etc.

Introduction

Bottom Navigation View makes applications more user-friendly during navigation. Before 2017, navigation to different fragments in an application used Fragment transactions. For applications with many fragments, writing fragment transactions became tedious.

Google developed the Navigation Component, which made the navigation process more manageable. Selecting a Bottom Navigation View icon enables users to switch to a selected view or refresh an active view.

We use a Bottom Navigation View when an application has the following:

• Three to five views.
• Views that need direct access.

A few popular mobile applications that use this navigation component are Instagram, Twitter, Youtube, etc.

Structure of a Bottom Navigation Bar

A Bottom Navigation bar is a container that contains the following:

• Inactive icon.
• Inactive text label (optional).
• Active icon.
• Active text label.

Structure of a Navigation Component

A navigation component consists of the following:

Advantages of a Bottom Navigation View using a Navigation Component

• It makes applications more user friendly.
• It eases the development processes of an application.
• It enables implementing and handling Deep Linking.
• It allows the handling of fragment transactions.
• It Offers ViewModel support.
• It offers animations and transitions support.

Disadvantages of a Bottom Navigation View using a Navigation Component

• Applications with less than three destinations cannot use it.
• Limited to only Mobiles and Tablets.
• It is challenging to implement a TabLayout

Useful Terminology

• Bottom Navigation Bar — a navigation component that enables users to explore and change to different applications’ views.
• Dependency — a statement SDK that allows us to add an external library into our projects.
• Fragment — a fragment is a sub-activity which enables more modular activity design.
• Navigation Component — a resource file that contains information used for navigation.
• Navigation Graph — a resource file that contains all the destinations in an application together with the actions and logical connections required for navigation.
• NavHost — an empty container used to display destinations contained in the navigation graph.
• NavController — an object within the NavHost that manages navigation.

Prerequisites

• You should have Android Studio installed.
• It would be best to have basic knowledge of creating Android applications.
• A basic knowledge and understanding of Java programming language and XML.

Step 1 – Create a New Project

• Open Android Studio. Select Start a new Android Studio project with an Empty Activity. We will name the project BottomNavigationBar. Click Finish and wait for the project to build.

Step 2 – Create a Navigation Graph

In this step, we will create a Navigation Graph. Add the following dependencies in your app module level build.gradle file:

Select Sync Now.

Right-click the res directory, click New в†’ Android Resource File . A menu will pop up.

We will name our resource file nav_graph.. For the Resource Type, select Navigation and then click OK . Next, we will add the destinations.

Structure of a destination

• Name — indicates whether a destination is as an activity, fragment, or a custom class.
• Label — name of the destination’s layout resource file.
• ID — contains an ID used to refer to a destination.
• Layout – the layout resource file of a destination.

Step 3 – Create a Bottom Navigation View

In this step, we will add the Bottom Navigation View to our activity’s resource file. Add a Bottom Navigation View and a NavHost in your XML Layout file.

A NavHost is an empty container used to display destinations from the navigation graph.

Note: An error for app:menu=»@menu/bottom_nav_menu» is seen. This is because it does not exist. To solve this, click Alt + Enter and select “Create resource file for bottom_nav_menu.xml”

This menu will pop up.

Select OK and the error is fixed.

Step 4 — Creating a Fragment

A Fragment is a sub-activity. Fragments are used to simplify the reuse of components and logic in different layouts. First, navigate to the Java directory and right-click. Select New в†’ Fragment в†’ Fragment(Blank) .

Name the Fragment and select Finish.

Step 5 — Adding Details and Icons to the Bottom Navigation View

First, let us add the icons required. In the res/drawable directory, right-click the drawable folder.

Select New в†’ Vector Asset .

• Asset type — provides an option of using a clipart or uploading a local file.
• Name — name of the icon.
• Size — the dimensions of the clipart
• Color — provides color options for the clipart.
• Opacity — deals with the visibility of the icon.

Select the icon next to clipart. A list of different clipart is displayed.

One can search for a clipart in the search bar and choose whether the design of the clipart should be filled or outlined. We will use the outlined design.

Once a clipart is selected, click OK в†’ Next в†’ Finish . Open the menu file in res/menu/bottom_navigation_menu and add the following lines of code:

The menu file serves as a container for menu items. Item represents one item on the menu. Each item has a title and an icon.

Step 6 — Let’s Code.

In our MainActivity.java add the following lines of code below:

First, we will initialize the Bottom Navigation view in the Activity’s onCreate method. Next, we will initialize an AppBarConfiguration object.

It is used to manage the behavior of the icons in the Navigation View. We will then pass the ID of the different destinations in the Bottom Navigation View.

Lastly, we will set up the NavController and link it with the Bottom Navigation View.

We are done! Let’s run the app.

Access the source code on Github.

Download the sample APK on this Google Drive.

To Wrap Up

We just went through the advantages and disadvantages of a Bottom Navigation View and we went through how to integrate a Bottom Navigation View using a Navigation Component to add the Navigation Views in an Android application.

Peer Review Contributions by: Linus Muema

About the author

Briana is an undergraduate student pursuing a degree in Electronics and Computer Engineering. Briana loves developing mobile applications, technical writing, and following up on UI/UX trends. She enjoys traveling and gardening.

Want to learn more about the EngEd Program?

Discover Section’s community-generated pool of resources from the next generation of engineers.

Источник

Navigation Component-дзюцу, vol. 1 — BottomNavigationView

Два года назад на Google I/O Android-разработчикам представили новое решение для навигации в приложениях — библиотеку Jetpack Navigation Component . Про маленькие приложения уже было сказано достаточно, а вот о том, с какими проблемами можно столкнуться при переводе большого приложения на Navigation Component , информации практически нет.

В этой и следующих двух статьях я расскажу о кейсах, с которыми может встретиться разработчик, желающий опробовать Navigation Component в большом Android-приложении.

UPDATE 30.12.2020:

Выводы, сделанные в этой статье, некорректны, так как при настройке BottomNavigationView была допущена серьёзная ошибка, которая повлекла за собой все описанные в статье проблемы. Подробности — в последней статье цикла.

Это текстовая версия моего выступления в рамках серии митапов по Android 11 в Android Academy. Само выступление было на английском, статью пишу на русском. Кому удобнее смотреть – велкам.

В первой статье я расскажу о кейсах, связанных с BottomNavigationView , во второй – о кейсах с вложенными графами навигации, в третьей – про навигацию в многомодульных приложениях, дип линки, встраиваемые фрагменты и диалоги. Все три статьи — лонгриды, которые, однако, способны сэкономить много времени и вам, и вашей команде.

Disclaimer

Я сделал пример, по структуре навигации повторяющий основные моменты навигации соискательского приложения hh.ru, и выхватил ряд проблем, о которых и собираюсь рассказать. Я основательно поресёрчил практическую сторону вопроса, но, разумеется, рассмотрел далеко не все возможные кейсы.

Схема моего тестового приложения выглядит так:

В цикле статей мы разберём каждый переход, который описан на этой схеме, а также несколько кейсов, которые не поместились на картинку.

Кейсы с BottomNavigationView

Когда я только-только услышал про Navigation Component , мне стало интересно: как будет работать BottomNavigationView и как Google подружит несколько отдельных back stack-ов в разных вкладках. Два года назад с этим кейсом были некоторые проблемы, и я решил проверить, как там обстоят дела сегодня.

Если кратко — проблемы не пропали, но появился способ их обойти. И, поскольку нижняя навигация сейчас есть практически в каждом большом приложении, нужно разбираться.

Первый опыт

Я установил Android Studio 4.1 Beta (последнюю более-менее стабильную версию на тот момент) и попробовал шаблон приложения с нижней навигацией. Начало было многообещающим.

• Мне сгенерировали Activity в качестве контейнера для хоста навигации и нижней навигации

Я убрал «шумовые» атрибуты, чтобы было проще читать.

Стандартный ConstraintLayout , в который добавили BottomNavigationView и тэг для инициализации NavHostFragment -а ( Android Studio , кстати, подсвечивает, что вместо фрагмента лучше использовать FragmentContainerView ).

• Для каждой вкладки BottomNavigationView был создан отдельный фрагмент

Все фрагменты были добавлены в качестве отдельных destination-ов в общий граф навигации.

• А ещё в проект был добавлен файл-ресурс для описания меню BottomNavigationView

При этом я заметил, что идентификаторы элементов меню должны совпадать с идентификаторами destination-ов в графе навигации. Не самая очевидная связь между табами BottomNavigationView и фрагментами, но работаем с тем, что есть.

Пора запускать приложение

После создания приложения из шаблона я запустил его и сразу столкнулся с двумя проблемами.

Первая проблема: при переключении между вкладками их состояние не сохранялось.

Для проверки я добавил во вкладку Dashboard простенькую ViewModel со счётчиком. На гифке видно, как я переключаюсь со вкладки Home на вкладку Dashboard , увеличиваю счётчик до четырёх. После этого я переключился обратно на вкладку Home и вновь вернулся на Dashboard . Счётчик сбросился.

Баг с описанием этой проблемы уже два года висит в Issue Tracker-е. Чтобы решить её, Google-у потребовалось серьёзно переработать внутренности фреймворка Fragment -ов, чтобы поддержать возможность работать с несколькими back stack-ами одному FragmentManager -у. Недавно на Medium вышла статья Ian Lake, в которой он рассказывает, что Google серьёзно продвинулись в этом вопросе, так что, возможно, фикс проблемы с BottomNavigationView не за горами.

Вторая проблема – следствие первой. По принятым принципам навигации, когда вы нажимаете на уже выбранную вкладку BottomNavigationView, вы должны вернуться на первый фрагмент в стеке текущей вкладки. Но когда это происходит, состояние этого первого фрагмента сбрасывается, так как сам фрагмент пересоздаётся.

Для демонстрации этой проблемы я добавил на вкладку Dashboard кнопку, которая ведёт на следующий экран. На гифке видно, как я переключаюсь на вкладку Dashboard , увеличиваю счётчик до трёх, а затем перехожу на экран Graphic . Если я нажимаю на кнопку Back – то всё работает как надо, состояние вкладки не сбрасывается. Но если, находясь на экране Graphic , я ещё раз нажму на вкладку Dashboard , то после возврата на первый экран в стеке увижу, что его состояние сброшено.

«Не самое лучшее первое впечатление», – подумал я. И начал искать фикс.

У нас есть workaround

Решение этих проблем живёт в специальном репозитории Google-а с примерами работы с Architecture Components , в проекте NavigationAdvancedSample.

Большая часть фикса расположена в файле NavigationExtensions.kt. В самом проекте довольно много кода, поэтому я не буду его разбирать подробно, а вместо этого подсвечу основные моменты, которые относятся к решению проблем.

• Во-первых, для каждой вкладки вводится отдельный, независимый граф навигации

Соответственно, для примера BottomNavigationView с тремя вкладками у нас получится три отдельных файла навигации XML, в которых в качестве startDestination будут указаны первые фрагменты вкладок.

• Во-вторых, для каждой вкладки под капотом создаётся отдельный NavHostFragment , который будет связан с графом навигации этой вкладки

FragmentManager пока что не поддерживает работу с множеством back stack-ов одновременно, поэтому пришлось придумать альтернативное решение, которое позволило ассоциировать с каждым графом свой back stack. Им стало создание отдельного NavHostFragment -а для каждого графа. Из этого следует, что с каждой вкладкой BottomNavigationView у нас будет связан отдельный NavController .

• В-третьих, мы устанавливаем в BottomNavigationView специальный listener , который будет заниматься переключением между back stack-ами фрагментов

В прикреплённом кусочке кода мы видим, как при переключении между вкладками BottomNavigationView выполняется специальная транзакция в FragmentManager -е, которая прикрепляет фрагмент выбранной вкладки и отцепляет все остальные фрагменты. По сути, так мы и переключаемся между различными back stack-ами.

• В итоге метод настройки BottomNavigationView возвращает разработчику специальную LiveData , которая содержит в себе NavController выбранной вкладки. Этот NavController можно использовать, например, для обновления надписи на ActionBar -е

Метод для настройки BottomNavigationView вызывают в onCreate -е, когда Activity создаётся в первый раз, затем в методе onRestoreInstanceState , когда Activity пересоздаётся с помощью сохранённого состояния.

Кроме того, для работы фикса нужно, чтобы идентификаторы элементов меню, которое используется для инициализации табов BottomNavigationView , совпадали с идентификаторами графов навигации.

Опять же, не самая очевидная связь между этими элементами, зато работает.

После применения этого workaround-а первые две проблемы исчезли – теперь состояние вкладки сохраняется между переключениями вкладок.

Первая проблема решилась:

Адаптация workaround-а для фрагментов

Очень здорово, что workaround помог решить основную проблему с сохранением состояний, но этих фиксов мне было недостаточно. Пример из проекта NavigationAdvancedSample использовал в качестве контейнера нижней навигации Activity, мне же нужен был фрагмент.

Посмотрите внимательно на эту схему:

На ней можно увидеть, что пользователь начинает свой путь в приложении со Splash-экрана:

Google говорит, что Splash-экраны – зло, ухудшающее UX приложения. Тем не менее, Splash-экраны – суровая реальность большинства крупных Android-приложений. И если мы хотим использовать в нашем приложении Single Activity -архитектуру, то в качестве контейнера нижней навигации придётся использовать Fragment , а не Activity :

Я добавил вёрстку для фрагмента с нижней навигацией и перенёс настройку BottomNavigationView во фрагмент:

Я добавил в свой пример Splash-экран и дополнительную вкладку для BottomNavigationView . А чтобы пример стал ещё более походить на приложение для соискателей hh.ru, я также убрал из него ActionBar .

Для этого я поменял тему приложения с Theme.MaterialComponents.DayNight.DarkActionBar на Theme.MaterialComponents.DayNight.NoActionBar и убрал код для связки NavController -а с ActionBar -ом:

После всех манипуляций я включил режим Don’t keep activities, запустил свой пример и… получил краш при сворачивании приложения.

На гифке видно, как я запустил приложение, и после Splash-экрана показывается экран с нижней навигацией. После этого мы сворачиваем приложение и получаем краш.

В чём была причина? При вызове onDestroyView активный NavHostFragment пытается отвязаться от NavController -а. Так как мой фрагмент-контейнер с нижней навигацией никак не привязывал к себе NavController , который он получил из LiveData , метод Navigation.findNavController из onDestroyView крашил приложение.

Добавляем привязку NavController -а к фрагменту с нижней навигацией (для этого в Navigation Component-е есть утилитный метод Navigation.setViewNavController ), и проблема исчезает.

Но это ещё не всё. Не выключая режим Don’t keep activities, я попробовал свернуть, а затем развернуть приложение. Оно снова упало, но с другим неприятным исключением – IllegalStateException в FragmentManager – FragmentManager already executing transactions .

На гифке видно, как мы сворачиваем приложение, находясь на экране с нижней навигацией, затем пытаемся развернуть приложение обратно и получаем краш.

Краш происходит в методах, которые прикрепляют NavHostFragment к FragmentManager -у после их создания. Это исключение можно исправить при помощи костыля: обернуть методы attach-detach в Handler.post <> .

После добавления Handler.post приложение заработало, как надо.

Выводы по работе с BottomNavigationView

На этом с BottomNavigationView всё, на следующей неделе расскажу про кейсы с вложенными графами навигации.

Источник