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.

dependencies {
    ...

    compile 'com.android.support:design:24.1.0'
}

dependencies {

...

compile 'com.android.support:design:24.1.0'

}

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.

<application
        ...
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        ... />

<application

...

android:theme="@style/Theme.AppCompat.Light.NoActionBar">

... />

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.

<manifest>

   ...

   <uses-permission android:name="android.permission.INTERNET" />
</manifest>

...

<uses-permission android:name="android.permission.INTERNET" />

</manifest>

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.

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="210dp"
    android:background="@drawable/bh">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Beginners Heap"
        android:textColor="#fff"
        android:id="@+id/textView"
        android:layout_above="@+id/textView2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ASP.NET, C#, Java, Android and Web Tutorials for Beginners"
        android:textColor="#fff"
        android:id="@+id/textView2"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="210dp"

android:background="@drawable/bh">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textAppearance="?android:attr/textAppearanceLarge"

android:text="Beginners Heap"

android:textColor="#fff"

android:id="@+id/textView"

android:layout_above="@+id/textView2"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="ASP.NET, C#, Java, Android and Web Tutorials for Beginners"

android:textColor="#fff"

android:id="@+id/textView2"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

</RelativeLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/home"
            android:checked="false"
            android:title="Home" />

        <item
            android:id="@+id/about"
            android:checked="false"
            android:title="About" />

        <item
            android:id="@+id/contact"
            android:checked="false"
            android:title="Contact" />
    </group>
</menu>

<?xml version="1.0" encoding="utf-8"?>

<item

android:id="@+id/home"

android:checked="false"

android:title="Home" />

<item

android:id="@+id/about"

android:checked="false"

android:title="About" />

<item

android:id="@+id/contact"

android:checked="false"

android:title="Contact" />

</group>

</menu>

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.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.muneeb.navigationviewexample.MainActivity"
        android:orientation="vertical">

        <!-- Toolbar --!>

        <!-- Layout --!>

    </LinearLayout>

    <!-- NavigationView --!>

</android.support.v4.widget.DrawerLayout>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/drawer"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context=".MainActivity">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.example.muneeb.navigationviewexample.MainActivity"

android:orientation="vertical">

<!-- Toolbar --!>

<!-- Layout --!>

</LinearLayout>

<!-- NavigationView --!>

</android.support.v4.widget.DrawerLayout>

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.

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/abc_action_bar_default_height_material"
            app:theme="@style/Theme.AppCompat.Light.NoActionBar"
            android:background="#fff"/>

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="@dimen/abc_action_bar_default_height_material"

app:theme="@style/Theme.AppCompat.Light.NoActionBar"

android:background="#fff"/>

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.

        <RelativeLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <WebView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/webView"
                android:layout_gravity="center"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true" />
        </RelativeLayout>

<RelativeLayout

android:id="@+id/frame"

android:layout_width="match_parent"

android:layout_height="match_parent">

<WebView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/webView"

android:layout_gravity="center"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

</RelativeLayout>

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.

<android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        app:headerLayout="@layout/header_layout"
        app:menu="@menu/menu_items"
        />

<android.support.design.widget.NavigationView

android:id="@+id/navigation_view"

android:layout_height="match_parent"

android:layout_width="wrap_content"

android:layout_gravity="start"

app:headerLayout="@layout/header_layout"

app:menu="@menu/menu_items"

5. Implementing the logic to display Navigation Drawer with NavigationView

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

First, declare and initialize Toolbar from Resource file and set toolbar as Support Action Bar

//declare and initialize Toolbar and set as action bar. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);

1
2
3

//declare and initialize Toolbar and set as action bar.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Then, declare and initialize NavigationView from Resource file.

//declare and initialize NavigationView NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);

1
2

//declare and initialize NavigationView
NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
Declare and initialize DrawerLayout from the Resource file.

// Declaring and Initializing Drawer Layout and ActionBarToggle final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer);

1
2

// Declaring and Initializing Drawer Layout and ActionBarToggle
final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer);

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.

final WebView web =(WebView) findViewById(R.id.webView);

web.getSettings().setLoadsImagesAutomatically(true);
web.setWebViewClient(new WebViewClient());
web.getSettings().setJavaScriptEnabled(true);
web.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

final WebView web =(WebView) findViewById(R.id.webView);

web.getSettings().setLoadsImagesAutomatically(true);

web.setWebViewClient(new WebViewClient());

web.getSettings().setJavaScriptEnabled(true);

web.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

Add on click event listener to the NavigationView menu items to open the desired URL in WebView.

       //Setting Navigation View Item Selected Listener to handle the item click of the navigation menu
 
       navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                if(menuItem.isChecked()) menuItem.setChecked(false);
                else menuItem.setChecked(true);

                //Closing drawer on item click
                drawerLayout.closeDrawers();

                //Check clicked item and perform appropriate action
                switch (menuItem.getItemId()) {


                    //Populating main content using webview on the basis of selected menu item
                    case R.id.home: 
                    {
                        web.loadUrl("https://www.beginnersheap.com/");
                        return true;
                    }
                    case R.id.contact:
                    {
                        web.loadUrl("https://www.beginnersheap.com/contact/");
                        return true;
                    }
                    case R.id.about:
                    {
                        web.loadUrl("https://www.beginnersheap.com/about/");
                        return true;
                    }
                    default:
                    {
                        return false;
                    }
                }

            }
        });

//Setting Navigation View Item Selected Listener to handle the item click of the navigation menu

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(MenuItem menuItem) {

if(menuItem.isChecked()) menuItem.setChecked(false);

else menuItem.setChecked(true);

//Closing drawer on item click

drawerLayout.closeDrawers();

//Check clicked item and perform appropriate action

switch (menuItem.getItemId()) {

//Populating main content using webview on the basis of selected menu item

case R.id.home:

{

web.loadUrl("https://www.beginnersheap.com/");

return true;

}

case R.id.contact:

{

web.loadUrl("https://www.beginnersheap.com/contact/");

return true;

}

case R.id.about:

{

web.loadUrl("https://www.beginnersheap.com/about/");

return true;

}

default:

{

return false;

}

});

Finally, add toggle events so that some action can be performed on drawer open or close.

ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar, R.string.close, R.string.open){

            @Override
            public void onDrawerClosed(View drawerView) {
                // Code here will be triggered when the drawer closes
                super.onDrawerClosed(drawerView);
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                // Code here will be triggered when the drawer will open
                super.onDrawerOpened(drawerView);
            }
        };

        //Setting the actionbarToggle to drawer layout
        drawerLayout.addDrawerListener(actionBarDrawerToggle);

        //calling sync state is necessay or else your hamburger icon wont show up
        actionBarDrawerToggle.syncState();

ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar, R.string.close, R.string.open){

@Override

public void onDrawerClosed(View drawerView) {

// Code here will be triggered when the drawer closes

super.onDrawerClosed(drawerView);

}

@Override

public void onDrawerOpened(View drawerView) {

// Code here will be triggered when the drawer will open

super.onDrawerOpened(drawerView);

}

};

//Setting the actionbarToggle to drawer layout

drawerLayout.addDrawerListener(actionBarDrawerToggle);

//calling sync state is necessay or else your hamburger icon wont show up

actionBarDrawerToggle.syncState();

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).

compile 'de.hdodenhof:circleimageview:1.3.0'

1	compile 'de.hdodenhof:circleimageview:1.3.0'

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

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

<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
        android:layout_width="76dp"
        android:layout_height="76dp"
        android:src="@drawable/circular_image"
        app:border_color="#FF000000"
        android:layout_marginLeft="24dp"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginStart="24dp" />

<de.hdodenhof.circleimageview.CircleImageView

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/profile_image"

android:layout_width="76dp"

android:layout_height="76dp"

android:src="@drawable/circular_image"

app:border_color="#FF000000"

android:layout_marginLeft="24dp"

android:layout_centerVertical="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_marginStart="24dp" />

Download NavigationView Example (Android Studio Project)

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

Material Design Navigation Drawer Tutorial with Example

Introduction

Understanding the Concept of NavigationView

Navigation Drawer Example with NavigationView

1. Setting Up Environment for Navigation Drawer Example

2. Create Header for NavigationView

3. Create Menu Items for NavigationView

4. Designing the Main Layout

4.1. Create the Toolbar

4.2. Set the Layout

4.3. Create NavigationView

5. Implementing the logic to display Navigation Drawer with NavigationView

Displaying Circular Image in NavigationView Drawer

One thought on “Material Design Navigation Drawer Tutorial with Example”

Leave a Reply Cancel reply

Introduction

Understanding the Concept of NavigationView

Navigation Drawer Example with NavigationView

1. Setting Up Environment for Navigation Drawer Example

2. Create Header for NavigationView

3. Create Menu Items for NavigationView

4. Designing the Main Layout

4.1. Create the Toolbar

4.2. Set the Layout

4.3. Create NavigationView

5. Implementing the logic to display Navigation Drawer with NavigationView

Displaying Circular Image in NavigationView Drawer

Share this:

One thought on “Material Design Navigation Drawer Tutorial with Example”

Leave a Reply Cancel reply