Introduction

In mobile applications, you will find left or right drawers to display more options to the app user. If you swipe right and left on a mobile screen, the drawer will show other options. I will show how we can develop such a drawer in Xamarin, using Visual Studio 2015.

Following are the steps for creating left and right drawers.

Step 1

Create new project for Android Application

I have selected “Blank App(Android)” template for this article.

Step 2

Application layout

I have used android.support.v4 drawer layout, text view and two listviews to display options for right and left drawer. Right now, I have used listview with only an item but we can also use custom Listview, as I discussed in my previous article on “Create Custom ListView in Xamarin with Visual Studio 2015”. The code snippet of Main.axml is shown below.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/mydrawer"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  6. <FrameLayout
  7. android:id="@+id/mydrawer"
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:minWidth="25px"
  11. android:minHeight="25px">
  12. <TextView
  13. android:id="@+id/tvtext"
  14. android:text="Hello Slide left for Left Drawer and right for Right Drawer"
  15. android:layout_width="match_parent"
  16. android:layout_height="match_parent"
  17. android:gravity="center" />
  18. </FrameLayout>
  19. <ListView
  20. android:id="@+id/leftsideview"
  21. android:layout_width="240dp"
  22. android:layout_height="match_parent"
  23. android:layout_gravity="left"
  24. android:choiceMode="singleChoice"
  25. android:divider="#D2D2D2"
  26. android:dividerHeight="2dp" />
  27. <ListView
  28. android:id="@+id/rightsideview"
  29. android:layout_width="240dp"
  30. android:layout_height="match_parent"
  31. android:layout_gravity="right"
  32. android:choiceMode="singleChoice"
  33. android:divider="#D2D2D2"
  34. android:dividerHeight="2dp" />
  36. </android.support.v4.widget.DrawerLayout>

In above AXML, I have set ListView gravity, using “android:layout_gravity” attribute as “left” and “right” for the respective drawers. Also, I set choice as single ListView with “android:choiceMode” attribute.

Screenshot of layout



Step 3
Implementation of Left and Right Drawer in MainActivity

Now, we need to use above layout in MainActivity.cs file. I have taken above layout as Main layout, using SetContentView() method. Now, create an object “mDrawerLayout” of class Android.Support.v4.Widget DrawerLayout. Here, I have only one drawer to create left and right drawer. I have created two list items for two ListViews as “mRightItems” for right drawer and “mLeftItems” for left drawer. To set the items to both the drawers, I have used two ArrayAdapter as “mRightAdapter” and “mLeftAdaper”. Finally, I set Toast for the item selected in left or right drawers. The code snippet of MainActivity.cs is shown below.

MainActivity.cs

  1. public class MainActivity : Activity
  2. {
  3. //List Item for Left and Right Drawer
  4. List<string> mLeftItems = new List<string>();
  5. List<string> mRightItems = new List<string>();
  7. protected override void OnCreate(Bundle bundle)
  8. {
  9. base.OnCreate(bundle);
  10. SetContentView(Resource.Layout.Main);
  11. DrawerLayout mDrawerLayout;
  13. // Array Adaper
  14. ArrayAdapter mLeftAdapter,mRightAdapter;
  15. ListView mLeftDrawer,mRightDrawer;
  17. mDrawerLayout = FindViewById<DrawerLayout>(Resource.Id.mydrawer);
  19. mLeftDrawer = FindViewById<ListView>(Resource.Id.leftsideview);
  20. mRightDrawer = FindViewById<ListView>(Resource.Id.rightsideview);
  22. mLeftItems.Add("Left Item1");
  23. mLeftItems.Add("Left Item2");
  24. mLeftItems.Add("Left Item3");
  25. mLeftItems.Add("Left Item4");
  26. mLeftItems.Add("Left Item5");
  27. mLeftItems.Add("Left Item6");
  29. mRightItems.Add("Right Item1");
  30. mRightItems.Add("Right Item2");
  31. mRightItems.Add("Right Item3");
  32. mRightItems.Add("Right Item4");
  33. mRightItems.Add("Right Item5");
  34. mRightItems.Add("Right Item6");
  36. // Set ArrayAdaper with Items
  37. mLeftAdapter = new ArrayAdapter(this, Android.Resource.Layout.SimpleListItem1, mLeftItems);
  38. mLeftDrawer.Adapter = mLeftAdapter;
  40. mRightAdapter = new ArrayAdapter(this, Android.Resource.Layout.SimpleListItem1, mRightItems);
  41. mRightDrawer.Adapter = mRightAdapter;
  43. mRightDrawer.ItemClick += MRightDrawer_ItemClick;
  44. mLeftDrawer.ItemClick += MLeftDrawer_ItemClick;
  45. }
  47. private void MLeftDrawer_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
  48. {
  49. Toast.MakeText(this, "You Clicked at on" + mLeftItems[e.Position] +" in Left Drawer", ToastLength.Long).Show();
  50. }
  52. private void MRightDrawer_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
  53. {
  54. Toast.MakeText(this, "You Clicked at " + mRightItems[e.Position] + " in Right Drawer", ToastLength.Long).Show();
  55. }
  56. }
Output

Summary

In this article, we learned how to create left and right drawers and their items. Select an event in Xamarin with Visual Studio 2015.