<p>As you know lot of android applications introduced a sliding panel menu to navigate between major modules of the application. Previously this kind of UI was done using some third party libraries where a list view and some swiping gestures used to achieve this. But now android introduced sliding panel menu by introducing a newer concept called <strong><a class="link" href="http://developer.android.com/design/patterns/navigation-drawer.html" target="_blank" rel="nofollow noopener">Navigation Drawer</a></strong> in which we combine <strong><a href="https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html" target="_blank" rel="nofollow noopener">DrawerLayout</a></strong> and <strong><a href="https://developer.android.com/reference/android/support/design/widget/NavigationView.html" target="_blank" rel="nofollow noopener">NavigationView</a></strong> to achieve the desired output.</p>
<p>The navigation drawer is a UI panel that shows your app&#8217;s main navigation menu. Most of the time Sliding Menu (Navigation Drawer) will be hidden and can be shown by swiping the screen from left edge to right or tapping the app icon on the action bar.</p>
<p>In this tutorial I will show you how to implement a navigation drawer using the <strong><a href="https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html">DrawerLayout</a></strong> APIs available in the <a href="https://developer.android.com/tools/support-library/index.html"><strong>Support Library</strong></a>.</p>
<p>Get <span style="color: #000080;"><strong>GITHUB</strong></span> code from <a href="https://github.com/arunk7839/NavigationDrawerExample"><span style="color: #00ff00;"><strong>here</strong></span></a>.</p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="muL31F3U35w" title="Android Navigation Drawer Example"><a placeholder href="https://youtu.be/muL31F3U35w"><img src="https://i.ytimg.com/vi/muL31F3U35w/hqdefault.jpg" layout="fill" object-fit="cover" alt="Android Navigation Drawer Example"></a></amp-youtube></p>
<p> ;</p>
<h3><span style="color: #000080;">Create new Project</span></h3>
<p><strong>1</strong>. Create a new project in <span style="color: #008000;"><strong>Android Studio</strong></span> from <span style="color: #008000;"><strong>File ⇒ New Project</strong></span> by filling the required details. When it prompts you to select the activity, choose <span style="color: #008000;"><strong>Empty Activity</strong></span> and continue.</p>
<p><strong>2</strong>. Open <span style="color: #008000;"><strong>build.gradle</strong></span> located in app level and add below dependencies. These dependencies are needed for navigation drawer.</p>
<pre><code>dependencies {
 implementation fileTree(dir: 'libs', include: ['*.jar'])
 implementation 'com.android.support:appcompat-v7:27.1.1'
 implementation 'com.android.support:design:27.1.1'
 implementation 'com.android.support:support-v4:27.1.1'
}</code></pre>
<h3><span style="color: #000080;">Creating Fragments &; Activities</span></h3>
<p><strong>3</strong>. Create package <span style="color: #008000;"><strong>fragment</strong></span> which contains all the fragment and leave <span style="color: #008000;"><strong>MainActivity.java</strong></span> in root package.</p>
<p><strong>4.</strong>. Create all the fragment classes needed for navigation menu. Overall I am creating five fragment classes. <strong><span style="color: #008000;">Right</span> <span style="color: #008000;">click</span></strong> on <span style="color: #008000;"><strong>fragment</strong></span> package, <strong><span style="color: #008000;">New</span> ⇒ <span style="color: #008000;">Fragment</span> ⇒ <span style="color: #008000;">Fragment (Blank)</span></strong> and name it as <span style="color: #008000;"><strong>HomeFragment.java</strong></span>. This fragment will be loaded always whenever user open the app.</p>
<p>Likewise create other fragments named <span style="color: #008000;"><strong>ImportFragment</strong>, <strong>GalleryFragment</strong>, <strong>SlideshowFragment</strong></span> and <span style="color: #008000;"><strong>ToolsFragment</strong></span> .</p>
<p><strong>5</strong>. In our navigation drawer menu, there are two other menu items, <span style="color: #008000;"><strong>SendActivity</strong></span> and <span style="color: #008000;"><strong>ShareActivity</strong></span>. For these two we are gonna create activities instead of fragments. Create new two <span style="color: #008000;"><strong>activities</strong></span> named <span style="color: #008000;"><strong>SendActivity.java</strong></span> and <span style="color: #008000;"><strong>ShareActivity.java</strong></span>.</p>
<h3><span style="color: #000080;">Adding Navigation Drawer</span></h3>
<p><strong>6</strong>. Under <strong><span style="color: #008000;">res</span> ⇒ <span style="color: #008000;">menu</span></strong> directory, create a menu xml file named <span style="color: #008000;"><strong>activity_main_drawer.xml</strong></span>. This menu renders the Navigation Drawer list items. Here we set the <span style="color: #008000;"><strong>icons</strong></span> and <span style="color: #008000;"><strong>labels</strong></span>. You can also notice here <span style="color: #008000;"><strong><;group>;</strong></span>is used to combine multiple items under single levels. An <span style="color: #008000;"><strong><;item>;</strong></span> also can be used to group multiple child items with a title. This provides a horizontal separator between the two sets.</p>
<p><strong><span style="color: #0000ff;">activity_main_drawer.xml</span></strong></p>
<pre><code><;?xml version="1.0" encoding="utf-8"?>;
<;menu xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 tools:showIn="navigation_view">;

 <;group android:checkableBehavior="single">;
 <;item
 android:id="@+id/nav_home"
 android:icon="@drawable/home2"
 android:title="Home"

 />;

 <;item
 android:id="@+id/nav_import"
 android:icon="@drawable/ic_menu_import"
 android:title="Import"

 />;
 <;item
 android:id="@+id/nav_gallery"
 android:icon="@android:drawable/ic_menu_gallery"
 android:title="Gallery" />;
 <;item
 android:id="@+id/nav_slideshow"
 android:icon="@android:drawable/ic_menu_slideshow"
 android:title="Slideshow" />;
 <;item
 android:id="@+id/nav_tools"
 android:icon="@drawable/tools"
 android:title="Tools"

 />;

 <;/group>;

 <;item android:title="Communicate">;
 <;menu>;
 <;item
 android:id="@+id/nav_share"
 android:icon="@android:drawable/ic_menu_share"
 android:title="Share" />;
 <;item
 android:id="@+id/nav_send"
 android:icon="@android:drawable/ic_menu_send"
 android:title="Send" />;

 <;/menu>;

 <;/item>;
<;/menu>;</code></pre>
<p><strong>7</strong>. Under <span style="color: #008000;"><strong>res ⇒ layout</strong></span>, create a file named <span style="color: #008000;"><strong>nav_header_main.xml</strong></span> This layout renders the navigation drawer header part with a profile image, name and email.</p>
<p><strong><span style="color: #0000ff;">nav_header_main.xml</span></strong></p>
<pre><code><;?xml version="1.0" encoding="utf-8"?>;
<;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="176dp"
 android:background="@drawable/background">;

 <;LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_marginBottom="20dp"
 android:layout_marginLeft="8dp"
 android:orientation="horizontal">;

 <;ImageView
 android:id="@+id/img_profile"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:src="@drawable/profile" />;

 <;LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignRight="@+id/img_profile"
 android:layout_marginLeft="8dp"
 android:orientation="vertical">;


 <;TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:text="Arun Kumar"
 android:textColor="@android:color/white"
 android:textSize="18sp"
 android:textStyle="bold" />;

 <;TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:text="arunkumar@gmail.com"
 android:textColor="@android:color/white"
 android:textSize="15sp"
 android:textStyle="bold" />;
 <;/LinearLayout>;
 <;/LinearLayout>;
<;/RelativeLayout>;
</code></pre>
<p><strong>8</strong>. Now we’ll create another layout file to add required <strong><span style="color: #008000;">Toolbar</span> </strong>and <span style="color: #008000;"><strong>FrameLayout</strong></span>. FrameLayout is used to load appropriate fragment when an item is selected from nav menu. Create a layout file named <span style="color: #008000;"><strong>app_bar_main.xml</strong></span> under <span style="color: #008000;"><strong>res ⇒ layout</strong>.</span></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p><strong><span style="color: #0000ff;">app_bar_main.xml</span></strong></p>
<pre><code><;?xml version="1.0" encoding="utf-8"?>;
<;RelativeLayout 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"
 android:layout_width="match_parent"
 android:layout_height="match_parent">;

 <;android.support.design.widget.AppBarLayout
 android:id="@+id/appbar_layout"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/MyMaterialTheme.AppBarOverlay">;

 <;android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 android:background="?attr/colorPrimary"
 app:popupTheme="@style/MyMaterialTheme.PopupOverlay" />;

 <;/android.support.design.widget.AppBarLayout>;

 <;FrameLayout
 android:id="@+id/frame_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_below="@+id/appbar_layout">;

 <;/FrameLayout>;


<;/RelativeLayout>;</code></pre>
<p><strong>9</strong>. Open the layout file of your main activity <span style="color: #008000;"><strong>activity_main.xml</strong></span> and add <span style="color: #008000;"><strong>NavigationView</strong></span> element. You can notice that the toolbar layout is added using <span style="color: #008000;"><strong><;include>;</strong></span> tag.</p>
<p><strong><span style="color: #0000ff;">activity_main.xml</span></strong></p>
<pre><code><;?xml version="1.0" encoding="utf-8"?>;
<;android.support.v4.widget.DrawerLayout 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"
 android:id="@+id/drawer_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:openDrawer="start"
 tools:context="com.c1ctech.navigationdrawerexample.MainActivity"
 >;

 <;include
 layout="@layout/app_bar_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />;

 <;android.support.design.widget.NavigationView
 android:id="@+id/nav_view"
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:fitsSystemWindows="true"
 app:headerLayout="@layout/nav_header_main"
 app:menu="@menu/activity_main_drawer" />;

<;/android.support.v4.widget.DrawerLayout>;</code></pre>
<p><strong>10</strong>. Now we have all the required elements in place. It’s time to open the main activity and do the necessary changes to make the navigation drawer functional. Open <span style="color: #008000;"><strong>MainActivity.java</strong></span> and modify as explained below.</p>
<p><strong><span style="color: #0000ff;">MainActivity.java</span></strong></p>
<pre><code>package com.c1ctech.navigationdrawerexample;

import android.content.Intent;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

import com.c1ctech.navigationdrawerexample.fragment.ToolsFragment;
import com.c1ctech.navigationdrawerexample.fragment.GalleryFragment;
import com.c1ctech.navigationdrawerexample.fragment.HomeFragment;
import com.c1ctech.navigationdrawerexample.fragment.ImportFragment;
import com.c1ctech.navigationdrawerexample.fragment.SlideshowFragment;


public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

 <span style="color: #008000;">//setting home as default fragment</span>
 getSupportActionBar().setTitle("Home");
 HomeFragment home_fragment = new HomeFragment();
 getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, home_fragment).commit();

 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
 this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
 drawer.addDrawerListener(toggle);
 toggle.syncState();
 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
 <span style="color: #008000;">//called when any of the given navigation items selected</span>
 navigationView.setNavigationItemSelectedListener(this);
 }

 <span style="color: #008000;">//onBackPress operation</span>
 @Override
 public void onBackPressed() {
 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
 //if navigationDrawer is open then it will close it
 if (drawer.isDrawerOpen(GravityCompat.START)) {
 drawer.closeDrawer(GravityCompat.START);
 } else {
 super.onBackPressed();
 }
 }

 @Override
 public boolean onNavigationItemSelected(MenuItem item) {

 int id = item.getItemId();

 if (id == R.id.nav_home) {
 getSupportActionBar().setTitle("Home");
 HomeFragment home_fragment = new HomeFragment();
 getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, home_fragment).commit();

 } else if (id == R.id.nav_import) {
 getSupportActionBar().setTitle("Import");
 ImportFragment import_fragment = new ImportFragment();
 getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, import_fragment).commit();
 } else if (id == R.id.nav_gallery) {
 getSupportActionBar().setTitle("Gallery");
 GalleryFragment gallery_fragment = new GalleryFragment();
 getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, gallery_fragment).commit();
 } else if (id == R.id.nav_slideshow) {
 getSupportActionBar().setTitle("Slideshow");
 SlideshowFragment slideshow_fragment = new SlideshowFragment();
 getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, slideshow_fragment).commit();
 } else if (id == R.id.nav_tools) {
 getSupportActionBar().setTitle("Tools");
 ToolsFragment tools_fragment = new ToolsFragment();
 getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, tools_fragment).commit();
 } else if (id == R.id.nav_share) {

 Intent intent = new Intent(this, ShareActivity.class);
 startActivity(intent);
 } else if (id == R.id.nav_send) {
 Intent intent = new Intent(this, SendActivity.class);
 startActivity(intent);
 }
 <span style="color: #008000;">//when item is selected then it will close the drawer</span>
 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
 drawer.closeDrawer(GravityCompat.START);

 return true;
 }
}</code></pre>
<p> ;</p>
<p><strong>When you run the app it will look like this as shown below :</strong></p>
<p><img class="wp-image-730 size-large aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/08/Screenshot_1533814462-576x1024.png" alt="" width="576" height="1024" />