Material Design Navigation Drawer Tutorial with Example

You have seen a sliding menu in many of the Android applications like of Google+, Gmail, YouTube, etc. After the launch of Material Design, you can also introduce this sliding menu to your Android applications by using Navigation Drawer. In this Material Design Navigation drawer tutorial, you will learn to use NavigationView with the help of Navigation Drawer example.

Introduction

Before the launch of material design, it was a very tough task to create Navigation Drawer. As when you want to create navigation drawer without NavigationView, you need ListView and LinearLayout with custom adapter along with other gesture controls to create the simple sliding menu.

“NavigationView represents a standard navigation menu for the application; you can populate the menu with the help of menu resource file. A drawer layout holds the NavigationView.”

Learn more about Navigation Drawer.

Understanding the Concept of NavigationView

NavigationView holds the header of the Navigation and the menu that is displayed under the header when the user opens the sliding menu. The menu contains the clickable menu items. All you need then is to implement the action listeners to capture selection events in the menu.

Navigation Drawer Example with NavigationView

1. Setting Up Environment for Navigation Drawer Example

First of all, you must setup environment for using Material Design. So for this purpose open build.gradle(module: app) and add the dependency for design.

The compileSdkVersion and targetSdkVersion should be 24.

In the <application > </application> tags of Androidmanifest.xml change the theme of your application from appTheme to NoActionBar theme.

Also add the internet permissions for your Android application, as this example will use WebView to load content from the internet. If you don’t want to use WebView, or you want to design your custom layout, then there is no need to give internet permissions.

Open AndroidManifest.xml and give internet permissions in the manifest tags.

2. Create Header for NavigationView

The most important thing for using NavigationView is the header of the Navigation menu. The header can contain a single image or multiple images along with the text. So, create a layout file which will contain the header of the NavigationView.

NavigationView header layout
NavigationView header layout

If you want to set any background of the layout i.e. any drawable image, you must specify it within the opening layout tags. The layout height, width, and orientation will then be applied to the drawable background.

header_layout.xml

3. Create Menu Items for NavigationView

The second most important component of the NavigationView is the menu items which will be displayed in the Navigation drawer. For this purpose, create a new menu directory and add the group of items as a menu resource.

menu_items.xml

4. Designing the Main Layout

Now move toward the main layout of the Navigation Drawer. First of all, create a drawer widget to place layout for Toolbar and inner layout. NavigationView is placed directly in the Drawer Layout.

In the inner layout, you can place anything you want to; you can even replace the layout with any fragment. For better understanding, Navigation Drawer example uses a simple WebView that will change its content dynamically from the Navigation menu.

4.1. Create the Toolbar

The toolbar is also a most import component of Material Design. Previously, you changed the theme of your app as toolbar will be displayed instead of ActionBar. You can also add ActionEvents in this Android application and add a new menu resource to add Action bar events. Learn more about the Material Design toolbar.

You must provide the theme and the background of the Toolbar.

4.2. Set the Layout

Now set the layout for the activity that will display the Navigation Drawer menu. This example will display a simple application will display a WebView to load components from the internet.

4.3. Create NavigationView

The NavigationView will load the header and the menu resource in sliding menu. Add  app:headerLayout and app:menu to the NavigationView through menu and layout resource files. i.e. header_layout.xml and menu_items.xml.

5. Implementing the logic to display Navigation Drawer with NavigationView

In onCreate() method of MainActivity.java declare and initialize the components for NavigationView example.

  1. First, declare and initialize Toolbar from Resource file and set toolbar as Support Action Bar
  2. Then, declare and initialize NavigationView from Resource file.
  3. Declare and initialize DrawerLayout from the Resource file.
  4. Declare and initialize WebView from the Resource file. Add automatic image loading and enable JavaScript in settings. Set WebViewClient to new WebViewClient for browsing the WebView links within the app. Also, set the ScrollBar style.
  5. Add on click event listener to the NavigationView menu items to open the desired URL in WebView.

     
  6. Finally, add toggle events so that some action can be performed on drawer open or close.
NavigationView with Navigation Drawer Example
NavigationView with Navigation Drawer Example

Displaying Circular Image in NavigationView Drawer

If you want to display a circular image on the background image of the Navigation view, then add circleimageview dependency in build.grade(module: app).

And in the header resource file add circular image i.e. any profile picture by:

(drawable resource as android:src=”<drawable reference>”)

Download NavigationView Example (Android Studio Project)

Hope that you like this tutorial. Stay tuned for more upcoming tutorials. Stay blessed!

  • very good
    How to open link “tel:”
    ?