Implementing Navigation Drawer in Xamarin Forms

Every mobile application which is going to be used as real world app requires navigation solution. On Android platform recommendation for effective navigation is Navigation Drawer. It is a panel that transitions in from the left edge of the screen and displays the app’s main navigation options. More info about Navigation Drawer and it’s capabilities you can find on Android developer site.

Other platforms have similar solutions, so if you are developing in Xamarin Forms, it is a good idea to empower this kind of navigation. Plus side for Xamarin Forms it that you would write Navigation Drawer in only one codebase.

MasterDetail Page

In Xamarin Forms the Page class is a visual element that occupies most or all of the screen and contains a single child. It represents an Activity in Android, a View Controller in iOS, or a Page in Windows Phone. MasterDetail page manages two panes of information: A master page that presents data at a high level, and a detail page that displays low-level details about information in the master. It is exactly what we need to implement Navigation Drawer.

This page is going to be fairly simple. We need to set Master and Detail properties of MasterDetailPage.

Static class App is responsible for providing instances of pages. We are creating each page only once. Notice that we have wrapped MainPage in NavigationPage, so it could be on top of navigation stack.

Master Page

We prefer developing pages is XAML, thus NavigationDrawerPage is one of them. Basically we have one ListView which is listing NavigationDrawerItems provided by NavigationDrawerViewModel. We are rendering name and icon for each item.

In code behind part of the page we are obtaining ViewModel instance and setting it as page’s BindingContext.

Detail Page

Detail Page is place where our content pages are going to live. Initially it is set to HomePage, but it will be replaced with appropriate page when some NavigationDrawerItem is selected.

OnItemSelected

This event listener should be placed in MasterDetail page constructor. When user select NavigationDrawerItem ItemSelected event is invoked. As you can see in implementation, we are changing Detail property of MasterDetail page. By setting IsPresented property to false we are closing navigation drawer.

Customizing drawer width

By default master part of MasterDetail page occupy almost whole screen when opened. That doesn’t look nice on tablet in landscape view. As support for custom drawer width is not implemented in Xamarin Forms, we are going to implement it using custom renderers.

Xamarin.Forms user interfaces are rendered using the native controls of the target platform, allowing Xamarin.Forms applications to retain the appropriate look and feel for each platform. Custom Renders let developers ‘override’ this process to customize their Xamarin.Forms code on each platform.

We created CustomMasterDetailPage by extending default MasterDetailPage, with additional DrawerWidth property:

Second part of solution is to create Android implementation of custom renderer for CustomMasterDetailPage:

Make sure to add an assembly annotation to hook the model to the renderer (it needs to be outside of any namespace declaration):

If you are developing for other platforms you are going to need custom renderers for those platforms as well.

Conclusion

After applying few style changes our navigation drawer is ready to serve as effective navigation solution.

7 Comments

  1. ach-Reply
    August 15, 2016 at 9:22 am

    can you please share the full code or project ?

  2. venkata sivaprasad reddy-Reply
    November 4, 2016 at 5:21 am

    this render give me a exception as object reference not set to a instance at main activity in line load(app)

  3. Manish Jain-Reply
    November 15, 2016 at 7:03 pm

    This code no more works with latest version of forms.

  4. Marko-Reply
    November 23, 2016 at 4:07 am

    Xamarin Forms changed significantly in the latest versions. For example, Navigation Drawer width on tablets is not an issue anymore, so there is no more need for custom renderer. Also developers now can utilize two-way bindings, which eliminates need to write code-behind event listeners (SelectedItem="{Binding SelectedNavigationDrawerItem, Mode=TwoWay}").

    I believe more info about new approach could be found in e-book: https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/

  5. Hamid Ebrahimi-Reply
    May 13, 2017 at 4:05 am

    So good so useful,

    How about if it could be right to left direction?

  6. mark-Reply
    July 12, 2017 at 3:59 pm

    Could you share the code for this example?

Leave A Comment