Creating Drawer Layout Using Material Design In Xamarin.Android

In this article, you will learn how to create Drawer Layout using Material Design in Xamarin.Android.

Step 1- Create a Sample project

Open VS > File > Cross-Platform > Blank App (Native Portable).

Xamarin

Step 2- Creating required styles

Open styles and write a custom style below. Just take a look below.

Xamarin

So, to customize, we need to set and create our custom theme (if you want to) in styles.

<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#16A085</item>
<item name="colorPrimaryDark">#1976D2</item>
<item name="colorAccent">#FF4081</item>
<item name="drawerArrowStyle">@style/MyDrawerArrowStyle</item>
</style>
<style name="MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#F5F5F5</item>
<item name="spinBars">true</item>
</style>

So, I have overriden all values which are required with my custom values.

Step 2 - Creating Drawer Layout

Now, let's add a new layout. Right click >> Add New >> Android Layout >> DrawerLayout.axml.

Xamarin

Now, we need to add the required NuGet packages before we start writing UI. So, download the following NuGet packages.

Xamarin.Android.Support.v4 version="25.4.0.2"
Xamarin.Android.Support.v7.AppCompat version="25.4.0.2"
Xamarin.Android.Support.Fragment version="25.4.0.2"
Refractored.Controls.CircleImageView( for circle image view in left drawer)

Now, open DrawerLayout.axml and write the following UI Code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/MyTheme"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/toolbar_layout">
<!--<include
layout="@layout/toolbar" />-->
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/content_frame"
android:layout_below="@id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_height="match_parent"
android:layout_width="240dp"
android:layout_gravity="start"
app:menu="@layout/left_menu_items"
app:headerLayout="@layout/nav_header_main"
android:fitsSystemWindows="true" >
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

Note

Action Bar is deprecated, so we are using toolbar (which builds a new control on top of ActionBar)

So I referred to my Style for a toolbar like this

app:theme="@style/MyTheme"

I am using FrameLayout to replace my Fragment (Reusable UI). The NavigationView represents the below image.

Xamarin

So first, we will create a UI for Header menu. Add a new layout file, say nav_header_main.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/view_container"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:gravity="bottom"
android:orientation="vertical"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<LinearLayout
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical"
android:padding="@dimen/activity_horizontal_margin">
<refractored.controls.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#D40047"/>
<TextView
android:id="@+id/name"
android:text="Nina"
android:textColor="#1E1E1E"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/names"
android:layout_below="@id/name"
android:text="[email protected]"
android:textColor="#B0B0B0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
</RelativeLayout>

Put all the images in Drawable folder and refer to it like this. If you're supporting multiple resolutions, put all respective scaled images in remaining Drawable folders. For now, I am adding to drawable only.

Xamarin

android:src="@drawable/profile"

Here, I am setting my profile image which I want to show in Header of Nav. Now, refer this Layout in DrawerLayout.axml like below -

app:headerLayout="@layout/nav_header_main"

Now, we have to create menu items. So, add another layout file and name it as left_menu_items.axml.

<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_Order"
android:title="Orders" />
<item
android:id="@+id/nav_friends"
android:icon="@drawable/ic_Redeem"
android:title="Redeem" />
<item
android:id="@+id/nav_profile"
android:icon="@drawable/ic_today"
android:title="Notifications" />
</group>
<item android:title="Today">
<menu>
<item
android:icon="@drawable/ic_test"
android:title="Tasks"
android:checkable="true" />
<item
android:icon="@drawable/ic_forum"
android:title="Messages"
android:checkable="true" />
</menu>
</item>
</menu>

Note

You must place all android:icon images in Drawable folder.

group android:checkableBehavior="single" means to put a check that only one item can be selected at a time.

Now, refer to this menu in app:menu="@layout/left_menu_items" in DrawerLayout.axml

Step 3 - Creating DrawerLayout Activity file

Open Drawerlayout.cs file and write the code like this -

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using SupportToolbar = Android.Support.V7.Widget.Toolbar;
using Android.Support.V7.App;
using Android.Support.V4.Widget;
using System.Collections.Generic;
using Android.Support.V4.App;
using Android;
using DrawerLayout_V7_Tutorial;
using Android.Support.V7.Widget;
using Android.Support.Design.Widget;
using VAMOS.Droid.Fragments;
using Android.Support.V4.View;
using Android.Content.Res;
namespace DrawerSample
{
[Activity(Label = "SlidingPane Sample", Icon = "@drawable/icon", Theme = "@style/MyTheme")]
public class SlidingPaneLayoutActivity : AppCompatActivity
{
//Declaring Variables to access throught this activity
DrawerLayout drawerLayout;
NavigationView navigationView;
IMenuItem previousItem;
Android.Support.V7.App.ActionBarDrawerToggle toggle;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(VAMOS.Droid.Resource.Layout.Dashboard);
//Finding toolbar and adding to actionbar
var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(VAMOS.Droid.Resource.Id.toolbar);
SetSupportActionBar(toolbar);
//For showing back button
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
SupportActionBar.SetHomeButtonEnabled(true);
SupportActionBar.SetDisplayShowTitleEnabled(false);
//setting Hamburger icon Here
SupportActionBar.SetHomeAsUpIndicator(VAMOS.Droid.Resource.Drawable.ic_menu);
//Getting Drawer Layout declared in UI and handling closing and open events
drawerLayout = FindViewById<DrawerLayout>(VAMOS.Droid.Resource.Id.drawer_layout);
drawerLayout.DrawerOpened += DrawerLayout_DrawerOpened;
drawerLayout.DrawerClosed += DrawerLayout_DrawerClosed;
navigationView = FindViewById<NavigationView>(VAMOS.Droid.Resource.Id.nav_view);
toggle = new Android.Support.V7.App.ActionBarDrawerToggle
(
this,
drawerLayout,
VAMOS.Droid.Resource.String.openDrawer,
VAMOS.Droid.Resource.String.closeDrawer
);
drawerLayout.AddDrawerListener(toggle);
//Synchronize the state of the drawer indicator/affordance with the linked DrawerLayout
toggle.SyncState();
//Handling click events on Menu items
navigationView.NavigationItemSelected += (sender, e) =>
{
if (previousItem != null)
previousItem.SetChecked(false);
navigationView.SetCheckedItem(e.MenuItem.ItemId);
previousItem = e.MenuItem;
switch (e.MenuItem.ItemId)
{
case VAMOS.Droid.Resource.Id.nav_home:
ListItemClicked(0);
break;
case VAMOS.Droid.Resource.Id.nav_friends:
ListItemClicked(1);
break;
case VAMOS.Droid.Resource.Id.nav_profile:
ListItemClicked(2);
break;
}
drawerLayout.CloseDrawers();
};
}
private void DrawerLayout_DrawerClosed(object sender, DrawerLayout.DrawerClosedEventArgs e)
{
//SupportActionBar.SetHomeAsUpIndicator(VAMOS.Droid.Resource.Drawable.ic_menu);
}
private void DrawerLayout_DrawerOpened(object sender, DrawerLayout.DrawerOpenedEventArgs e)
{
// SupportActionBar.SetHomeAsUpIndicator(VAMOS.Droid.Resource.Drawable.ic_back);
}
private void ListItemClicked(int position)
{
Android.Support.V4.App.Fragment fragment = null;
switch (position)
{
case 0:
fragment = new LoginFragment();
break;
case 1:
fragment = new Signupfragment();
break;
}
if (fragment != null)
{
SupportFragmentManager.BeginTransaction()
.Replace(VAMOS.Droid.Resource.Id.content_frame, fragment)
.Commit();
}
}
//Handling Back Key Press
public override void OnBackPressed()
{
if (drawerLayout.IsDrawerOpen((int)GravityFlags.Start))
{
drawerLayout.CloseDrawer((int)GravityFlags.Start);
}
else
{
base.OnBackPressed();
}
}
public override bool OnOptionsItemSelected(IMenuItem item)
{
switch (item.ItemId)
{
case Android.Resource.Id.Home:
drawerLayout.OpenDrawer(Android.Support.V4.View.GravityCompat.Start);
return true;
}
return base.OnOptionsItemSelected(item);
}
//Resposnible for mainting state,suppose if you suddenly rotated screen than drawer should not losse it context so you have save drawer states like below
protected override void OnPostCreate(Bundle savedInstanceState)
{
base.OnPostCreate(savedInstanceState);
toggle.SyncState();
}
public override void OnConfigurationChanged(Configuration newConfig)
{
base.OnConfigurationChanged(newConfig);
toggle.OnConfigurationChanged(newConfig);
}
}
}

Note

The following code is used to show Back button -

SupportActionBar.SetDisplayHomeAsUpEnabled(true); SupportActionBar.SetHomeButtonEnabled(true);

Here, I am setting Hamburger menu icon -

SupportActionBar.SetHomeAsUpIndicator(VAMOS.Droid.Resource.Drawable.ic_menu);

Step 4 - Creating Fragments

So, fragments are like reusable UI Controls. Add another two Layout files - Login.axml and SignUp.axml

For now, I am keeping this UI empty. If you want, you can go ahead and write in the UI what you want to show.

Xamarin

public class LoginFragment : Fragment
{
public LoginFragment()
{
}
public override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
}
public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
var view = inflater.Inflate(Resource.Layout.Login, container, false);
return view;
} }

Create the above same code for SignUpFragment and just change

var view = inflater.Inflate(Resource.Layout.Login, container, false);
//To
var view = inflater.Inflate(Resource.Layout.Signup, container, false);

So, whenever you click, we pass the Fragments to Framelayout to switch like this.

private void ListItemClicked(int position)
{
Android.Support.V4.App.Fragment fragment = null;
switch (position)
{
case 0:
fragment = new LoginFragment();
break;
case 1:
fragment = new Signupfragment();
break;
}
if (fragment != null)
{
SupportFragmentManager.BeginTransaction()
.Replace(VAMOS.Droid.Resource.Id.content_frame, fragment)
.Commit();
}
}

Final Result

Here, Orders and Redeem refers to Login and Signup respectively.

Xamarin

I hope you understood clearly. Please share your thoughts.

6 Comments

Join the conversation! Your thoughts help the community grow.

Bhavya Joshi7y ago
Dude, please share the code
rajesh waran8y ago
Could you share files with me?
satya m8y ago
Could you share the code?
jesus garcia8y ago
Could you share the code?
kiran patil9y ago
Can you give me project files for this article, because cannot find what is VAMOS and no file for dimen
- Charwaka Thupili9y ago
  Dude Vamos is My Project NameSpace,put your project namespace there. and for dimen check this https://developer.android.com/samples/BasicSyncAdapter/res/values/dimen.html