fbpx

Navigation component – Navigation drawer

Reading Time: 5 minutes
In the very last chapter (Passing data) of the Navigation component tutorial, we were talking about how we can pass data between fragments, when we click on a button. In this chapter we are going to talk about how we can use Navigation component together with Navigation Drawer.

NavigationView (Navigation Drawer) is an easy way to display a navigation menu from a menu resource.

This is most commonly used in conjunction with DrawerLayout to implement Material navigation drawers. Navigation drawers are modal elevated dialogs that come from the start/left side, used to display in-app navigation links.

GitHub

If you haven’t done the previous chapters, then from GitHub you can download the starter project for this chapter.

GitHub – pass_data branch

Step 1 – Create the menu

In our case, the NavigationView will be defined in the activity_main.xml file. Before the implementation, we are going to start by created the menu for the drawer. First we will create a new folder in the res folder, called “menu”. So click on the res folder with the right mouse button. Then select New and Directory.  Name the new folder as “menu”.

In this folder we are going to create a new ressource file. So click again with the right mouse button on the menu folder, select New and Menu ressource file. Name the new file as menu_nav_drawer.

Copy and paste the code below into the menu_nav_drawer.xml file.


menu_nav_drawer.xml

Next I gonna show you, how you can create an icon in one example. Then you can create the rest in the same way. So click on the res -> drawable folder with the right mouse button, then select New and Vector asset. In the popup window name the asset as “ic_location”. Thenafter click on the icon in the row of the Clip Art. From the popup window select an icon and click on the OK button. The rest can stay the default one, so click on the Next then on the Finish button.


Similarly create 3 more icons with the rest of the above mentioned names.

It is important to have the same id in the menu, what you have in the navigation graph as id of the destination fragment. For example, the id of the first menu item is fragment_1. If you open the navigation_graph.xml file, then the id of the Fragment_1 is also fragment_1. If they don’t match, then the navigation won’t work.

Step 2 – Create the header of the drawer

Before we add the NavigationView to the activity_main.xml file, we should create a header also. It will contain an ImageView and two TextViews.

So click again with the the right mouse button on the layout folder, which is located in the res folder. From the menu select New, then “Layout ressource file”. In the popup window name it as “header_nav_drawer” and click on the OK button.

Copy and paste the code below in the header_nav_drawer.xml file.


header_nav_drawer.xml

You will have again some errors. So let’s fix them.

First, we are going to add some new colors to the colors.xml file.
You can find it here: res -> values.


new colors

You can download the background of the root ViewGroup and the source of the ImageView, using the below link.

Download assets

Extract the .zip file and move the folders into the res folder of your project using the file explorer.

Step 3 – Add the NavigationView

Finally we can add the NavigationView to the activity_main.xml. So, paste the below code into the xml file, after the layout of the app_bar_nav_drawer.


NavigationView

Again, an error. In the activity_main.xml, we are using currently ConstraintLayout as the root ViewGroup, what we have to change to DrawerLayout.

So remove the ConstraintLayout and change it to DrawerLayout.

Step 4 – Add the drawer to the MainActivity

Finally the last step, before we can run the app. In the MainActivity::class we have to add the Toolbar and Navigation drawer as well, because the onCreate() method will initiate them.

First, we are going to define a member variable. This will be an instance of the NavController. Navigating to a destination is done using a NavController, which manages the app navigation within a NavHost. So copy and paste the below variable into the MainActivity::class.

private lateinit var navController: NavController

Second, we will add the Toolbar to the activity’s onCreate() method as the ActionBar.


The Toolbar

Third, we will set the initial value of the navController variable, also in the onCreate() method.

navController = Navigation.findNavController(this, R.id.container)

The container is the id of the <fragment>, which is located in the app_bar_nav_drawer.xml file.

Next is the ActionBarDrawerToggle. This class provides a handy way to tie together the functionality of DrawerLayout and the framework ActionBar to implement the recommended design for navigation drawers.

Paste the code again into the onCreate() method, after the previous codes.


ActionBarDrawerToggle

The drawer_layout is the id of the DrawerLayout, which is the root ViewGroup of the activity_main.xml file.

To attach the navigation graph we should call the extension function setupWithNavController of BottomNavigationView as shown in the code snippet below.


setupActionBarWithNavController

After this step the MainActivity::class should look like this:


setupActionBarWithNavController

Run the app

Finally we can run the app on your device. It should work fine except one thing. When you navigate to the Fragment_2, …3 or …4, then a back arrow will be visible on the ToolBar. It is there, because in our app only the Fragment_1 is defined as a top-level fragment.

Step 5 – Top-level fragments

To have the hamburger button on the AppBar of dedicated fragments, we should add them using AppBarConfiguration. Connecting the ToolBar, the NavController and AppBarConfiguration together, makes the NavController aware of top-level fragments defined in the appBarConfiguration variable.

Therefore we are going to make a member variable in the MainActivity::class, where we will add a set of the top-level fragments to AppBarConfiguration.


appBarConfiguration 

Then we should connect the ToolBar, the NavController and AppBarConfiguration together.


appBarConfiguration 
Navigate to Fragment_5

In short, to show you how does the configuration of the AppBar works, we are going to add the click listener to the button of the Fragment_4.

So, open the Fragment_4::class and paste the below code after the onCreateView() method.


appBarConfiguration 

If you click on the button of Fragment_4, then the Fragment_5 pops up. Because the Fragment_5 is not a top-level fragment, the back arrow will be on the ToolBar instead of the hamburger button. If you click on it, then the Fragment_5 will be cleared from the back stack and the Fragment_4 gonna be again on the screen.

Run again the app

Summary, if you run now the app, then on the ToolBar the hamburger button will be visible, if you are on the top-level fragments instead of the back arrow.

GitHub

The source code is available on GitHub

GitHub – navigation_drawer branch

Questions

Finally, i hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Click to rate this post!
[Total: 0 Average: 0]
Follow and like us:

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications