Let’s start,

Step 1: Open Visual Studio->New Project->Templates->Visual C#->Android->Blank app

Select blank app. Give the project name and project location.



Step 2: Go to Solution Explorer-> Project Name-> Components, right click to Get More Components, open new dialog box. This dialog box is required to search the Design, add Android Support Design Library Packages.



Step 3: Add Theme.AppCompat.Light.NoActionBar. Create styles.xml file. Go to Solution Explorer-> Project Name->Resources->values, right click to Add->New Item, open new dialog box. Select XML file and give the name for styles.xml,



Step 4: Create colors.xml file. Go to Solution Explorer-> Project Name->Resources->values. Right click to Add->New, open new dialog box. Select XML file give for colors.xml.



Step 5: Open Solution Explorer-> Project Name->Resources->values->colors.xml. Click to open Design View and the code, given below:

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <resources>
  3. <color name="window_background">#8AA5B9</color>
  4. </resources>

Step 6: Open Solution Explorer-> Project Name->Resources->values->styles.xml. Click to open Design View and the code, given below:

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <resources>
  3. <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
  5. </style>
  6. <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
  7. <item name="colorPrimary">#2196F3</item> <item name="colorPrimaryDark">#1976D2</item> <item name="android:windowBackground">@color/window_background</item>
  8. </style>
  9. </resources>

Step 7: Open Solution Explorer-> Project Name->Resources->values->Strings.xml. Click to open Design View and the code, given below:

  1. <string name="drawer_open">Open</string>
  2. <string name="drawer_close">Close</string>

Step 8: Open the menu list to add one XML file. Go to Solution Explorer-> Project Name->Resources-> right click to Add->New Folder and give the name to the menu.

Step 9: Open Solution Explorer-> Project Name->Resources->menu. Right click to Add->New Item, open new Dialog box. Select XML file and give the name for nav_menu.xml,



Step 10: Open Solution Explorer-> Project Name->Resources->menu->nav_menu.xml. Click to open Design View and the code, given below:

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <menu xmlns:android="http://schemas.android.com/apk/res/android">
  3. <group android:checkableBehavior="single">
  4. <item android:id="@+id/nav_home" android:icon="@drawable/ic_dashboard" android:title="Home" />
  5. <item android:id="@+id/nav_messages" android:icon="@drawable/ic_event" android:title="Messages" />
  6. <item android:id="@+id/nav_friends" android:icon="@drawable/ic_headset" android:title="Friends" />
  7. <item android:id="@+id/nav_discussion" android:icon="@drawable/ic_forum" android:title="Discussion" /> </group>
  8. <item android:title="Sub items">
  9. <menu>
  10. <item android:icon="@drawable/ic_dashboard" android:title="Sub item 1" />
  11. <item android:icon="@drawable/ic_forum" android:title="Sub item 2" />
  12. <item android:icon="@drawable/ic_done" android:title="Sub item 5" /> </menu>
  13. </item>
  14. </menu>

Step 11: Open Solution Explorer-> Project Name->Resources->layout. Right click to Add->New Item and open the new Dialog box. Select axml file and give name for nav_header.axml.

Step 12: Open Solution Explorer-> Project Name->Resources->Layout->nav_header.axml. Click to open Design View and the code, given below:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:layout_width="match_parent"
  5. android:layout_height="210dp"
  6. android:background="#0099ff"
  7. android:padding="16dp"
  8. android:orientation="vertical"
  9. android:gravity="bottom">
  10. <TextView
  11. android:text="User Name"
  12. android:layout_width="match_parent"
  13. android:layout_height="wrap_content"
  14. android:id="@+id/navheader_username"
  15. android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
  16. </LinearLayout>

Step 13: Open Solution Explorer-> Project Name->Resources->layout, right click to Add->New Item. Open new Dialog box. Select axml file and give the name for toolbar.axml,

solution

Step 14: Open Solution Explorer-> Project Name->Resources->Layout->toolbar.axml. Click to open Design View and the code, given below:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:id="@+id/main_content"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent">
  7. <android.support.design.widget.AppBarLayout
  8. android:id="@+id/appbar"
  9. android:layout_width="match_parent"
  10. android:layout_height="wrap_content"
  11. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  12. <android.support.v7.widget.Toolbar
  13. android:id="@+id/toolbar"
  14. android:layout_width="match_parent"
  15. android:layout_height="wrap_content"
  16. android:elevation="4dp"
  17. android:background="?attr/colorPrimary" />
  18. </android.support.design.widget.AppBarLayout>
  19. </android.support.design.widget.CoordinatorLayout>

Step 15: Open Solution Explorer-> Project Name->Resources->Layout->Main.axml. Click to open Design View and the code, given below:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  6. <android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
  7. android:id="@+id/drawer_layout"
  8. android:layout_height="match_parent"
  9. android:layout_width="fill_parent"
  10. android:fitsSystemWindows="true">
  11. <LinearLayout
  12. android:layout_width="match_parent"
  13. android:layout_height="match_parent"
  14. android:orientation="vertical">
  15. <include layout="@layout/toolbar" />
  16. </LinearLayout>
  17. <android.support.design.widget.NavigationView
  18. android:id="@+id/nav_view"
  19. android:layout_height="match_parent"
  20. android:layout_width="300dp"
  21. android:layout_gravity="start"
  22. android:fitsSystemWindows="true"
  23. app:headerLayout="@layout/nav_header" />
  24. </android.support.v4.widget.DrawerLayout>
  25. </LinearLayout>

Step 16: After Design view creation, open Solution Explorer-> Project Name->MainActivity.cs and the steps, given below:

Step 17: Add below Namespaces and Theme Name,

  1. using Android.Support.V7.App;
  2. using Android.Support.V4.Widget;
  3. using V7Toolbar = Android.Support.V7.Widget.Toolbar;
  4. using Android.Support.Design.Widget;
  5. [Activity(Theme = "@style/Theme.DesignDemo"])

Step 18: Create Drawer Layout and Navigation View variable, declare the Drawer Layout and Navigation View within the OnCreate().before to change the Activity to AppCompatActivity.

  1. protected override void OnCreate(Bundle bundle)
  2. {
  3. base.OnCreate(bundle);
  4. // Set our view from the "main" layout resource
  5. SetContentView(Resource.Layout.Main);
  6. drawerLayout = FindViewById < DrawerLayout > (Resource.Id.drawer_layout);
  7. // Create ActionBarDrawerToggle button and add it to the toolbar
  8. var toolbar = FindViewById < V7Toolbar > (Resource.Id.toolbar);
  9. SetSupportActionBar(toolbar);
  10. var drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.drawer_open, Resource.String.drawer_close);
  11. drawerLayout.SetDrawerListener(drawerToggle);
  12. drawerToggle.SyncState();
  13. navigationView = FindViewById < NavigationView > (Resource.Id.nav_view);
  14. setupDrawerContent(navigationView); //Calling Function
  15. }
  16. void setupDrawerContent(NavigationView navigationView)
  17. {
  18. navigationView.NavigationItemSelected += (sender, e) =>
  19. {
  20. e.MenuItem.SetChecked(true);
  21. drawerLayout.CloseDrawers();
  22. };
  23. }
  24. public override bool OnCreateOptionsMenu(IMenu menu)
  25. {
  26. navigationView.InflateMenu(Resource.Menu.nav_menu); //Navigation Drawer Layout Menu Creation
  27. return true;
  28. }

Step 19: Press F5 or build and run the Application.



Finally, we successfully created Xamarin Android Navigation Drawer Layout Android Support Design.