Beray Bentesen

Personal Blog

Support Design Library - Navigation View


    Navigation menu represents a standard navigation menu for applications. The menu contents can be populated by a menu resource file.  

    You must check older post about Support Toolbar to be able to use some features such as statusBarcolor, ToolBar etc. by clicking here.

  Creating Menu

  As I mentioned before, NavigationView menu contents can be populated by a menu resource file so creating a menu folder ( if you don't have ) so adding a new menu is first step.

   After creating menu folder you can add menu by creating a new xml file inside menu folder.

   You can group your items easily and also setting id, icon and title is quite easy too. 

   I made a group which has four items and one item for out of group. 

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

  <group android:checkableBehavior="single">    <item       android:id="@+id/nav_haveRead"       android:icon="@drawable/Icon"       android:title="Have Read" />    <item       android:id="@+id/nav_readingNow"       android:icon="@drawable/Icon"       android:title="Reading Now" />     <item       android:id="@+id/nav_toRead"       android:icon="@drawable/Icon"       android:title="To Read" />   <item       android:id="@+id/nav_favorites"       android:icon="@drawable/Icon"       android:title="Favorites" />   </group>
  <item android:title="Additional Options">     <menu>       <item           android:id="@+id/exititem"         android:icon="@drawable/Icon"         android:title="Exit" />      </menu>   </item>
</menu>


    Creating NavigationView 
   After creating a menu for view, you must install support design library which has new features such as Floating Action Button, NavigationView etc. Library is available on NuGet manager.
    
    Then you will be able to use features and let's start with updating layout.

    First step is adding DrawerLayout to top of the page. 

<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/DrawerLayout"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true">


    Then you are able to define NavigationView. You must define outside the LinearLayout but inside DrawerLayout.

<android.support.design.widget.NavigationView         android:fitsSystemWindows="true"         android:layout_width="wrap_content"         android:layout_height="match_parent"         android:layout_gravity="start"         android:id="@+id/nav_view"         app:menu="@menu/navigationview_menu" />


    Updating Activity

    You should define variables at first.

Android.Support.V7.Widget.Toolbar _supporttoolbar;
DrawerLayout _drawer;
NavigationView _navigationview;

   Then you must re-define variables inside OnCreate method.

_supporttoolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.ToolBar);
_supporttoolbar.SetTitle(Resource.String.app_name);
SetSupportActionBar(_supporttoolbar);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
_drawer = FindViewById<DrawerLayout>(Resource.Id.DrawerLayout);
_navigationview = FindViewById<NavigationView>(Resource.Id.nav_view);


    Item Click and Header Layout
  NavigationView has a method called " NavigationItemSelected " which makes us able to access each id of item's.
   

 _navigationview.NavigationItemSelected += (sender, e) => 
   {

...


    I used switch-case method inside this method :

_navigationview.NavigationItemSelected += (sender, e) =>

{ switch(e.MenuItem.ItemId)
{ case Resource.Id.nav_haveRead : Console.WriteLine("Have Read"); break;
case Resource.Id.nav_readingNow : Console.WriteLine("Reading Now"); break;
}
};

  
   The last step is adding header layout for Navigation View. You should be familiar this interface from Gmail application.

    I've created a relative layout inside a new layout. You can customize this layout as you wish.

    

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:background="@android:color/holo_blue_dark"     android:layout_width="fill_parent"     android:layout_height="200dp"     android:minWidth="25px"     android:minHeight="25px" /> 


    Then set your header inside NavigationView :     

app:headerLayout="@layout/headerlayout"

 
    Result : 
    
    


  Download Project


Comments (3) -

  • Rachel

    10/12/2015 2:12:43 AM | Reply

    I've been looking for Xamarin version of Navigation View. Thanks for sample project.

  • Steven

    10/12/2015 2:23:05 AM | Reply

    Very nice post! Thanks

  • Manoj

    5/13/2016 8:31:54 PM | Reply

    Thank you for writing this blog. I am trying to create sliding menu in xamarin android.

    I am unable to download sample code, it shows link is broken, can you please share updated link from where I can download source code?

Loading