In this Tutorial I am going to discuss about How to create navigation drawer in android app with the help of fragments to switch between different navigation menu ?

Navigation Drawer in Android creates a simple or standard Navigation menu in Application with the help of DrawerLayout as a parent layout and NavigationView widget.

NavigationView is an easy way to display a navigation menu from a menu resource in conjunction with DrawerLayout to implement a well design navigation menu over appbar layout . NavigationView is widget of design support library .

1. Create a New Project :

Lets we start with a new project in Android Studio from File New Project ⇒
select Empty Activity and go through it.

2. Implement Design support library :

Implement Design support Library inside your project build.gradle file .

implementation 'com.android.support:design:28.0.0'

Try to add the latest version of the Design support library. Once that’s done, save the file and perform a Gradle sync.

3. Implement DrawerLayout and Navigation view to the XML Layout :

Add DrawerLayout as a parent layout and NavigationView as direct child of DrawerLayout also we add FrameLayout to your XML Layout file i.e. activity_main.xml to switch between different fragments when select a Navigation menu to display it for better user experience or just add the following code to activity_main.xml file .

activity_main.xml :

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
     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"
     tools:openDrawer="start">

     <FrameLayout
        android:id="@+id/viewLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

     <android.support.design.widget.NavigationView
         android:id="@+id/nav_View"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_gravity="start"
         app:menu="@menu/nav_menu" />
 </android.support.v4.widget.DrawerLayout>

4.Create menu resourse file :

Create menu resourse file inside res/menu/nav_menu.xml .

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="nav_View">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/action_home"
            android:enabled="true"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="@string/home"
            app:showAsAction="ifRoom" />
        <item
            android:id="@+id/action_msg"
            android:enabled="true"
            android:icon="@drawable/ic_message_black_24dp"
            android:title="@string/msg"
            app:showAsAction="ifRoom" />
        <item
            android:id="@+id/action_video"
            android:enabled="true"
            android:icon="@drawable/ic_ondemand_video_black_24dp"
            android:title="@string/video"
            app:showAsAction="ifRoom" />

    </group>
    <item android:title="General">
        <menu>
            <item
                android:id="@+id/action_info"
                android:enabled="true"
                android:icon="@drawable/ic_notifications_black_24dp"
                android:title="@string/info"
                app:showAsAction="ifRoom" />
            <item
                android:id="@+id/contact"
                android:title="@string/con"
                android:enabled="true"             
                android:icon="@drawable/ic_contact_black_24dp"
                app:showAsAction="ifRoom"/>

        </menu>
    </item>

</menu>

5.Create Fragments for each of the views :

Here we create four fragments named as Home, Message, Video, Notification and ContactUs .
You can read our last tutorial for How to create Fragments in android ?

6. string.xml  :

Add the following lines to values/string.xml file .

<resources>
    <string name="app_name">Floating Action Button</string>
    <string name="home">Home</string>
    <string name="msg">Message</string>
    <string name="video">Video</string>
    <string name="info">Notification</string>
    <string name="con">Contact_Us</string>

    <string name="open">Open</string>
    <string name="close">Close</string>

</resources>

7. Implement onNavigationItemSelectedListener of Navigation view :

Now implement onNavigationItemSelectedListener of Navigation view to switch between different fragments in MainActivity.java file .

@Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        Fragment fragment;
        switch (menuItem.getItemId()) {
            case R.id.action_home:
                fragment = home;
                setTitle(menuItem.getTitle());
                break;
            case R.id.action_msg:
                fragment = msg;
                setTitle(menuItem.getTitle());
                break;
            case R.id.action_video:
                fragment = video;
                setTitle(menuItem.getTitle());
                break;
            case R.id.action_info:
		fragment = noti;
                setTitle(menuItem.getTitle());
                break;
	    case R.id.contact:
            default:
                fragment = contact;
                setTitle(menuItem.getTitle());
                break;

        }
        fragmentManager.beginTransaction().replace(R.id.viewLayout, fragment).commit();
        mDrawer.closeDrawers();
        return true;

    }

MainActivity.java :

 package com.technxtcodelabs;

import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.FrameLayout;


public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener{

    DrawerLayout mDrawer;
    ActionBarDrawerToggle mToggle;
    NavigationView nav_View;
    FragmentManager fragmentManager;
    FrameLayout viewLayout;
    Home home;
    Message msg;
    Video video;
    ContactUs contact;
    Notification noti;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mDrawer = (DrawerLayout)findViewById(R.id.drawer);
        mToggle = new ActionBarDrawerToggle(this,mDrawer,R.string.open,R.string.close);
        mDrawer.addDrawerListener(mToggle);
        mToggle.syncState();
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        nav_View = (NavigationView)findViewById(R.id.nav_View);
        nav_View.setNavigationItemSelectedListener(this);
        viewLayout = (FrameLayout)findViewById(R.id.viewLayout);
        fragmentManager = getSupportFragmentManager();

        // Declare fragments here
        home = new Home();
        msg = new Message();
        video = new Video();
        noti = new Notification();
	contact = new ContactUs();

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (mToggle.onOptionsItemSelected(item)){
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        Fragment fragment;
        switch (menuItem.getItemId()) {
            case R.id.action_home:
                fragment = home;
                setTitle(menuItem.getTitle());
                break;
            case R.id.action_msg:
                fragment = msg;
                setTitle(menuItem.getTitle());
                break;
            case R.id.action_video:
                fragment = video;
                setTitle(menuItem.getTitle());
                break;
            case R.id.action_info:
		fragment = noti;
                setTitle(menuItem.getTitle());
                break;
	    case R.id.contact:
            default:
                fragment = contact;
                setTitle(menuItem.getTitle());
                break;

        }
        fragmentManager.beginTransaction().replace(R.id.viewLayout, fragment).commit();
        mDrawer.closeDrawers();
        return true;

    }
}

Now run the project/app in android device or any Emulator to add Navigation View in android app.

%d bloggers like this: