0

Material Navigation Drawer Example In Android Studio Using NavigationView

Please follow and like us:

material navigation drawer example

 

Welcome to the first section of “Android Design Support Library Tutorial” series. For overview of the series, refer to the Design Support Library Intro.

 

Navigation View provide easy solution to implement material design navigation drawer in our android apps.

What is NavigationView in material navigation drawer ?

 

NavigationView provides the framework for easy to implement material navigation drawer with the help of inflate navigation items through menu resource.

 

Before Navigation View, we have hard way to make material navigation drawer using listview or linear layout with custom adapter, but now we just need to add Navigation View in DrawerLayout, everything else will be handled by Navigation View.

 

Useful parameters of Navigation View in material navigation drawer

 

  • app:menu: list of navigation drawer items.
  • app:headerLayout: Adds a View as a header of the navigation menu, we can put any custom views.
  • app:itemBackground: Allow to set background to drawer items.
  • app:itemIconTint: Change drawer item’s icon color.
  • app:itemTextColor: Allow to change drawer item’s text color.

 

Now, let’s get started to implement Navigation Drawer using Navigation view!

 

Add Android design support library dependency

Add a below line to include material design support library in dependencies of build.gradle file:

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

Step 1: Create a header for the material navigation drawer

Create a layout  drawer_header.xml in layout folder, add any custom views you want in header of navigation drawer.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="150dp" android:background="@drawable/header" android:padding="16dp" android:orientation="vertical" android:gravity="bottom">

    <TextView android:textColor="#ffffff" android:textSize="18sp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Nirav Kalola\nnkDroid" />
</LinearLayout>

Step 2: Create a menu for material navigation drawer items

Create a menu  menu_drawer.xml in menu folder, add any custom views you want in header of navigation drawer.

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context="nkdroid.tutorial.navigationview.MainActivity">
    <group android:checkableBehavior="single">
        <item android:id="@+id/navigation_item_1" android:icon="@drawable/ic_action_home" android:title="Home"/>
        <item android:id="@+id/navigation_item_2" android:icon="@drawable/ic_action_info" android:title="About Us"/>
        <item android:id="@+id/navigation_subheader" android:title="Tutorials">

<menu>
                <item android:id="@+id/navigation_sub_item_1" android:icon="@drawable/ic_image_looks_one" android:title="Android Tutorials"/>
                <item android:id="@+id/navigation_sub_item_2" android:icon="@drawable/ic_image_looks_two" android:title="IOS Tutorials"/>
            </menu>

        </item>
    </group>
</menu>

Step 3: Create Navigation View with header and items for material navigation drawer

Create a layout  activity_main.xml in layout folder, for adding navigation drawer and main content in drawer layout.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/drawer_layout" android:fitsSystemWindows="true">

    <!--Main content-->
    <LinearLayout android:orientation="vertical" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent">

        <include layout="@layout/app_bar"/>
    </LinearLayout>

    <!--Navigation Drawer-->
    <android.support.design.widget.NavigationView android:id="@+id/main_drawer" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/menu_drawer"/>
</android.support.v4.widget.DrawerLayout>

Step 4: Implementing Navigation View for material navigation drawer

Add your navigation view logic in MainActivity.java file

import android.content.res.Configuration;
import android.os.Bundle;
import android.os.PersistableBundle;
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.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener{

    private Toolbar toolbar;
    private NavigationView mDrawer;
    private DrawerLayout mDrawerLayout;
    private  ActionBarDrawerToggle drawerToggle;
    private int mSelectedId;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        setToolbar();
        initView();

        drawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close);
        mDrawerLayout.setDrawerListener(drawerToggle);
        drawerToggle.syncState();
        //default it set first item as selected
        mSelectedId=savedInstanceState ==null ? R.id.navigation_item_1: savedInstanceState.getInt("SELECTED_ID");
        itemSelection(mSelectedId);

    }

    private void setToolbar() {
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        if (toolbar != null) {
            setSupportActionBar(toolbar);
        }
    }

    private void initView() {
        mDrawer= (NavigationView) findViewById(R.id.main_drawer);
        mDrawer.setNavigationItemSelectedListener(this);
        mDrawerLayout= (DrawerLayout) findViewById(R.id.drawer_layout);
    }

    private void itemSelection(int mSelectedId) {

        switch(mSelectedId){

            case R.id.navigation_item_1:
                mDrawerLayout.closeDrawer(GravityCompat.START);
                break;

            case R.id.navigation_item_2:
                mDrawerLayout.closeDrawer(GravityCompat.START);
                break;

            case R.id.navigation_sub_item_1:
                mDrawerLayout.closeDrawer(GravityCompat.START);
                break;

            case R.id.navigation_sub_item_2:
                mDrawerLayout.closeDrawer(GravityCompat.START);
                break;

        }

    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        drawerToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {
        menuItem.setChecked(true);
        mSelectedId=menuItem.getItemId();
        itemSelection(mSelectedId);
        return true;
    }

    @Override
    public void onSaveInstanceState(Bundle outState, PersistableBundle outPersistentState) {
        super.onSaveInstanceState(outState, outPersistentState);
        //save selected item so it will remains same even after orientation change
        outState.putInt("SELECTED_ID",mSelectedId);
    }

}

Conclusion

NavigationView of new Android material design support library is very simple and easy solution for adding navigation menu to your Android application.

 

nirav kalola

Leave a Reply

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