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.
