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.
Backwards compatibility
First make sure that ourapp is backward compatible. Do do so, add the Android Support Library v7and Android Support Design Library to your project and make sure that your activity inherits fromAppCompatActivity. Additionally we need to use a style that inherits from aTheme.AppCompat version like theTheme.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 useandroid.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 aandroid.support.design.widget.NavigationView element which will containthe flyout menu. The most important properties are the menuand headerLayoutattributes 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:
<code class="language-markup"><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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Your content -->
<LinearLayout>
<!-- ... -->
</LinearLayout>
<!-- The flyout menu -->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/navmenu"
app:headerLayout="@layout/header" />
</android.support.v4.widget.DrawerLayout>```
**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.
protected override void OnCreate (Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
var drawerLayout = FindViewById(Resource.Id.drawer_layout);
// Attach item selected handler to navigation view
var navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;
}
void NavigationView_NavigationItemSelected(object sender, NavigationView.NavigationItemSelectedEventArgs e)
{
switch (e.MenuItem.ItemId)
{
case (Resource.Id.nav_home):
// React on 'Home' selection
// ...
break;
}
// Close drawer
drawerLayout.CloseDrawers();
}```
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 theOnCreatemethod. 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‘sSetDrawerListener(ActionBarDrawerToggle) method and passing it the button. To make sure everything is connected correctly, we should call theSyncState() method right afterwards.
<code class="language-csharp">protected override void OnCreate (Bundle bundle)
{
// ...
// 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();
}```
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](https://github.com/PumpingCode/Xamarin-NavigationDrawerDemo)and feel free to ask your questions in the comments.