Navigation Drawer using material design in Xamarin.Android.

In Brief:  Here you can see the Navigation drawer implementation in Xamarin android with simple steps and reduced code using beautiful material design.

In my previous post explained Sliding menu in xamarin.android  using Animation and Gesture detection,Sliding menu in Xamarin.iOS using GestureRecognizer,CATransition and Animation,Push notification using Google Cloud Messaging(GCM) in Xamarin.Android.

In Detail:
Navigation drawer not only provides the beautiful UI look to the app but also a great way for navigating within the different app section. Even the Google make use of the same in its applications.

In Steps:

1. Add Latest Android Support Design Library
Provide the backward compatibility to the app. To do so add the following components to the project.
a.) Android Support design library
b.)Android Support V7
c.)Android Support V4
2. Add Style Inheriting from Theme.AppCompat

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
   <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
     <item name="windowNoTitle">true</item>
     <item name="windowActionBar">false</item>
     <item name="colorPrimary">#2196F3</item>
     <item name="colorPrimaryDark">#1976D2</item>
     <item name="colorAccent">#FF4081</item>
   </style>
   <style name="MyTheme" parent="MyTheme.Base">
   </style>
</resources>

3. Create Layout file
In a layout file define android.support.v4.widget.DrawerLayout as root layout.
To display Fly-out/In menu add  android.support.design.widget.NavigationView. Which defines two special properties called headerLayout and menu. Here as the name indicates, 
headerLayout : lets us to define custom layout file for navigation view header part and attach with this property.
menu : Define menu text for navigation view in xml file and reference with this property.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px"
    android:fitsSystemWindows="true">
    <android.support.v4.widget.DrawerLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minWidth="25px"
        android:minHeight="25px"
        android:id="@+id/drawer_layout">
        <LinearLayout
            android:id="@+id/layout_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <include
                layout="@layout/app_bar" />
            <FrameLayout
                android:id="@+id/HomeFrameLayout"
                android:minWidth="25px"
                android:minHeight="25px"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
        <android.support.design.widget.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:id="@+id/nav_view"
            app:menu="@menu/navmenu"
            app:headerLayout="@layout/headerdrawerlayout" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

4. Prepare activity file
Add below coding by binding UI elements.
a. Initiate toolbar
b. To catch menu click event add listener to the NavigationView's NavigationItemSelected event.
c. Add action bar drawer toggle button.
d. Call SyncState() method to connect everything properly.

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Support.Design.Widget;
using Android.Support.V4.Widget;
using Android.Support.V7.Widget; 
using Android.Support.V7.App;  

namespace TenantsForum
{
    [Activity (Label = "@string/app_name",ScreenOrientation=Android.Content.PM.ScreenOrientation.Portrait)]
 public class MainActivity : AppCompatActivity
 {
  DrawerLayout drawerLayout;
  protected override void OnCreate (Bundle savedInstanceState)
  {
   base.OnCreate (savedInstanceState);   

   SetContentView (Resource.Layout.Main);
   drawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);

   
   // Initialize toolbar
   var toolbar = FindViewById<Toolbar>(Resource.Id.app_bar);
   SetSupportActionBar(toolbar);
   SupportActionBar.SetTitle (Resource.String.app_name);
   SupportActionBar.SetDisplayHomeAsUpEnabled(true);
   SupportActionBar.SetDisplayShowHomeEnabled(true);

   // Attach item selected handler to navigation view
   var navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
   navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;

   // Create ActionBarDrawerToggle button and add it to the toolbar
   var drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.open_drawer, Resource.String.close_drawer);
   drawerLayout.SetDrawerListener(drawerToggle);
   drawerToggle.SyncState();
   
   //Load default screen
    var ft= FragmentManager.BeginTransaction ();
    ft.AddToBackStack (null);
    ft.Add (Resource.Id.HomeFrameLayout, new HomeFragment ());
    ft.Commit (); 

  }
  void NavigationView_NavigationItemSelected(object sender, NavigationView.NavigationItemSelectedEventArgs e)
  {
            switch (e.MenuItem.ItemId)
            {
                case (Resource.Id.nav_home): 
                 // React on 'nav_home' selection
                     break;
                case (Resource.Id.nav_messages):
                    //
                    break;
                case (Resource.Id.nav_friends):
                  // React on 'Friends' selection
                    break;  
            }
   // Close drawer
   drawerLayout.CloseDrawers();
  }
 }
}

Now your app should be decorated with beautiful android material design Navigation drawer.

Check out complete code in https://github.com/suchithm/NavigationDrawerMD

Thanks for your time here and feel free to post any issues/suggestions.