These hamburger menus do not only look neat, they also provide a great way of navigating through an application and display additional information or quick settings. Since Google itself uses them in nearly every application users expect one of them when swiping from the left side of the screen. In this post I want to show you how we can add a backward compatible material Navigation Drawer to our apps.XamarinNavigationDrawerDemo

Backwards compatibility

First make sure that our app is backward compatible. Do do so, add the Android Support Library v7 and Android Support Design Library to your project and make sure that your activity inherits from AppCompatActivity. Additionally we need to use a style that inherits from a Theme.AppCompat version like the Theme.AppCompat.Light.DarkActionBar theme. If you need help with this, check the demo code on GitHub.

Prepare you layout

Now we can add the Navigation Drawer to our layout. For this, we use android.support.v4.widget.DrawerLayout as our root layout and add all the content that we want to show inside of it. Beside the content we also add a android.support.design.widget.NavigationView element which will contain the flyout menu. The most important properties are the menu and headerLayout attributes which stands for exactly what you would expect: For the options that should be shown inside the navigation drawer you can define a menu just like you know it from the Action Bar. If you want to define a custom header for your drawer do it in an extra layout file and reference it. Afterwards our layout should look like this:

Hint: If you use a Toolbar, also add it inside the DrawerLayout. It needs to be the root element, otherwise the toolbar overlaps the layout and absorbs the touch events.

React on menu item selections

Once your layout is ready it is time to add some logic. The most obvious next step is reacting on item selections. For this, we simply need to add a listener to the NavigationView‘s NavigationItemSelected event inside the OnCreate method of our activity.

Add the drawer toggle button

When you start the app now, you will notice that we can already open the navigaion drawer by swiping from the left of the screen. If you also want to add this fancy drawer toggle button with the three transforming bars to your app keep on reading.

To add an ActionBarDrawerToggle  to the ActionBar, we need to define it inside the OnCreate method. Beside the context, the constuctor wants to know which DrawerLayout this button is for, which Toolbar it should be added to and where it can find the strings for the open and close mechanism. Once definded we can pair the button with the menu by calling the DrawerLayout‘s SetDrawerListener(ActionBarDrawerToggle) method and passing it the button. To make sure everything is connected correctly, we should call the SyncState() method right afterwards.

Now your app should have been enriched by a nice navigtion menu right where users would expect it. But make sure that there is an actual need for that overhead. A Navigation Drawer Menu might be an overkill if you just offer two options in it. You might want to consider using a classic Toolbar menu alternatively.

Do also check the full demo project on GitHub and feel free to ask your questions in the comments.


Robin-Manuel Thiel

At daylight, Robin-Manuel talks about new IT trends and development. But at night he turns into a tinker and developer which sometimes leads to insufficient sleep. He loves cool technologies, cross-platform and everything with a power-plug or IP address.

15 Comments

=Mimmi= · November 25, 2015 at 20:32

Hi, i’ve downloaded the sample, but i can’t understand how to navigate to a page from the drawer menu.
Can you suggest me something? Thank you!

    Robin-Manuel Thiel · November 26, 2015 at 14:07

    Thanks for your comment. You can switch through the e.MenuItem.ItemId in the NavigationView_NavigationItemSelected event handler to react on menu item selections. I have updated the post and demo code to point this out. Hope that helps!

      =Mimmi= · November 26, 2015 at 21:38

      Thank You!

Thomas · December 1, 2015 at 15:56

Great and clear article. Especially useful if some code is provided :)
Thanks!

David · December 21, 2015 at 11:08

Hello and thank you for your job.
Is there a way to add binding in this project (mvvmlight or mvvmcross). Because the activities inherits from AppCompatActivity…

Thank you

Suchith Madavu · January 9, 2016 at 14:51

Thanks for the post,helped me.

suchith · January 16, 2016 at 13:30

Hi , Do you have any idea that how we can change hamburger icon with back arrow icon when navigating to another fragment.
Thanks

Porco Aranha · May 25, 2016 at 15:34

Eu amo vocês ♥ Obrigado!

Derrick · June 23, 2016 at 19:54

Thanks for the tutorial, how can i change the default blank layout, tried using SetContentView(…) but didnt render

Sinhorelli · July 3, 2016 at 20:08

Graet, your exemple save me tks…

Tyler · July 7, 2016 at 22:21

Looked at github project and I am unable to compile my project with the error “no resource identifier found for attribute menu and headerLayout” even though i added the xaml/xml to the project…

any solution?

Jonathan · May 12, 2017 at 03:15

How do i set the header text?

sunil · February 10, 2018 at 09:34

Hi..im trying to bind the dynamic image from url into navigation drawer header..but cant able to set

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.