Xamarin

Xamarin Android: Create Android Navigation Drawer Layout Using Support Design

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">  
  4.   
  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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs