4. Building App Navigation

Overview

In this chapter, you will build user-friendly app navigation through three primary patterns: bottom navigation, the navigation drawer, and tabbed navigation. Through guided theory and practice, you will learn how each of these patterns works so that users can easily access your app's content. This chapter will also focus on making the user aware of where they are in the app and which level of your app's hierarchy they can navigate to.

By the end of this chapter, you will know how to use these three primary navigation patterns and understand how they work with the app bar to support navigation.

Introduction

In the previous chapter, you explored fragments and the fragment lifecycle, and employed Jetpack navigation to simplify their use in your apps. In this chapter, you will learn how to add different types of navigation to your app while continuing to use Jetpack navigation. You will start off by learning about the navigation drawer, the earliest widely adopted navigational pattern used in Android apps, before exploring bottom navigation and tab navigation. You'll learn about the Android navigation user flow, how it is built around destinations, and how they govern navigation within the app. The difference between primary and secondary destinations will be explained, as well as which one of the three primary navigation patterns is more suitable, depending on your app's use case.

Let's get started with a navigation overview.

Navigation Overview

The Android navigation user flow is built around what are called destinations within your app. There are primary destinations that are available at the top level of your app and, subsequently, are always displayed in the main app navigation and secondary destinations. A guiding principle of each of the three navigation patterns is to contextually provide information about the main section of the app the user is in at any point in time.

This can take the form of a label in the top app bar of the destination the user is in, optionally displaying an arrow hint that the user is not at the top level, and/or providing highlighted text and icons in the UI that indicate the section the user is in. Navigation in your app should be fluid and natural, intuitively guiding the user while also providing some context of where they are at any given point in time. Each of the three navigation patterns you are about to explore accomplishes this goal in varying ways. Some of these...

Navigation Drawer

The navigation drawer is one of the most common navigation patterns used in Android apps and was certainly the first pattern to be widely adopted. The following is a screenshot of the culmination of the next exercise, which shows a simple navigation drawer in its closed state:

Figure 4.1: App with the navigation drawer closed

The navigation drawer is accessed through what has become commonly known as the hamburger menu, which is the icon with three horizontal lines at the top left of Figure 4.1. The navigation options are not visible on the screen, but contextual information about the screen you are on is displayed in the top app bar. This can also be accompanied by an overflow menu on the right-hand side of the screen, through which other contextually relevant navigation options can be accessed. The following screenshot is of a navigation drawer in the open state, showing all the navigation options:

Figure 4.2:...

Bottom Navigation

Bottom navigation is used when there are a limited number of top-level destinations, and these can range from three to five primary destinations that are not related to each other. Each item on the bottom navigation bar displays an icon and an optional text label. This navigation allows quick access as the items are always available, no matter which secondary destination of the app the user navigates to.

Exercise 4.02: Adding Bottom Navigation to Your App

Create a new app in Android Studio named Bottom Navigation using the Empty Activity project template, leaving all the other defaults as they are. Do not use the Bottom Navigation Activity project template as we are going to use incremental steps to build the app. You are going to build a loyalty app that provides offers, rewards, and so on for customers who have signed up to use it. Bottom navigation is quite common for this kind of app because, typically, there will be limited top-level destinations. Let...

Tabbed Navigation

Tabbed navigation is mostly used when you want to display related items. It is common to have fixed tabs if there's only a few of them (typically between two and five tabs) and scrolling horizontal tabs if you have more than five tabs. They are used mostly for grouping destinations that are at the same hierarchical level.

This can be the primary navigation if the destinations are related. This might be the case if the app you developed is in a narrow or specific subject field where the primary destinations are related, such as a news app. More commonly, it is used with bottom navigation to present secondary navigation that's available within a primary destination. The following exercise demonstrates using tabbed navigation for displaying related items.

Exercise 4.03: Using Tabs for App Navigation

Create a new app in Android Studio with an empty activity named Tab Navigation. You are going to build a skeleton movies app that displays the genres...

Summary

This chapter has covered the most important navigation techniques you need to know about in order to create clear and consistent navigation in your apps. You started off by learning how to create an Android Studio project with a navigation drawer to connect navigation menu items to individual fragments using Jetpack navigation. You then progressed to actions within Jetpack navigation to navigate to other secondary destinations in your app within the navigation graph.

The next exercise then used bottom navigation to display primary navigation destinations that are always visible on the screen. We followed this by looking at tabbed navigation, where you learned how to display both fixed and scrollable tabs. For each different navigational pattern, you were shown when it might be more suitable to use, depending on the type of app you were building. We finished this chapter by building our own app using one or more of these navigational patterns and adding both primary and secondary...