Navigation Drawer Android Studio

Navigation Drawer is one of the most important UI component for providing proper Navigation. In this tutorial we are going to implement Material Design Sliding navigation Drawer using NavigationView widget from the latest Design Support library.

Creating Project

Here I have created a Android Studio project with package com.androidproject.raj also Activity as MainActivityand layout as activity_main.

Complete Project Files

We need to add dependency for the Design Support library. Add the following dependency.

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

Note : Newer version Android Studio adds this dependency automatically when you create new project.

The dependencies block would look similar to,

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

testCompile 'junit:junit:4.12'

compile 'com.android.support:appcompat-v7:24.2.0'

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

}

Creating Navigation Menu

Previously we used ListView or RecyclerView to inflate Navigation Drawer. The new NavigationView widget from the Design Support library makes this task easier. Just define the menu items in a menu file in res/menu directory. Here I have created menu_navigation.xml. The menu item should be defined as,

<item

android:id="@+id/home"

android:title="Home"

android:icon="@drawable/ic_home"/>

The id, title and icon property should be defined. We can group multiple menu items. The checkableBehavior property is to set selectable behavior for the menu item.

The complete navigation menu is given by,

menu_navigation.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:title="Home"

android:icon="@drawable/ic_home"/> // choose your package image

<item

android:id="@+id/settings"

android:title="Settings"

android:icon="@drawable/ic_setting"/>// choose your package image

<item

android:id="@+id/trash"

android:title="Trash"

android:icon="@drawable/ic_trash"/>// choose your package image

<item

android:id="@+id/logout"

android:title="Logout"

android:icon="@drawable/ic_exit"/>// choose your package image

</group>

</menu>

Creating Layout

Our main layout should contain DrawerLayout as parent. The NavigationView widget should be child of DrawerLayout. The Navigation menu is set using the menu property of Namespace app. The NavigationView is defined as,

<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/nav_header"

app:menu="@menu/menu_navigation"/>

The header layout is set using headerLayout property. The header layout is the layout which is displayed above Navigation menu which displays icon and email. Our header layout has a ImageView and TextView.

The header layout is given by,

nav_header.xml

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

<LinearLayout

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

android:orientation="vertical"

android:paddingTop="20dp"

android:paddingBottom="20dp"

android:background="@color/colorPrimaryDark"

android:layout_width="match_parent"

android:layout_height="190dp">

<ImageView

android:src="@drawable/ic_person"

android:layout_width="wrap_content"

android:layout_gravity="center"

android:layout_weight="1"

android:layout_height="0dp" />

<TextView

android:id="@+id/tv_email"

android:textColor="@color/White"

android:textSize="18sp"

android:layout_gravity="center"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

Our CoordinatorLayout has content_main.xml layout, which displays a single TextView.

content_main.xml

<?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"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context="com.learn2crack.navigationdrawer.MainActivity"

tools:showIn="@layout/activity_main">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:textSize="24sp"

android:text="Navigation Drawer" />

</RelativeLayout>

The complete main activity layout is given by,

activity_main.xml

<?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"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:openDrawer="start">

<android.support.design.widget.CoordinatorLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context="com.learn2crack.myapplication.MainActivity">

<android.support.design.widget.AppBarLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.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/AppTheme.PopupOverlay" />

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

<include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

<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/nav_header"

app:menu="@menu/menu_navigation"/>

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

Creating Activity

In the initNavigationDrawer() method we initialize the NavigationView and DrawerLayout. Click in the navigation menu items are handled by implementing the interface NavigationView.OnNavigationItemSelectedListener.

When the Navigation Drawer is opened the Hamburger menu transforms to back arrow. It is achieved using the ActionBarDrawerToggle. Add the following two string definition to strings.xml.

<string name="drawer_open">Open</string>

<string name="drawer_close">Close</string>

The ActionBarDrawerToggle is defined as

ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close){

@Override

public void onDrawerClosed(View v){

super.onDrawerClosed(v);

}

@Override

public void onDrawerOpened(View v) {

super.onDrawerOpened(v);

}

};

Then the ActionBarDrawerToggle is added to DrawerLayout using addDrawerListener() method. Also syncState() method should be called on ActionBarDrawerToggle object. Remember we defined the header view with ImageView and TextView. Now lets see how to set email to that TextView. The header view View object can be obtained by calling the getHeaderView() method on the NavigationView object. Now we can create a TextView object using the view object.

View header = navigationView.getHeaderView(0);

TextView tv_email = (TextView)header.findViewById(R.id.tv_email);

tv_email.setText("raj.amalw@learn2crack.com");

Where 0 in the getHeaderView() denotes the header view index. The complete Main Activity is given by,

MainActivity.java

package com.androidproject.raj.navigationdrawer;

import android.os.Bundle;

import android.support.design.widget.NavigationView;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarDrawerToggle;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.view.MenuItem;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private DrawerLayout drawerLayout;

private Toolbar toolbar;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

initNavigationDrawer();

}

public void initNavigationDrawer() {

NavigationView navigationView = (NavigationView)findViewById(R.id.navigation_view);

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(MenuItem menuItem) {

int id = menuItem.getItemId();

switch (id){

case R.id.home: //menu item id get now

Toast.makeText(getApplicationContext(),"Home",Toast.LENGTH_SHORT).show();

drawerLayout.closeDrawers();

break;

case R.id.settings: //menu item id get now

Toast.makeText(getApplicationContext(),"Settings",Toast.LENGTH_SHORT).show();

break;

case R.id.trash: //menu item id get now

Toast.makeText(getApplicationContext(),"Trash",Toast.LENGTH_SHORT).show();

drawerLayout.closeDrawers();

break;

case R.id.logout:

finish();

}

return true;

}

});

View header = navigationView.getHeaderView(0);

TextView tv_email = (TextView)header.findViewById(R.id.tv_email);

tv_email.setText("hansrajpadvi811@gmail.com");

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

ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close){

@Override

public void onDrawerClosed(View v){

super.onDrawerClosed(v);

}

@Override

public void onDrawerOpened(View v) {

super.onDrawerOpened(v);

}

};

drawerLayout.addDrawerListener(actionBarDrawerToggle);

actionBarDrawerToggle.syncState();

}

}

Don’t copy Full code .Understand and Try it…..Enjoy Coding