Add a stylish Navigation Drawer to your Xamarin.Android application

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.

11 Comments on “Add a stylish Navigation Drawer to your Xamarin.Android application

  1. 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!

    • 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!

  2. 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

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

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

  5. 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?

Leave a Reply