A drawer layout is a sliding view that slides in when you swipe on the screen with your fingers or if you have connected it with the Navigation component, you can press on the Hamburger icon to open it as well.
A drawer layout is a sliding view that slides in when you swipe on the screen with your fingers or if you have connected it with the Navigation component, you can press on the Hamburger icon to open it as well.
Implementation
To begin, implement the DrawerLayout into the project. Go to the App level build gradle file and add the implementation. For the latest version, visit the android developer website posted in the video description.
https://developer.android.com/jetpack/androidx/releases/drawerlayout
Add the drawer
Sync the project and go to the layout that you want the drawer to appear.
Layout
If you want the drawer to appear on all pages of the navigation component, you will choose the layout with the navigation host.
If you want the drawer to appear on a specific page, you would select the individual page in the navigation component.
In addition, you’ll need to provide 2 things: content and the drawer. Swap into the design view. In the palette, select Layout and drag a layout that you want to use for the content.
In the palette again, search for NavigationView and add it to the layout as well.
Have NavigationView selected and go to the attributes pane. Set the width to wrap_content and then search for layout_gravity.
Swap back to the design view, refresh the attributes by clicking on another item in the layout and then back to the navigation view. Click on the flag icon and select start.
If we take a look at the preview, the NavigationView became the view for the sliding drawer.
Lastly, give the NavigationView and the DrawerLayout an ID.
Creating the menus
Now we need to create the menus items for the NavigationView. Right click on the res folder, go to New > Android Resource File. Give the file a name, then select menu for the resource type.
Go to the menu file. In the palette, add a menu item for each page in the navigation component.
Once you have your menu items, select each menu. Rename it and give it the same id for the page in the navigation graph.
After you have the menu file setup, go back to the layout with the drawer layout. Select the navigation view and the search for menu in the attributes pane.
Connecting the Drawer with the Navigation Component
Go to the fragment or activity class file with the drawer layout.
Inside the method, get the reference of the NavigationView and the NavigationController.
Lastly, grab the NavigationUI class and call the setupWithNavController method. Pass in the NavigationView for the first parameter and the navigation controller for the second parameter.
If we run the app, and swipe from left to right, the drawer will appear with our menu items for each page.
And if we select on another menu item, we will transition to that page.
Connect the Drawer with a Toolbar
Lets see how we can connect the drawer layout with a toolbar. Go to the layout file with the drawer layout.
Since I am using the constraint layout, I need to add the constraints. If you are using another layout make sure to set the attributes for it to be visible.
The next step is to add the information from the Navigation Graph to the DrawerLayout. Declare a AppBarConfiguration object after the navigation controller object and initialize it.
After the first setupWithNavController() method, grab the NavigationUI class, and call the setupWithNavController() method again. This time, pass in the toolbar, the navigation controller, and then the AppBarConfiguration object.
The first setupWithNavController() method is to link the navigation component with the drawer. The second call is the link the drawer with the toolbar.