Xamarin Android: Create Left Navigation Drawer Layout

Introduction

 
Here are the steps to create a new Xamarin Android Left Navigation Drawer Layout.  
 
Let’s start,
 
Step 1 - Open Visual Studio, New Project, Templates, Visual C#, Android, then click Blank App (Android).
 
Then give the Project Name and Project Location.
 
 
Step 2
 
Next, we add V7 AppCompat  References. Click Solution Explorer, Project Name, Components, then Right Click Get More Components to select, then popup window is visible. Search the Appcompat and then click to Add to App. 

 

 
 
 
Step 3 - Next create a menu folder. Go to Solution Explorer, Project Name, Resources, Right Click Add New Folder give the name for the menu. 
 
Step 4 - Next go to Solution Explorer, Project Name, Resources, menu, then Right Click Add New Item. Select XML and give the name for menu.xml.
 
Step 5 - Create two XML for Colors and Styles. Select Solution Explorer, Project Name, Resources, Values, then Right Click Add New Item. Select XML to give the name for styles and colors.
 
Step 6 - Open menu.xml, then create menu items and give the following code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <menu  
  3.     xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <group android:checkableBehavior="single">  
  5.         <item  
  6. android:id="@+id/nav_home"  
  7. android:title="Home" />  
  8.         <item  
  9. android:id="@+id/nav_messages"  
  10. android:title="Messages" />  
  11.         <item  
  12. android:id="@+id/nav_about"  
  13. android:title="About" />  
  14.         <item  
  15. android:id="@+id/nav_FeedBack"  
  16. android:title="FeedBack" />  
  17.     </group>  
  18. </menu>   
Step 7 - Next, open Styles.xml file and then give the following code   
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo"></style>  
  4.     <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">  
  5.         <item name="colorPrimary">#2196F3</item>  
  6.         <item name="colorPrimaryDark">#1976D2</item>  
  7.     </style>  
  8. </resources>   
Step 8 - Next, open Colors.xml to create colors 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <resources>  
  3.     <color name="ColorPrimary">#2196F3</color>  
  4.     <color name="ColorPrimaryDark">#1976D2</color>  
  5.     <color name="accent">#E040FB</color>  
  6. </resources>   
Step 9 - Then open Main.axml file and create DrawerLayout and Navigation
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  5. android:orientation="vertical"  
  6. android:layout_width="match_parent"  
  7. android:fitsSystemWindows="true"  
  8. android:layout_height="match_parent">  
  9.     <android.support.v7.widget.Toolbar  
  10. android:id="@+id/toolbar"  
  11. android:layout_width="match_parent"  
  12. android:layout_height="wrap_content"  
  13. android:minHeight="?attr/actionBarSize"  
  14. android:background="#33B86C"  
  15. app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  
  16. app:layout_scrollFlags="scroll|enterAlways" />  
  17.     <android.support.v4.widget.DrawerLayout  
  18. android:id="@+id/drawer_layout"  
  19. android:layout_height="match_parent"  
  20. android:fitsSystemWindows="true"  
  21. android:layout_width="match_parent">  
  22.         <RelativeLayout  
  23. android:orientation="vertical"  
  24. android:layout_width="match_parent"  
  25. android:layout_height="match_parent" />  
  26.         <android.support.design.widget.NavigationView  
  27. android:id="@+id/nav_view"  
  28. android:layout_height="match_parent"  
  29. android:layout_width="200dp"  
  30. android:layout_gravity="start"  
  31. android:fitsSystemWindows="true"  
  32. app:menu="@menu/menu" />  
  33.     </android.support.v4.widget.DrawerLayout>  
  34. </LinearLayout>   
Step 10 - Next to open MainActivity.cs to give the following code. 
  1. using System;  
  2. using Android.App;  
  3. using Android.Content;  
  4. using Android.Runtime;  
  5. using Android.Views;  
  6. using Android.Widget;  
  7. using Android.OS;  
  8. using V7Toolbar = Android.Support.V7.Widget.Toolbar;  
  9. using Android.Support.V7.App;  
  10. using Android.Support.V4.Widget;  
  11. using Android.Support.Design.Widget;  
  12. namespace Leftdrawerlayout   
  13. {  
  14.     [Activity(Label = "Leftdrawerlayout", Theme = "@style/Theme.DesignDemo", MainLauncher = true, Icon = "@drawable/icon")]  
  15.     public class MainActivity: AppCompatActivity   
  16.     {  
  17.         DrawerLayout drawerLayout;  
  18.         NavigationView navigationView;  
  19.         protected override void OnCreate(Bundle bundle)   
  20.         {  
  21.             base.OnCreate(bundle);  
  22.             SetContentView(Resource.Layout.Main);  
  23.             var toolbar = FindViewById < V7Toolbar > (Resource.Id.toolbar);  
  24.             SetSupportActionBar(toolbar);  
  25.             SupportActionBar.SetDisplayHomeAsUpEnabled(true);  
  26.             SupportActionBar.SetDisplayShowTitleEnabled(false);  
  27.             SupportActionBar.SetHomeButtonEnabled(true);  
  28.             SupportActionBar.SetHomeAsUpIndicator(Resource.Drawable.ic_menu);  
  29.             drawerLayout = FindViewById < DrawerLayout > (Resource.Id.drawer_layout);  
  30.             navigationView = FindViewById < NavigationView > (Resource.Id.nav_view);  
  31.         }  
  32.         public override bool OnOptionsItemSelected(IMenuItem item)   
  33.         {  
  34.             switch (item.ItemId)   
  35.             {  
  36.                 case Android.Resource.Id.Home:  
  37.                     drawerLayout.OpenDrawer(Android.Support.V4.View.GravityCompat.Start);  
  38.                     return true;  
  39.             }  
  40.             return base.OnOptionsItemSelected(item);  
  41.         }  
  42.     }  
  43. }  
Step 11 - Then Debug and run the app
 
 
Finally, we have successfully created the Xamarin Android Left Navigation Drawer Layout Application.


Similar Articles