Download Code

Xamarin Navigation Drawer Android

In xamarin navigation drawer android tutorial you will learn how to create Xamarin navigation drawer android application.Before starting to create navigation drawer.You should read Fragments,Frame Layout with Sliding Drawer,Fragments with FrameLayout tutorial.

Xamarin Navigation Drawer

The navigation drawer is a panel.Displays the app’s main navigation drawer options on the left edge of the screen Link.

ActionBar Activity

A base class for activities that uses the Support Library action bar implementation.

Before starting this tutorial whenever you create new android project add Android Support Library v7 component.

Create new android application project and go to Main.axml file.Add following UI components.

  • Drawer Layout
  • Frame Layout
  • ListView

Main.axml

xamarin navigation drawer example, xamarin navigation drawer example android, navigation drawer example android, xamarin navigation, xamarin navigation drawer, navigation drawer, xamarin ActionBarActivity,Navigation Drawer Android,Xamarin Navigation Drawer Android

Ok then you will create two fragment classes with layout.

Home/Profile Fragment.axml

xamarin navigation drawer example, xamarin navigation drawer example android, navigation drawer example android, xamarin navigation, xamarin navigation drawer, navigation drawer, xamarin ActionBarActivity,Navigation Drawer Android,Xamarin Navigation Drawer Android

HomeFragment.cs

namespace SampleNavigation
{
	[Activity(Label = "HomeFragment")]
	public class HomeFragment : Android.Support.V4.App.Fragment
	{
		public HomeFragment()
		{

		}
		public static Android.Support.V4.App.Fragment newInstance(Context context)
		{
			HomeFragment busrouteFragment = new HomeFragment();
			return busrouteFragment;
		}
		public override void OnCreate(Bundle savedInstanceState)
		{
			base.OnCreate(savedInstanceState);

		}
		public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
		{
			ViewGroup root = (ViewGroup)inflater.Inflate(Resource.Layout.homefragment, null);
			return root;
		}
	}

}

ProfileFragment.cs

namespace SampleNavigation
{
	[Activity(Label = "ProfileFragment")]
	public class ProfileFragment : Android.Support.V4.App.Fragment
	{
		public ProfileFragment()
		{

		}
		public static Android.Support.V4.App.Fragment newInstance(Context context)
		{
			ProfileFragment busrouteFragment = new ProfileFragment();
			return busrouteFragment;
		}
		public override void OnCreate(Bundle savedInstanceState)
		{
			base.OnCreate(savedInstanceState);

		}
		public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
		{
			ViewGroup root = (ViewGroup)inflater.Inflate(Resource.Layout.profilefragment, null);
			return root;
		}
	}

}

Strings.xml

xamarin navigation drawer example, xamarin navigation drawer example android, navigation drawer example android, xamarin navigation, xamarin navigation drawer, navigation drawer, xamarin ActionBarActivity,Navigation Drawer Android,Xamarin Navigation Drawer Android

Now go to MainActivity.cs class and follow the steps(Main steps).

  • Refer drawer layout and Listview id’s.
  • Initialize Fragments which will replace on click.
  • Add items to listview which will display in navigation.
  • Apply click event on ListView Item.
  • Replace Fragments using FragmentReplace method.
  • Create a method to show fragment which means replace other fragments.
  • At last add menu layout and also onOptionsItemSelected method because magic will run from here.

MainActivity.cs

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 SupportFragment = Android.Support.V4.App.Fragment;
using Android.Support.V7.App;
using Android.Support.V4.Widget;
using System.Collections.Generic;
using Android.Graphics.Drawables;
using Android.Graphics;

namespace SampleNavigation
{
	[Activity(Label = "SampleNavigation", MainLauncher = true, Icon = "@mipmap/icon")]
	public class MainActivity : ActionBarActivity
	{
		
		private MyActionBarDrawerToggle mDrawerToggle;    
		private DrawerLayout mDrawerLayout;
		private ListView mLeftDrawer;
		private HomeFragment homeFragment;
		private ProfileFragment profileFragment;
		private SupportFragment mCurrentFragment = new SupportFragment();
		private Stack mStackFragments;

		private ArrayAdapter mLeftAdapter;

		private List mLeftDataSet;

		protected override void OnCreate(Bundle bundle)
		{
			base.OnCreate(bundle);


			// Set our view from the "main" layout resource
			SetContentView(Resource.Layout.Main);

			initialize();  // refer id's of drawer layout and listview method

			initializeFragments();   // initializing fragments and supportfragments

			mLeftDrawer.Tag = 0; 

			addItemListView();   // adding items to listview by setadapter

			mLeftDrawer.Adapter = mLeftAdapter;
			mLeftDrawer.ItemClick += MenuListView_ItemClick;


			mDrawerToggle = new MyActionBarDrawerToggle(
				this,                           //Host Activity
				mDrawerLayout,                  //DrawerLayout
				Resource.String.appname,     //Opened Message
				Resource.String.home     //Closed Message
			);

			mDrawerLayout.SetDrawerListener(mDrawerToggle);
			SupportActionBar.SetHomeButtonEnabled(true);
			SupportActionBar.SetDisplayShowTitleEnabled(true);
			SupportActionBar.SetHomeAsUpIndicator(Resource.Drawable.ic_drawer);

			mDrawerToggle.SyncState();

			fragmentReplacement();
		}

		public void initialize()
		{
			mDrawerLayout = FindViewById(Resource.Id.drawer_layout);
			mLeftDrawer = FindViewById(Resource.Id.left_drawer);
		}
		public void addItemListView()
		{
			mLeftDataSet = new List();
			mLeftDataSet.Add("BCSE");
			mLeftDataSet.Add("BSEE");
			mLeftAdapter = new ArrayAdapter(this, Android.Resource.Layout.SimpleListItem1, mLeftDataSet);
		}
		public void initializeFragments()
		{
			homeFragment = new HomeFragment();
			profileFragment = new ProfileFragment();
			mStackFragments = new Stack();
		}
		public void fragmentReplacement()
		{
			Android.Support.V4.App.FragmentTransaction tx = SupportFragmentManager.BeginTransaction();

			tx.Add(Resource.Id.main, homeFragment);
			tx.Add(Resource.Id.main, profileFragment);
			tx.Hide(profileFragment);

			mCurrentFragment = homeFragment;
			tx.Commit();
		}
		void MenuListView_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
		{
			Android.Support.V4.App.Fragment fragment = null;

			switch (e.Id)
			{
				case 0:
					ShowFragment(homeFragment);
					break;
				case 1:
					ShowFragment(profileFragment);
					break;
			}

			//SupportFragmentManager.BeginTransaction().Replace(Resource.Id.main, fragment).Commit();


			mDrawerLayout.CloseDrawers();
			mDrawerToggle.SyncState();

		}
		private void ShowFragment(SupportFragment fragment)
		{

			if (fragment.IsVisible)
			{
				return;
			}

			var trans = SupportFragmentManager.BeginTransaction();


			fragment.View.BringToFront();
			mCurrentFragment.View.BringToFront();

			trans.Hide(mCurrentFragment);
			trans.Show(fragment);

			trans.AddToBackStack(null);
			mStackFragments.Push(mCurrentFragment);
			trans.Commit();

			mCurrentFragment = fragment;

		}
		public override bool OnOptionsItemSelected(IMenuItem item)
		{
			switch (item.ItemId)
			{

				case Android.Resource.Id.Home:
					//The hamburger icon was clicked which means the drawer toggle will handle the event


					mDrawerToggle.OnOptionsItemSelected(item);
					return true;

				

				default:
					return base.OnOptionsItemSelected(item);
			}
		}

		public override bool OnCreateOptionsMenu(IMenu menu)
		{
			MenuInflater.Inflate(Resource.Menu.menu, menu);
			return base.OnCreateOptionsMenu(menu);
		}

		protected override void OnSaveInstanceState(Bundle outState)
		{
			if (mDrawerLayout.IsDrawerOpen((int)GravityFlags.Left))
			{
				outState.PutString("DrawerState", "Opened");
			}

			else
			{
				outState.PutString("DrawerState", "Closed");
			}

			base.OnSaveInstanceState(outState);
		}

		protected override void OnPostCreate(Bundle savedInstanceState)
		{
			base.OnPostCreate(savedInstanceState);
			mDrawerToggle.SyncState();
		}

		public override void OnConfigurationChanged(Android.Content.Res.Configuration newConfig)
		{
			base.OnConfigurationChanged(newConfig);
			mDrawerToggle.OnConfigurationChanged(newConfig);
		}
	}
}

Note: Don’t forget to apply Theme.Appcompat.light because ActionBarActivity needs this theme.

Now run your android application project.

xamarin navigation drawer example, xamarin navigation drawer example android, navigation drawer example android, xamarin navigation, xamarin navigation drawer, navigation drawer, xamarin ActionBarActivity,Navigation Drawer Android,Xamarin Navigation Drawer Android

That’s for this tutorial Xamarin Navigation Drawer Android Example.

For Xamarin Navigation Drawer Android Example in form of Java example visit Android Codec.

Thanks.