Post
Ask Question

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.


Similar Articles