Android Navigation Drawer Simple Example

By | March 6, 2017

Navigation Drawer helps developers for creating easy menus in an application.
Lets start to see how it works.

We will start by creating a new project with a navigation drawer activity.

Adding Navigation Drawer Activity

If you want to add Navigation Drawer Activity to your existing project you can simply add it by going to your package -> right click -> new -> activity -> navigation drawer activity

Android Navigation Drawer

Android Navigation Drawer

Make easy money with infolinks

This is the simplest way for creating a navigation drawer activity.


Navigation Drawer Menus

To change the menu open the activity_main_drawer.xml inside menu folder.

This is my activity_main_drawer.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/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>

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

</menu>

Try changing the values and run.

Android Navigation Drawer


Handling Events

Open you activity which has the Drawer in it. It will contain a method like this.


@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            // Handle the camera action
        } else if (id == R.id.nav_gallery) {

        } else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_send) {

        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
}


Changing Screens using Fragments for each MenuItem

For Simplicity, I am creating a Fragment for all the Menu Items which has a layout with only a TextView.

Layout Change

We will add a FrameLayout inside the content_home.xml for adding and replacing Fragments.

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="net.simplifiedcoding.navigationdrawerexample.MainActivity"
    tools:showIn="@layout/app_bar_main">
 
 
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</RelativeLayout>


MenuFragment

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MenuScreen extends Fragment {
 
	private String menuText;
 
    public static MenuScreen newInstance(String menuText) {
        MenuScreen fragment = new MenuScreen();
		this.menuText = menuText;
        return fragment;
    }
	
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable 
                     ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView tv = new TextView(this);
		tv.setText(menuText);
		return tv;		
    } 
 
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        getActivity().setTitle(menuText);
    }
}


Adding Screens for each Menu

 @SuppressWarnings("StatementWithEmptyBody")
 @Override
 public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();
		
		MenuFragment menuFragment = null;

        if (id == R.id.nav_camera) {
			menuFragment = MenuFragment.newInstance("Menu 1");			
        } else if (id == R.id.nav_gallery) {
			menuFragment = MenuFragment.newInstance("Menu 2");		
        } else if (id == R.id.nav_slideshow) {
			menuFragment = MenuFragment.newInstance("Menu 3");		
        } else if (id == R.id.nav_manage) {
			menuFragment = MenuFragment.newInstance("Menu 4");		
        } else if (id == R.id.nav_share) {
			menuFragment = MenuFragment.newInstance("Menu 5");		
        } else if (id == R.id.nav_send) {
			menuFragment = MenuFragment.newInstance("Menu 6");		
        }
		
		// replacing the fragment
        if (menuFragment != null) {
            FragmentTransaction ft = getSupportFragmentManager()
                                             .beginTransaction();
            ft.replace(R.id.content_frame, fragment).commit();
        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
}

Make easy money with infolinks


Display First Screen

To Display the first screen we will add the first fragment in the onCreate of the Activity.


@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        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.setDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) 
                                        findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

        if (savedInstanceState == null) {
            EmployeeFragmentFragment employeeFragmentFragment =  
                                             new EmployeeFragmentFragment();
            FragmentTransaction ft = getSupportFragmentManager()
                                                         .beginTransaction();
            ft.add(R.id.content_frame, employeeFragmentFragment).commit();
        }
}	

All Done.

Please send your valuable comments to coderzheaven@gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *