How To Create Left And Right Drawers In Xamarin With Visual Studio 2015

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.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mydrawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/mydrawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minWidth="25px"
        android:minHeight="25px">
        <TextView
            android:id="@+id/tvtext"
            android:text="Hello Slide left for Left Drawer and right for Right Drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center" />
    </FrameLayout>
    <ListView
        android:id="@+id/leftsideview"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:choiceMode="singleChoice"
        android:divider="#D2D2D2"
        android:dividerHeight="2dp" />
  <ListView
        android:id="@+id/rightsideview"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:choiceMode="singleChoice"
        android:divider="#D2D2D2"
        android:dividerHeight="2dp" />

</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

public class MainActivity : Activity
{
        //List Item for Left and Right Drawer
        List<string> mLeftItems = new List<string>();
        List<string> mRightItems = new List<string>();

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            DrawerLayout mDrawerLayout;

            // Array Adaper
            ArrayAdapter mLeftAdapter,mRightAdapter;
            ListView mLeftDrawer,mRightDrawer;

            mDrawerLayout = FindViewById<DrawerLayout>(Resource.Id.mydrawer);

            mLeftDrawer = FindViewById<ListView>(Resource.Id.leftsideview);
            mRightDrawer = FindViewById<ListView>(Resource.Id.rightsideview);

            mLeftItems.Add("Left Item1");
            mLeftItems.Add("Left Item2");
            mLeftItems.Add("Left Item3");
            mLeftItems.Add("Left Item4");
            mLeftItems.Add("Left Item5");
            mLeftItems.Add("Left Item6");

            mRightItems.Add("Right Item1");
            mRightItems.Add("Right Item2");
            mRightItems.Add("Right Item3");
            mRightItems.Add("Right Item4");
            mRightItems.Add("Right Item5");
            mRightItems.Add("Right Item6");

           // Set ArrayAdaper with Items
            mLeftAdapter = new ArrayAdapter(this, Android.Resource.Layout.SimpleListItem1, mLeftItems);
            mLeftDrawer.Adapter = mLeftAdapter;

            mRightAdapter = new ArrayAdapter(this, Android.Resource.Layout.SimpleListItem1, mRightItems);
            mRightDrawer.Adapter = mRightAdapter;

            mRightDrawer.ItemClick += MRightDrawer_ItemClick;
            mLeftDrawer.ItemClick += MLeftDrawer_ItemClick;
        }

        private void MLeftDrawer_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {
            Toast.MakeText(this, "You Clicked at on" + mLeftItems[e.Position] +" in Left Drawer", ToastLength.Long).Show();
        }

        private void MRightDrawer_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {
            Toast.MakeText(this, "You Clicked at " + mRightItems[e.Position] + " in Right Drawer", ToastLength.Long).Show();
        }
}

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.