[{"data":1,"prerenderedAt":643},["ShallowReactive",2],{"article-xamarin-andorid-listviews-part-1-of-2":3},{"article":4,"tags":308,"previous":323,"next":386},{"id":5,"title":6,"author":7,"body":8,"createdAt":297,"description":298,"extension":299,"img":46,"meta":300,"navigation":301,"path":302,"seo":303,"stem":304,"tags":305,"updatedAt":297,"__hash__":307},"articles\u002Farticles\u002Fxamarin-andorid-listviews-part-1-of-2.md","Xamarin Android ListViews Part 1 of 2","[object Object]",{"type":9,"value":10,"toc":295},"minimark",[11,22,38,51,54,57,141,144,223,226,276,279,291],[12,13,14,15,18,19,21],"p",{},"Continuing from my drawer example code…I have a fragment (About) where I want to show a number of rows.  There are a few ways of doing this but in my case I am going to use a ListView.",[16,17],"br",{},"\nA ListView is an important UI component of Android applications, used everywhere from short lists of menu options to long lists of contacts or internet favorites.",[16,20],{},"\nIn our example we have the following components that make up our Activity.",[23,24,25,29,32,35],"ul",{},[26,27,28],"li",{},"Activity the entire view",[26,30,31],{},"Red (our fragment)",[26,33,34],{},"Green (our listview)",[26,36,37],{},"Light Blue (our textview)",[39,40,42],"a",{"href":41},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin-listviews_aae8-image_2.png",[43,44],"img",{"style":45,"src":46,"border":47,"alt":48,"title":48,"width":49,"height":50},"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;","\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin-listviews_aae8-image_thumb.png",0,"image",249,404,[12,52,53],{},"Because we are working with Fragments we build our code within the OnCreateView method. ",[12,55,56],{},"I have been able to do this within OnActivityCreated as well.",[58,59,64],"pre",{"className":60,"code":61,"language":62,"meta":63,"style":63},"language-cs shiki shiki-themes github-light github-dark","public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)\n{\n    string[] recs = new string[2];\n    recs[0] = \"my first row\";\n    recs[1] = \"my second row\";  \n    View view = inflater.Inflate(Resource.Layout.About, container, false);\n    \u002F\u002F_context = container.Context;             \n    var listView = view.FindViewById\u003CListView>(Resource.Id.aboutListView);\n    var adapter = new ArrayAdapter\u003Cstring>(this.Activity, Resource.Layout.TextViewItem, recs);  \u002F\u002Fyou can get context also by container.Context\n    listView.Adapter = adapter;\n    return view;\n}  \n","cs","",[65,66,67,75,81,87,93,99,105,111,117,123,129,135],"code",{"__ignoreMap":63},[68,69,72],"span",{"class":70,"line":71},"line",1,[68,73,74],{},"public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)\n",[68,76,78],{"class":70,"line":77},2,[68,79,80],{},"{\n",[68,82,84],{"class":70,"line":83},3,[68,85,86],{},"    string[] recs = new string[2];\n",[68,88,90],{"class":70,"line":89},4,[68,91,92],{},"    recs[0] = \"my first row\";\n",[68,94,96],{"class":70,"line":95},5,[68,97,98],{},"    recs[1] = \"my second row\";  \n",[68,100,102],{"class":70,"line":101},6,[68,103,104],{},"    View view = inflater.Inflate(Resource.Layout.About, container, false);\n",[68,106,108],{"class":70,"line":107},7,[68,109,110],{},"    \u002F\u002F_context = container.Context;             \n",[68,112,114],{"class":70,"line":113},8,[68,115,116],{},"    var listView = view.FindViewById\u003CListView>(Resource.Id.aboutListView);\n",[68,118,120],{"class":70,"line":119},9,[68,121,122],{},"    var adapter = new ArrayAdapter\u003Cstring>(this.Activity, Resource.Layout.TextViewItem, recs);  \u002F\u002Fyou can get context also by container.Context\n",[68,124,126],{"class":70,"line":125},10,[68,127,128],{},"    listView.Adapter = adapter;\n",[68,130,132],{"class":70,"line":131},11,[68,133,134],{},"    return view;\n",[68,136,138],{"class":70,"line":137},12,[68,139,140],{},"}\n",[12,142,143],{},"In this example Resource.Layout.About is the name of my Fragment (public class AboutFragment : Fragment),\nResource.Id.aboutListView is referencing the ListView that was placed in the About.axml (see below), and the Resource.Layout.TextViewItem (blue)\nrepresents each row.",[58,145,149],{"className":146,"code":147,"language":148,"meta":63,"style":63},"language-xml shiki shiki-themes github-light github-dark","\u003C?xml version=\"1.0\" encoding=\"utf-8\"?>\n\u003CLinearLayout xmlns:android=\"\u003Ca href=\"http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid"\">http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid\"\u003C\u002Fa>\n    android:orientation=\"vertical\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:minWidth=\"25px\"\n    android:minHeight=\"25px\">\n    \u003CListView\n        android:minWidth=\"25px\"\n        android:minHeight=\"25px\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        android:id=\"@+id\u002FaboutListView\" \u002F>\n\u003C\u002FLinearLayout>\n","xml",[65,150,151,156,161,166,171,176,181,186,191,196,201,206,211,217],{"__ignoreMap":63},[68,152,153],{"class":70,"line":71},[68,154,155],{},"\u003C?xml version=\"1.0\" encoding=\"utf-8\"?>\n",[68,157,158],{"class":70,"line":77},[68,159,160],{},"\u003CLinearLayout xmlns:android=\"\u003Ca href=\"http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid"\">http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid\"\u003C\u002Fa>\n",[68,162,163],{"class":70,"line":83},[68,164,165],{},"    android:orientation=\"vertical\"\n",[68,167,168],{"class":70,"line":89},[68,169,170],{},"    android:layout_width=\"match_parent\"\n",[68,172,173],{"class":70,"line":95},[68,174,175],{},"    android:layout_height=\"match_parent\"\n",[68,177,178],{"class":70,"line":101},[68,179,180],{},"    android:minWidth=\"25px\"\n",[68,182,183],{"class":70,"line":107},[68,184,185],{},"    android:minHeight=\"25px\">\n",[68,187,188],{"class":70,"line":113},[68,189,190],{},"    \u003CListView\n",[68,192,193],{"class":70,"line":119},[68,194,195],{},"        android:minWidth=\"25px\"\n",[68,197,198],{"class":70,"line":125},[68,199,200],{},"        android:minHeight=\"25px\"\n",[68,202,203],{"class":70,"line":131},[68,204,205],{},"        android:layout_width=\"match_parent\"\n",[68,207,208],{"class":70,"line":137},[68,209,210],{},"        android:layout_height=\"match_parent\"\n",[68,212,214],{"class":70,"line":213},13,[68,215,216],{},"        android:id=\"@+id\u002FaboutListView\" \u002F>\n",[68,218,220],{"class":70,"line":219},14,[68,221,222],{},"\u003C\u002FLinearLayout>\n",[12,224,225],{},"This is another way of approaching inside the OnActivityCreated method",[58,227,229],{"className":60,"code":228,"language":62,"meta":63,"style":63},"public override void OnActivityCreated(Bundle savedInstanceState)\n{\n    base.OnActivityCreated(savedInstanceState);    \n    string[] recs = new string[2];\n    recs[0] = \"my first row\";\n    recs[1] = \"my second row\";\n    var listView = this.Activity.FindViewById\u003CListView>(Resource.Id.aboutListView);            \n    var adapter = new ArrayAdapter\u003Cstring>(_context, Resource.Layout.TextViewItem, recs);\n    listView.Adapter = adapter;\n}  \n",[65,230,231,236,240,245,249,253,258,263,268,272],{"__ignoreMap":63},[68,232,233],{"class":70,"line":71},[68,234,235],{},"public override void OnActivityCreated(Bundle savedInstanceState)\n",[68,237,238],{"class":70,"line":77},[68,239,80],{},[68,241,242],{"class":70,"line":83},[68,243,244],{},"    base.OnActivityCreated(savedInstanceState);    \n",[68,246,247],{"class":70,"line":89},[68,248,86],{},[68,250,251],{"class":70,"line":95},[68,252,92],{},[68,254,255],{"class":70,"line":101},[68,256,257],{},"    recs[1] = \"my second row\";\n",[68,259,260],{"class":70,"line":107},[68,261,262],{},"    var listView = this.Activity.FindViewById\u003CListView>(Resource.Id.aboutListView);            \n",[68,264,265],{"class":70,"line":113},[68,266,267],{},"    var adapter = new ArrayAdapter\u003Cstring>(_context, Resource.Layout.TextViewItem, recs);\n",[68,269,270],{"class":70,"line":119},[68,271,128],{},[68,273,274],{"class":70,"line":125},[68,275,140],{},[12,277,278],{},"TextViewItem.axml",[12,280,281,282,285,290],{},"\u003CTextView xmlns:android=\"",[39,283],{"href":284},"http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid\"",[39,286,287],{"href":287,"rel":288},"http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid",[289],"nofollow","\"\n    android:id=\"@+id\u002FtextItem\"\n    android:textSize=\"44sp\"\n    android:layout_width=\"fill_parent\"\n    android:layout_height=\"wrap_content\" \u002F>",[292,293,294],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":63,"searchDepth":77,"depth":77,"links":296},[],"2016-01-31T05:38:21.5000000-05:00",null,"md",{},true,"\u002Farticles\u002Fxamarin-andorid-listviews-part-1-of-2",{"title":6,"description":298},"articles\u002Fxamarin-andorid-listviews-part-1-of-2",[306],"xamarin","JuRG_Zcn0MsuFdCH2GNMKvH012bu4uX_lZwaO7XegO4",[309],{"id":310,"title":311,"body":312,"description":316,"extension":299,"img":317,"meta":318,"name":306,"navigation":301,"path":319,"seo":320,"stem":321,"__hash__":322},"tags\u002Ftags\u002Fxamarin.md","Xamarin",{"type":9,"value":313,"toc":314},[],{"title":63,"searchDepth":77,"depth":77,"links":315},[],"Xamarin is an open-source platform for building modern and performant applications for iOS, Android, and Windows with . NET. Xamarin is an abstraction layer that manages communication of shared code with underlying platform code.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1598313183973-4effcded8d5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",{},"\u002Ftags\u002Fxamarin",{"description":316},"tags\u002Fxamarin","deVB66I7cJMtWvqybFh5POf9LBCBwHNe-5ZGMOzV5G4",{"id":324,"title":325,"author":7,"body":326,"createdAt":379,"description":330,"extension":299,"img":374,"meta":380,"navigation":301,"path":381,"seo":382,"stem":383,"tags":384,"updatedAt":379,"__hash__":385},"articles\u002Farticles\u002Fxamarin-android-listviews-part-2-of-2.md","Xamarin Android - ListViews Part 2 of 2",{"type":9,"value":327,"toc":377},[328,331,337,343,347,353,363],[12,329,330],{},"Continuing on from an older post, we will modify our listview to display 2 columns.  Ultimately, we will put an image in the left column and text in the right column.  Currently we have created an ArrayAdapter which takes a list\u002Fcollection of strings and displays each row in a template.  The template was defined in a layout TextViewItem.axml",[58,332,336],{"className":333},[334,335],"brush:","xml;","\u003C?xml version=\"1.0\" encoding=\"utf-8\"?>  \n\u003CTextView xmlns:android=\"http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid\"  \n    android:id=\"@+id\u002FtextItem\"  \n    android:textSize=\"44sp\"  \n    android:layout_width=\"fill_parent\"  \n    android:layout_height=\"wrap_content\" \u002F>",[12,338,339,340,342],{},"What we have was an ArrayAdapter which required the above row definition with a collection of strings.  This worked fine to display the ToString() of either the string collection you provided or the object collection you used in the definition.",[16,341],{},"\nMoving forward this post will use a more advanced row template to display a string or an object collection.  This ultimately gives us more flexibility.  To do this we will create a custom Adapter which manages the displays aspect of the listview.  By doing this we can provide a collection of objects and then through our custom adapter we can position each property within our new row template.  Our new row template TextViewItem2.axml will be defined by the following.",[58,344,346],{"className":345},[334,335],"\u003C?xml version=\"1.0\" encoding=\"utf-8\"?>  \n\u003CLinearLayout xmlns:android=\"http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid\"  \n    android:orientation=\"vertical\"  \n    android:layout_width=\"match_parent\"  \n    android:layout_height=\"match_parent\"  \n    android:minWidth=\"25px\"  \n    android:minHeight=\"25px\">  \n    \u003CLinearLayout  \n        android:orientation=\"horizontal\"  \n        android:minWidth=\"25px\"  \n        android:minHeight=\"25px\"  \n        android:layout_width=\"match_parent\"  \n        android:layout_height=\"wrap_content\"  \n        android:id=\"@+id\u002FlinearLayout1\">  \n        \u003CTextView  \n            android:id=\"@+id\u002FtextItem1\"  \n            android:textSize=\"44sp\"  \n            android:layout_width=\"wrap_content\"  \n            android:layout_height=\"fill_parent\" \u002F>  \n        \u003CTextView  \n            android:id=\"@+id\u002FtextItem2\"  \n            android:textSize=\"44sp\"  \n            android:layout_width=\"wrap_content\"  \n            android:layout_height=\"fill_parent\" \u002F>  \n    \u003C\u002FLinearLayout>  \n\u003C\u002FLinearLayout>",[12,348,349,350,352],{},"Here you can see we have a LinearLayout parent and a LinearLayout (horizontal orientation) established to display 2 textviews side by side.",[16,351],{},"\nNow to the adapter, as mentioned above we have to build out a custom adapter as this adapter will be responsible for take each item in our collection and mapping our object properties to specific controls in the above textviewitem template.",[58,354,357,358,362],{"className":355},[334,356],"csharp;","   public class AboutScreenAdapter : BaseAdapter\u003CMyDetail>  \n    {  \n        List\u003CMyDetail> _items;  \n        Activity _context;  \n        public AboutScreenAdapter(Activity context, List\u003CMyDetail> items) : base()  \n        {  \n            this._context = context;  \n            this._items = items;  \n        }  \n        public override long GetItemId(int position)  \n        {  \n            return position;  \n        }  \n        public override MyDetail this[int position]  \n        {  \n            get { return _items[position]; }              \n        }  \n  \n        public override int Count  \n        {  \n            get { return _items.Count; }  \n        }  \n        public override View GetView(int position, View convertView, ViewGroup parent)  \n        {  \n            View view = convertView; \u002F\u002F re-use an existing view, if one is available  \n            if (view == null) \u002F\u002F otherwise create a new one  \n                view = _context.LayoutInflater.Inflate(Resource.Layout.",[359,360,361],"strong",{},"TextViewItem2",", null);  \n              \n            \u002F\u002Fview.FindViewById\u003CTextView>(Android.Resource.Id.text).Text = items[position];  \n  \n            view.FindViewById\u003CTextView>(Resource.Id.textItem1).Text = _items[position].Image;  \n            view.FindViewById\u003CTextView>(Resource.Id.textItem2).Text = _items[position].Detail;  \n            return view;  \n        }  \n    }",[12,364,365,366,368],{},"Above you can see, we provide our object collection List\u003CMyDetail> items and the row template is defined (bold) TextViewItem2 which is established by a layout in our layouts folder TextViewItem2.axml",[16,367],{},[39,369,371],{"href":370},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin-listviews-part-2_6274-image_2.png",[43,372],{"style":373,"src":374,"border":47,"alt":48,"title":48,"width":375,"height":376},"background-image: none; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px; border: 0px;","\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin-listviews-part-2_6274-image_thumb.png",154,244,{"title":63,"searchDepth":77,"depth":77,"links":378},[],"2016-02-01T00:32:33.2900000-05:00",{},"\u002Farticles\u002Fxamarin-android-listviews-part-2-of-2",{"title":325,"description":330},"articles\u002Fxamarin-android-listviews-part-2-of-2",[306],"GDfb7Zf3hkjwtI7FU52rUJ_1EeuzVTcDs_ng1XAI9yo",{"id":387,"title":388,"author":7,"body":389,"createdAt":635,"description":636,"extension":299,"img":440,"meta":637,"navigation":301,"path":638,"seo":639,"stem":640,"tags":641,"updatedAt":635,"__hash__":642},"articles\u002Farticles\u002Fxamarin-android-drawerlayout.md","Xamarin Android - DrawerLayout",{"type":9,"value":390,"toc":633},[391,491,536,575],[12,392,393,394,398,399,401,402,404,405,407,410,411,413,414,416,417,419,420,422,423,425,426,431,432,434,443,445,446,448,449,451,452,454,455,457,458,460,461,463,471,472,478,480,481,483,484,486,487,490],{},"To add a navigation drawer, declare your user interface with a ",[39,395,397],{"href":396},"http:\u002F\u002Fdeveloper.android.com\u002Freference\u002Fandroid\u002Fsupport\u002Fv4\u002Fwidget\u002FDrawerLayout.html","DrawerLayout"," object as the root view of your layout. Inside the ",[39,400,397],{"href":396},", add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.",[16,403],{},"\n\u003C?xml version=\"1.0\" encoding=\"utf-8\"?>\n\u003Candroid.support.v4.widget.DrawerLayout\nxmlns:android=\"",[39,406],{"href":287},[39,408,287],{"href":287,"rel":409},[289],"\"\nandroid:id=\"@+id\u002FdrawerLayout\"\n   android:layout_width =\"match_parent\"\n    android:layout_height=\"match_parent\">",[16,412],{},"\n  \u003C!-- Content -->\n  \u003CFrameLayout\n        android:id =\"@+id\u002FframeLayout\"\n        android:layout_width =\"match_parent\"\n        android:layout_height=\"match_parent\" \u002F>",[16,415],{},"\n  \u003C!-- Navigation drawer menu -->\n  \u003CListView\n        android:id=\"@+id\u002FdrawerListView\"\n        android:layout_gravity=\"start\"\n        android:choiceMode    =\"singleChoice\"\n        android:layout_width  =\"240dp\"\n        android:layout_height =\"match_parent\"\n        android:background =\"?android:attr\u002FwindowBackground\" \u002F>",[16,418],{},"\n\u003C\u002Fandroid.support.v4.widget.DrawerLayout>",[16,421],{},"\nThe above layout uses a DrawerLayout with two child views: a FrameLayout to contain the main content which will be populated with a Fragment at runtime, and a ListView for the contents of the drawer.",[16,424],{},"\nNow to the MainActivity.cs coding.. let’s get a reference to the drawerLayout = FindViewById\u003CDrawerLayout>(Resource.Id.drawerLayout);  You will find that DrawerLayout is not defined.  You need to add a reference via Nuget to ",[39,427,430],{"href":428,"target":429},"https:\u002F\u002Fcomponents.xamarin.com\u002Fview\u002Fxamandroidsupportv4-18","_blank","Android Support Library v4",".  Open Nuget and search for Xamarin.android.support.v4",[16,433],{},[39,435,437],{"href":436},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_2.png",[43,438],{"style":439,"src":440,"border":47,"alt":48,"title":48,"width":441,"height":442},"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;","\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_thumb.png",374,106,[16,444],{},"\nAndroid Support Libraries : The Android Support Libraries are a set of code libraries that provide backward-compatible versions of Android framework APIs as well as features that are only available through the library APIs. Each Support Library is backward-compatible to a specific Android API level. This design means that your applications can use the libraries' features and still be compatible with devices running older versions of Android.  Including the Support Libraries in your Android project is considered a best practice for application developers.",[16,447],{},"\nAdding a using statement for Android.Support.V4.Widget will complete the reference to DrawerLayout.",[16,450],{},"\n_menuItems = new string",[68,453],{}," { \"Welcome\", \"Options\", \"About\" };\n_drawerLayout = FindViewById\u003CDrawerLayout>(Resource.Id.drawerLayout);\n_drawerList = FindViewById\u003CListView>(Resource.Id.drawerListView);\n_drawerList.Adapter = new ArrayAdapter\u003Cstring>(this, Resource.Layout.ListViewMenuRow, Resource.Id.menuRowTextView, _menuItems);",[16,456],{},"\nWe have a List which should be populated by an Adapter (ArrayAdapter or SimplerCursorAdaptor)",[16,459],{},"\nAt this point we have (left) and if you swipe toward the right you see the menu.",[16,462],{},[39,464,466],{"href":465},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_4.png",[43,467],{"style":439,"src":468,"border":47,"alt":48,"title":48,"width":469,"height":470},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_thumb_1.png",151,240," ",[39,473,475],{"href":474},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_6.png",[43,476],{"style":373,"src":477,"border":47,"alt":48,"title":48,"width":469,"height":376},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_thumb_2.png",[16,479],{},"\nHooking up the menu click looks like..",[16,482],{},"\n_drawerList.ItemClick += _drawerList_ItemClick;",[16,485],{},"\nprivate void _drawerList_ItemClick(object sender, AdapterView.ItemClickEventArgs e)\n{\n    OnMenuItemClick(e.Position);\n}private void OnMenuItemClick(int position)\n{\n    this.Title = _menuItems",[68,488,489],{},"position",";\n}",[12,492,493,494,496,497,490,499,501,502,506,507,511,512,516,517,521,523,524,526,527,529,530,532,533,535],{},"If you want to use lambda the above can be rewritten..",[16,495],{},"\n_drawerList.ItemClick += (object sender, AdapterView.ItemClickEventArgs e) => OnMenuItemClick(e.Position);\nprivate void OnMenuItemClick(int position)\n{\n    this.Title = _menuItems",[68,498,489],{},[16,500],{},"\nNow we have to deal with showing a view after clicking a menu item.  We will do this implementation with Fragments.  A Fragment is a piece of an application's user interface or behavior that can be placed in an ",[39,503,505],{"href":504},"http:\u002F\u002Fdeveloper.android.com\u002Freference\u002Fandroid\u002Fapp\u002FActivity.html","Activity",". Interaction with fragments is done through ",[39,508,510],{"href":509},"http:\u002F\u002Fdeveloper.android.com\u002Freference\u002Fandroid\u002Fapp\u002FFragmentManager.html","FragmentManager",", which can be obtained via ",[39,513,515],{"href":514},"http:\u002F\u002Fdeveloper.android.com\u002Freference\u002Fandroid\u002Fapp\u002FActivity.html#getFragmentManager()","Activity.getFragmentManager()"," and ",[39,518,520],{"href":519},"http:\u002F\u002Fdeveloper.android.com\u002Freference\u002Fandroid\u002Fapp\u002FFragment.html#getFragmentManager()","Fragment.getFragmentManager()",[16,522],{},"\nAt this point, we declare field parameter Fragment",[68,525],{}," _fragments\nprivate Fragment",[68,528],{}," _fragments = new Fragment",[68,531],{},"{ new WelcomeFragment(), new OptionsFragment(), new AboutFragment() };",[16,534],{},"\nand within the menu click, use the FragmentManager to set the selected fragment using the position in the array.",[12,537,538,539,541,542,544,545,547,548,550,551,553,554,558,559,561,562,564,572,574],{},"private void OnMenuItemClick(int position)\n{\n    base.FragmentManager.BeginTransaction().Replace(Resource.Id.frameLayout, _fragments",[68,540,489],{},").Commit();\n    this.Title = _menuItems",[68,543,489],{},";\n}\nOk, so running the sample now we have a drawer menu, and when an item is selected we use FragmentManager to swap out the frameLayout view with a fragment defined in the _fragments array.  As the application starts we want to set the first menu item selected and we want to show the respective fragment via",[16,546],{},"\n_drawerList.SetItemChecked(0, true); \u002F\u002Fhighlight the first item at startup\nOnMenuItemClick(0);",[16,549],{},"\nAfter the menu item is selected, we swap fragments and we will also close the drawer via\n_drawerLayout.CloseDrawer(_drawerList);",[16,552],{},"\nIf you review the screen captures above you will notice we do not yet have the hamburger menu.  We will do this by working with the ActionBar.  Using the class ",[39,555,557],{"href":556,"target":429},"http:\u002F\u002Fdeveloper.xamarin.com\u002Fapi\u002Ftype\u002FAndroid.Support.V4.App.ActionBarDrawerToggle\u002F","ActionBarDrawerToggle"," we can tie together the functionality of DrawerLayout and the framework ActionBar to implement the recommended design for navigation drawers.",[16,560],{},"\nSo, I did have a few conflicts at this point which brings up Android.Support.V7.App vs. Android.Support.V4.App.  What is the difference? V4 supports library is designed to be used with Android 1.6 (API level 4) while V7 supports “libraries designed to be used with Android 2.1 (API level 7) and higher”  We will need to add via Nuget Xamarin.Android.Support.v7.AppCompat to reference ActionBarDrawerToggle.  i.e. Android.Support.V7.App.ActionBarDrawerToggle",[16,563],{},[39,565,567],{"href":566},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_8.png",[43,568],{"style":439,"src":569,"border":47,"alt":48,"title":48,"width":570,"height":571},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_thumb_3.png",342,100,[16,573],{},"\nWithin v7 Support Library there are several libraries with a number of feature sets which can be included independently of each other.  For example within v7 we have v7 appcompat library, v7 cardview library, v7 gridlayout library etc.",[12,576,577,578,580,581,584,585,587,588,590,591,595,596,598,599,587,601,603,471,610,618,620,621,623,624,626,627,629,630,632],{},"\u002F\u002Fcreate an instance of actionbardrawertoggle           \n_drawerToggle = new ActionBarDrawerToggle(this, _drawerLayout, Resource.String.DrawerOpenDescription, Resource.String.DrawerCloseDescription);\n\u002F\u002Fset the actiondrawertoggle as the drawerlistener on the drawlayout so it recieves drawer state-change callbacks\n_drawerLayout.SetDrawerListener(_drawerToggle);\n\u002F\u002FMust up-enable the home button, the ActionBarDrawerToggle will change the icon to the \"hamburger\"\nActionBar.SetDisplayHomeAsUpEnabled(true);",[16,579],{},"\nBuilding the project I do have an issue….”",[359,582,583],{},"No resource identifier found for attribute ‘touchscreenBlocksFocus’ in the package ‘android’ ","After more than 1 hour of searching I came along the solution.  I had ‘Compile using Android version:’ API Level 19, Minimum Android to target: Use Compile using SDK Version, Target Android: ‘'Use Compile Using SDK Version.  In order to avoid this error I had to change my Target Android version to API Level 21 (Xamarin.Android v5.0 Support).",[16,586],{},"\n ",[16,589],{},"\nSo that brings up the question\u002Fconcern, for Android applications you have the choices Compile Using, Minimum Android to target, and Target Android version.  So what is the difference here.  From ",[39,592,594],{"href":593,"target":429},"http:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F4568267\u002Fandroid-min-sdk-version-vs-target-sdk-version\u002F4994039#4994039","StackOverflow"," a very good explanation (partial)\n”In short, here is the purpose to declaring a different targetSDK from the minSDK: It means you are using features from a higher level SDK than your minimum, but you have ensured backwards compatibility. In other words, imagine that you want to use a feature that was only recently introduced, but that isn't critical to your application. You would then set the targetSDK to the version where this new feature was introduced and the minimum to something lower so that everyone could still use your app.”",[16,597],{},"\nGetting back on track, we were hooking up the action bar to that of the drawer. Before we hook up this action bar drawer toggle we have this (left) notice there is no icon.  After we hook up the drawertoggle we have the \u003C icon.",[16,600],{},[16,602],{},[39,604,606],{"href":605},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_14.png",[43,607],{"style":439,"src":608,"border":47,"alt":48,"title":48,"width":609,"height":470},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_thumb_6.png",150,[39,611,613],{"href":612},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_10.png",[43,614],{"style":439,"src":615,"border":47,"alt":48,"title":48,"width":616,"height":617},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarinandroiddrawerlayout_9d2d-image_thumb_4.png",152,242,[16,619],{},"\nNow when a user clicks on the > icon we want to forward all actionbar clicks to the ActionBarDrawerToggle.  We can do this with",[16,622],{},"\npublic override bool OnOptionsItemSelected(IMenuItem item)\n{\n    \u002F\u002F Forward all ActionBar-clicks to the ActionBarDrawerToggle.\n    \u002F\u002F It will verify the click was on the \"Home\" button (i.e. the button at the left edge of the ActionBar).\n    \u002F\u002F If so, it will toggle the state of the drawer. It will then return \"true\" so you know you do not need to do any more processing.\n    if (_drawerToggle.OnOptionsItemSelected(item))\n        return true;\n    \u002F\u002F Other cases go here for other buttons in the ActionBar.\n    \u002F\u002F This sample app has no other buttons. This code is a placeholder to show what would be needed if there were other buttons.\n    switch (item.ItemId)\n    {\n        default: break;\n    }    return base.OnOptionsItemSelected(item);\n}",[16,625],{},"\nThe final piece of this is ensuring that the hamburger is shown when the menu is closed.  In order to do this we need to sync the state of the drawer via the following method.  This will execute after your activities initialization is finished.  You need to tell the toggle button to synchronize its icon with the open\u002Fclosed state of the drawer.",[16,628],{},"\nprotected override void OnPostCreate(Bundle savedInstanceState)\n{\n    \u002F\u002F Initialization and any needed Restore operation are now complete.\n    \u002F\u002F Sync the state of the ActionBarDrawerToggle to the drawer (i.e. show the \"hamburger\" if the drawer is closed or an arrow if it is open).\n     _drawerToggle.SyncState();\n    base.OnPostCreate(savedInstanceState);\n}",[16,631],{},"\nIf you would like the sample code, please connect with me via email or twitter and I will send to you.",{"title":63,"searchDepth":77,"depth":77,"links":634},[],"2016-01-30T08:45:55.4700000-05:00","To add a navigation drawer, declare your user interface with a DrawerLayout object as the root view of your layout. Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.\n\u003C?xml version=\"1.0\" encoding=\"utf-8\"?>\n\u003Candroid.support.v4.widget.DrawerLayout\nxmlns:android=\"http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid\"\nandroid:id=\"@+id\u002FdrawerLayout\"\n   android:layout_width =\"match_parent\"\n    android:layout_height=\"match_parent\">\n  \u003C!-- Content -->\n  \u003CFrameLayout\n        android:id =\"@+id\u002FframeLayout\"\n        android:layout_width =\"match_parent\"\n        android:layout_height=\"match_parent\" \u002F>\n  \u003C!-- Navigation drawer menu -->\n  \u003CListView\n        android:id=\"@+id\u002FdrawerListView\"\n        android:layout_gravity=\"start\"\n        android:choiceMode    =\"singleChoice\"\n        android:layout_width  =\"240dp\"\n        android:layout_height =\"match_parent\"\n        android:background =\"?android:attr\u002FwindowBackground\" \u002F>\n\u003C\u002Fandroid.support.v4.widget.DrawerLayout>\nThe above layout uses a DrawerLayout with two child views: a FrameLayout to contain the main content which will be populated with a Fragment at runtime, and a ListView for the contents of the drawer.\nNow to the MainActivity.cs coding.. let’s get a reference to the drawerLayout = FindViewById\u003CDrawerLayout>(Resource.Id.drawerLayout);  You will find that DrawerLayout is not defined.  You need to add a reference via Nuget to Android Support Library v4.  Open Nuget and search for Xamarin.android.support.v4\nAndroid Support Libraries : The Android Support Libraries are a set of code libraries that provide backward-compatible versions of Android framework APIs as well as features that are only available through the library APIs. Each Support Library is backward-compatible to a specific Android API level. This design means that your applications can use the libraries' features and still be compatible with devices running older versions of Android.  Including the Support Libraries in your Android project is considered a best practice for application developers.\nAdding a using statement for Android.Support.V4.Widget will complete the reference to DrawerLayout.\n_menuItems = new string { \"Welcome\", \"Options\", \"About\" };\n_drawerLayout = FindViewById\u003CDrawerLayout>(Resource.Id.drawerLayout);\n_drawerList = FindViewById\u003CListView>(Resource.Id.drawerListView);\n_drawerList.Adapter = new ArrayAdapter\u003Cstring>(this, Resource.Layout.ListViewMenuRow, Resource.Id.menuRowTextView, _menuItems);\nWe have a List which should be populated by an Adapter (ArrayAdapter or SimplerCursorAdaptor)\nAt this point we have (left) and if you swipe toward the right you see the menu. \nHooking up the menu click looks like..\n_drawerList.ItemClick += _drawerList_ItemClick;\nprivate void _drawerList_ItemClick(object sender, AdapterView.ItemClickEventArgs e)\n{\n    OnMenuItemClick(e.Position);\n}private void OnMenuItemClick(int position)\n{\n    this.Title = _menuItemsposition;\n}",{},"\u002Farticles\u002Fxamarin-android-drawerlayout",{"title":388,"description":636},"articles\u002Fxamarin-android-drawerlayout",[306],"atMZSxAPcEHLtAMZGtRMESx9f019pOvMhwLgqyfRYSM",1781574771230]