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.
Drawer & Toolbar with Navigation Component
Hello, in this tutorial, I will show you how to add and connect a DrawerLayout and a toolbar with the Navigation Component.
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.
plugins {
...
}
android {
...
}
dependencies {
...
implementation 'androidx.drawerlayout:drawerlayout:1.1.1'
}
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.
Swap into the code view and change the root layout type into a DrawerLayout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="..."
xmlns:tools="..."
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFEB3B"
tools:context=".PageOne">
</androidx.drawerlayout.widget.DrawerLayout>
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.
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android: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.
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/sample_drawer_layout"
...>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/sample_nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</androidx.drawerlayout.widget.DrawerLayout>
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.
For the value, pass in the menu file. Since the menu file is in the menu directory of the res folder, we do @menu and then the name of the file.
Connecting the Drawer with the Navigation Component
Go to the fragment or activity class file with the drawer layout.
For a fragment, right click on the open area. Select Generate > Override Methods > and then find the onViewCreated() method.
Inside the method, get the reference of the NavigationView and the NavigationController.
@Override
public void onViewCreated( View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
NavigationView sampleNavView = view.findViewById(R.id.sample_nav_view);
NavController navController = Navigation.findNavController(view);
}
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.
@Override
public void onViewCreated( View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
NavigationView sampleNavView = view.findViewById(R.id.sample_nav_view);
NavController navController = Navigation.findNavController(view);
NavigationUI.setupWithNavController(sampleNavView, navController);
}
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.
Since I placed the drawer layout in Page one, only page one will have the drawer.
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.
In the palette search for Toolbar and add it inside the content 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.
Then give the toolbar an id.
Go to the class file with the toolbar. In the onViewCreated() method, define a reference for the Toolbar and the DrawerLayout.
@Override
public void onViewCreated( View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
DrawerLayout sampleDrwaerLayout = view.findViewById(R.id.sample_drawer_layout);
Toolbar sampleToolbar = view.findViewById(R.id.sample_toolbar);
NavigationView sampleNavView = view.findViewById(R.id.sample_nav_view);
NavController navController = Navigation.findNavController(view);
NavigationUI.setupWithNavController(sampleNavView, navController);
}
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.
@Override
public void onViewCreated( View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
DrawerLayout sampleDrwaerLayout = view.findViewById(R.id.sample_drawer_layout);
Toolbar sampleToolbar = view.findViewById(R.id.sample_toolbar);
NavigationView sampleNavView = view.findViewById(R.id.sample_nav_view);
NavController navController = Navigation.findNavController(view);
AppBarConfiguration config = new AppBarConfiguration.Builder(
navController.getGraph()
).setDrawerLayout(
sampleDrwaerLayout
).build();
NavigationUI.setupWithNavController(sampleNavView, navController);
}
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.
@Override
public void onViewCreated( View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
DrawerLayout sampleDrwaerLayout = view.findViewById(R.id.sample_drawer_layout);
Toolbar sampleToolbar = view.findViewById(R.id.sample_toolbar);
NavigationView sampleNavView = view.findViewById(R.id.sample_nav_view);
NavController navController = Navigation.findNavController(view);
AppBarConfiguration config = new AppBarConfiguration.Builder(
navController.getGraph()
).setDrawerLayout(
sampleDrwaerLayout
).build();
NavigationUI.setupWithNavController(sampleNavView, navController);
NavigationUI.setupWithNavController(sampleToolbar, navController, config);
}
The first setupWithNavController() method is to link the navigation component with the drawer. The second call is the link the drawer with the toolbar.
If we run the app, we will see a toolbar. If we click on the hamburger icon, it will open the drawer.
