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.
If you haven’t done the previous chapters, then from GitHub you can download the starter project for this chapter.
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.
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.
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.
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.
You can download the background of the root ViewGroup and the source of the ImageView, using the below link.
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.
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.
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.
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.
After this step the MainActivity::class should look like this:
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.
Then we should connect the ToolBar, the NavController and AppBarConfiguration together.
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.
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.
The source code is available on GitHub
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! 🙂