[{"data":1,"prerenderedAt":461},["ShallowReactive",2],{"article-xamarin-android-listviews-part-2-of-2":3},{"article":4,"tags":81,"previous":96,"next":172},{"id":5,"title":6,"author":7,"body":8,"createdAt":71,"description":14,"extension":72,"img":62,"meta":73,"navigation":74,"path":75,"seo":76,"stem":77,"tags":78,"updatedAt":71,"__hash__":80},"articles\u002Farticles\u002Fxamarin-android-listviews-part-2-of-2.md","Xamarin Android - ListViews Part 2 of 2","[object Object]",{"type":9,"value":10,"toc":67},"minimark",[11,15,22,29,33,39,49],[12,13,14],"p",{},"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",[16,17,21],"pre",{"className":18},[19,20],"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,23,24,25,28],{},"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.",[26,27],"br",{},"\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.",[16,30,32],{"className":31},[19,20],"\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,34,35,36,38],{},"Here you can see we have a LinearLayout parent and a LinearLayout (horizontal orientation) established to display 2 textviews side by side.",[26,37],{},"\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.",[16,40,43,44,48],{"className":41},[19,42],"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.",[45,46,47],"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,50,51,52,54],{},"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",[26,53],{},[55,56,58],"a",{"href":57},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin-listviews-part-2_6274-image_2.png",[59,60],"img",{"style":61,"src":62,"border":63,"alt":64,"title":64,"width":65,"height":66},"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",0,"image",154,244,{"title":68,"searchDepth":69,"depth":69,"links":70},"",2,[],"2016-02-01T00:32:33.2900000-05:00","md",{},true,"\u002Farticles\u002Fxamarin-android-listviews-part-2-of-2",{"title":6,"description":14},"articles\u002Fxamarin-android-listviews-part-2-of-2",[79],"xamarin","GDfb7Zf3hkjwtI7FU52rUJ_1EeuzVTcDs_ng1XAI9yo",[82],{"id":83,"title":84,"body":85,"description":89,"extension":72,"img":90,"meta":91,"name":79,"navigation":74,"path":92,"seo":93,"stem":94,"__hash__":95},"tags\u002Ftags\u002Fxamarin.md","Xamarin",{"type":9,"value":86,"toc":87},[],{"title":68,"searchDepth":69,"depth":69,"links":88},[],"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":89},"tags\u002Fxamarin","deVB66I7cJMtWvqybFh5POf9LBCBwHNe-5ZGMOzV5G4",{"id":97,"title":98,"author":7,"body":99,"createdAt":164,"description":165,"extension":72,"img":112,"meta":166,"navigation":74,"path":167,"seo":168,"stem":169,"tags":170,"updatedAt":164,"__hash__":171},"articles\u002Farticles\u002Fxamarin-android-actionbar.md","Xamarin Android ActionBar",{"type":9,"value":100,"toc":162},[101,118,122,125,129,132,136],[12,102,103,104,106,115,117],{},"Ok so in prior posts I talked about adding drawer layout to my android project.  Today, I am going to add an actionbar to the project.  Starting with the end result of my first attempt see below.  I have an activity with tabs on each view.",[26,105],{},[55,107,109],{"href":108},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin_a3b5-image_2.png",[59,110],{"style":111,"src":112,"border":63,"alt":64,"title":64,"width":113,"height":114},"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;","\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin_a3b5-image_thumb.png",151,240,[26,116],{},"\nThis is how that was accomplished.  Within the OnCreate(Bundle bundle) method of the Activity",[16,119,121],{"className":120},[19,42],"this.ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;              \nAddTab(\"Tab 1\", Resource.Drawable.ic_tab_white, new SampleTabFragment());  \nAddTab(\"Tab 2\", Resource.Drawable.ic_tab_white, new SampleTabFragment2());  \n  \nif (bundle != null)     this.ActionBar.SelectTab(this.ActionBar.GetTabAt(bundle.GetInt(\"tab\")));",[12,123,124],{},"Adding method AddTab",[16,126,128],{"className":127},[19,42],"        void AddTab(string tabText, int iconResourceId, Fragment view)  \n        {  \n            var tab = this.ActionBar.NewTab();  \n            tab.SetText(tabText);  \n            tab.SetIcon(Resource.Drawable.ic_tab_white);  \n  \n            \u002F\u002F must set event handler before adding tab  \n  \n            tab.TabSelected += delegate (object sender, Android.App.ActionBar.TabEventArgs e)  \n            {  \n                var fragment = this.FragmentManager.FindFragmentById(Resource.Id.frameLayout);  \n                if (fragment != null)  \n                    e.FragmentTransaction.Remove(fragment);  \n                e.FragmentTransaction.Add(Resource.Id.frameLayout, view);  \n            };  \n            tab.TabUnselected += delegate (object sender, Android.App.ActionBar.TabEventArgs e) {  \n                e.FragmentTransaction.Remove(view);  \n            };  \n  \n            this.ActionBar.AddTab(tab);  \n        }",[12,130,131],{},"Adding fragment classes for the end target for selecting a tab",[16,133,135],{"className":134},[19,42],"    public class SampleTabFragment : Fragment  \n    {  \n        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  \n        {  \n            base.OnCreateView(inflater, container, savedInstanceState);  \n  \n            var view = inflater.Inflate(Resource.Layout.Tab, container, false);  \n            var sampleTextView = view.FindViewById\u003CTextView>(Resource.Id.sampleTextView);  \n            sampleTextView.Text = \"sample fragment text\";  \n  \n            return view;  \n        }  \n    }  \n  \n    public class SampleTabFragment2 : Fragment  \n    {  \n        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  \n        {  \n            base.OnCreateView(inflater, container, savedInstanceState);  \n  \n            var view = inflater.Inflate(Resource.Layout.Tab, container, false);  \n            var sampleTextView = view.FindViewById\u003CTextView>(Resource.Id.sampleTextView);  \n            sampleTextView.Text = \"sample fragment text 2\";  \n  \n            return view;  \n        }  \n    }",[12,137,138,139,141,142,145,147,148,150,151,153],{},"When a user selects a tab, we have them hooked up to show the respective fragment.  I also noticed that the code within the TabSelected event could be replaced by the following FragmentManager code",[26,140],{},"\ntab.TabSelected += delegate (object sender, Android.App.ActionBar.TabEventArgs e) { \u002F\u002Fvar fragment = this.FragmentManager.FindFragmentById(Resource.Id.frameLayout); \u002F\u002Fif (fragment != null) \u002F\u002Fe.FragmentTransaction.Remove(fragment); \u002F\u002Fe.FragmentTransaction.Add(Resource.Id.frameLayout, view);    ",[45,143,144],{}," base.FragmentManager.BeginTransaction().Replace(Resource.Id.frameLayout, view).Commit(",[26,146],{},"\n};",[26,149],{},"\nWhile the above works to show tabs in my sample application this is not really what I am looking for. The following guide shows the different aspects of the ActionBar.  In our above example we were working with Tab Navigation.  Ideally, what I am looking for is how to get my tabs where the action buttons are shown.",[26,152],{},[55,154,156],{"href":155},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin_a3b5-image_4.png",[59,157],{"style":158,"src":159,"border":63,"alt":64,"title":64,"width":160,"height":161},"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;","\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin_a3b5-image_thumb_1.png",290,279,{"title":68,"searchDepth":69,"depth":69,"links":163},[],"2016-02-06T08:02:02.1700000-05:00","More fun with actionbars with Xamarin",{},"\u002Farticles\u002Fxamarin-android-actionbar",{"title":98,"description":165},"articles\u002Fxamarin-android-actionbar",[79],"D9kSu3OBx2kAPQJfH-P1Y6pJDljKlYK_lEnLxL0fRJM",{"id":173,"title":174,"author":7,"body":175,"createdAt":453,"description":454,"extension":72,"img":207,"meta":455,"navigation":74,"path":456,"seo":457,"stem":458,"tags":459,"updatedAt":453,"__hash__":460},"articles\u002Farticles\u002Fxamarin-andorid-listviews-part-1-of-2.md","Xamarin Android ListViews Part 1 of 2",{"type":9,"value":176,"toc":451},[177,186,202,210,213,216,297,300,379,382,432,435,447],[12,178,179,180,182,183,185],{},"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.",[26,181],{},"\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.",[26,184],{},"\nIn our example we have the following components that make up our Activity.",[187,188,189,193,196,199],"ul",{},[190,191,192],"li",{},"Activity the entire view",[190,194,195],{},"Red (our fragment)",[190,197,198],{},"Green (our listview)",[190,200,201],{},"Light Blue (our textview)",[55,203,205],{"href":204},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin-listviews_aae8-image_2.png",[59,206],{"style":111,"src":207,"border":63,"alt":64,"title":64,"width":208,"height":209},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-xamarin-listviews_aae8-image_thumb.png",249,404,[12,211,212],{},"Because we are working with Fragments we build our code within the OnCreateView method. ",[12,214,215],{},"I have been able to do this within OnActivityCreated as well.",[16,217,221],{"className":218,"code":219,"language":220,"meta":68,"style":68},"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",[222,223,224,232,237,243,249,255,261,267,273,279,285,291],"code",{"__ignoreMap":68},[225,226,229],"span",{"class":227,"line":228},"line",1,[225,230,231],{},"public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)\n",[225,233,234],{"class":227,"line":69},[225,235,236],{},"{\n",[225,238,240],{"class":227,"line":239},3,[225,241,242],{},"    string[] recs = new string[2];\n",[225,244,246],{"class":227,"line":245},4,[225,247,248],{},"    recs[0] = \"my first row\";\n",[225,250,252],{"class":227,"line":251},5,[225,253,254],{},"    recs[1] = \"my second row\";  \n",[225,256,258],{"class":227,"line":257},6,[225,259,260],{},"    View view = inflater.Inflate(Resource.Layout.About, container, false);\n",[225,262,264],{"class":227,"line":263},7,[225,265,266],{},"    \u002F\u002F_context = container.Context;             \n",[225,268,270],{"class":227,"line":269},8,[225,271,272],{},"    var listView = view.FindViewById\u003CListView>(Resource.Id.aboutListView);\n",[225,274,276],{"class":227,"line":275},9,[225,277,278],{},"    var adapter = new ArrayAdapter\u003Cstring>(this.Activity, Resource.Layout.TextViewItem, recs);  \u002F\u002Fyou can get context also by container.Context\n",[225,280,282],{"class":227,"line":281},10,[225,283,284],{},"    listView.Adapter = adapter;\n",[225,286,288],{"class":227,"line":287},11,[225,289,290],{},"    return view;\n",[225,292,294],{"class":227,"line":293},12,[225,295,296],{},"}\n",[12,298,299],{},"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.",[16,301,305],{"className":302,"code":303,"language":304,"meta":68,"style":68},"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",[222,306,307,312,317,322,327,332,337,342,347,352,357,362,367,373],{"__ignoreMap":68},[225,308,309],{"class":227,"line":228},[225,310,311],{},"\u003C?xml version=\"1.0\" encoding=\"utf-8\"?>\n",[225,313,314],{"class":227,"line":69},[225,315,316],{},"\u003CLinearLayout xmlns:android=\"\u003Ca href=\"http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid"\">http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid\"\u003C\u002Fa>\n",[225,318,319],{"class":227,"line":239},[225,320,321],{},"    android:orientation=\"vertical\"\n",[225,323,324],{"class":227,"line":245},[225,325,326],{},"    android:layout_width=\"match_parent\"\n",[225,328,329],{"class":227,"line":251},[225,330,331],{},"    android:layout_height=\"match_parent\"\n",[225,333,334],{"class":227,"line":257},[225,335,336],{},"    android:minWidth=\"25px\"\n",[225,338,339],{"class":227,"line":263},[225,340,341],{},"    android:minHeight=\"25px\">\n",[225,343,344],{"class":227,"line":269},[225,345,346],{},"    \u003CListView\n",[225,348,349],{"class":227,"line":275},[225,350,351],{},"        android:minWidth=\"25px\"\n",[225,353,354],{"class":227,"line":281},[225,355,356],{},"        android:minHeight=\"25px\"\n",[225,358,359],{"class":227,"line":287},[225,360,361],{},"        android:layout_width=\"match_parent\"\n",[225,363,364],{"class":227,"line":293},[225,365,366],{},"        android:layout_height=\"match_parent\"\n",[225,368,370],{"class":227,"line":369},13,[225,371,372],{},"        android:id=\"@+id\u002FaboutListView\" \u002F>\n",[225,374,376],{"class":227,"line":375},14,[225,377,378],{},"\u003C\u002FLinearLayout>\n",[12,380,381],{},"This is another way of approaching inside the OnActivityCreated method",[16,383,385],{"className":218,"code":384,"language":220,"meta":68,"style":68},"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",[222,386,387,392,396,401,405,409,414,419,424,428],{"__ignoreMap":68},[225,388,389],{"class":227,"line":228},[225,390,391],{},"public override void OnActivityCreated(Bundle savedInstanceState)\n",[225,393,394],{"class":227,"line":69},[225,395,236],{},[225,397,398],{"class":227,"line":239},[225,399,400],{},"    base.OnActivityCreated(savedInstanceState);    \n",[225,402,403],{"class":227,"line":245},[225,404,242],{},[225,406,407],{"class":227,"line":251},[225,408,248],{},[225,410,411],{"class":227,"line":257},[225,412,413],{},"    recs[1] = \"my second row\";\n",[225,415,416],{"class":227,"line":263},[225,417,418],{},"    var listView = this.Activity.FindViewById\u003CListView>(Resource.Id.aboutListView);            \n",[225,420,421],{"class":227,"line":269},[225,422,423],{},"    var adapter = new ArrayAdapter\u003Cstring>(_context, Resource.Layout.TextViewItem, recs);\n",[225,425,426],{"class":227,"line":275},[225,427,284],{},[225,429,430],{"class":227,"line":281},[225,431,296],{},[12,433,434],{},"TextViewItem.axml",[12,436,437,438,441,446],{},"\u003CTextView xmlns:android=\"",[55,439],{"href":440},"http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid\"",[55,442,443],{"href":443,"rel":444},"http:\u002F\u002Fschemas.android.com\u002Fapk\u002Fres\u002Fandroid",[445],"nofollow","\"\n    android:id=\"@+id\u002FtextItem\"\n    android:textSize=\"44sp\"\n    android:layout_width=\"fill_parent\"\n    android:layout_height=\"wrap_content\" \u002F>",[448,449,450],"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":68,"searchDepth":69,"depth":69,"links":452},[],"2016-01-31T05:38:21.5000000-05:00",null,{},"\u002Farticles\u002Fxamarin-andorid-listviews-part-1-of-2",{"title":174,"description":454},"articles\u002Fxamarin-andorid-listviews-part-1-of-2",[79],"JuRG_Zcn0MsuFdCH2GNMKvH012bu4uX_lZwaO7XegO4",1781574771226]