Post
Ask Question

Xamarin.Android Custom Tab And ListView Using C# - Part Five

Introduction
 
Xamarin.Android shows how the ListViews can be added to every tab control. For more details, visit my Xamarin.Android related articles.
  
Description
 
In this module, I have added some tabs and put some listviews on every tab page. Then, I set the icon of the app manually that makes it easy to identify the proper implementation of the app.
 
Download Source Code
Steps to be followed
 
Step 1
 
Add an icon file of Android app by putting the png file as "Icon.png" .
 
Step 2
 
Use this code of Main.axml.
  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:minWidth="25px"  
  7.     android:id="@+id/linearlayout2"  
  8.     android:minHeight="25px">  
  9.     <TextView  
  10.         android:text="Main Text"  
  11.         android:textAppearance="?android:attr/textAppearanceMedium"  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="wrap_content"  
  14.         android:id="@+id/textView1"  
  15.         android:gravity="center" />  
  16.     <ListView  
  17.         android:minWidth="25px"  
  18.         android:minHeight="25px"  
  19.         android:layout_width="match_parent"  
  20.         android:layout_height="match_parent"  
  21.         android:id="@+id/listview" />  
  22. </LinearLayout> 
Code Description
 
I have added one textview and one listview control . That will work based on the selection of tab.
 
Step 3
 
Use this code for MainActivity.cs.
  1. using System;  
  2. using Android.App;  
  3. using Android.Content;  
  4. using Android.Runtime;  
  5. using Android.Views;  
  6. using Android.Widget;  
  7. using Android.OS;  
  8. using Android.Graphics;  
  9. using System.Collections.Generic;  
  10.   
  11. namespace SatyapraashTabs  
  12. {  
  13.     [Activity(Label = "SatyapraashTabs", MainLauncher = true, Icon = "@drawable/icon")]  
  14.     public class MainActivity : Activity  
  15.     {  
  16.         private TextView textView;  
  17.   
  18.         private ListView listnames1;  
  19.         private ListView listnames2;  
  20.         private ListView listnames3;  
  21.         private ListView listnames4;  
  22.   
  23.         private List<string> itemlist1;  
  24.         private List<string> itemlist2;  
  25.         private List<string> itemlist3;  
  26.         private List<string> itemlist4;  
  27.         protected override void OnCreate(Bundle bundle)  
  28.         {  
  29.             base.OnCreate(bundle);  
  30.             SetContentView(Resource.Layout.Main);  
  31.             textView = FindViewById<TextView>(Resource.Id.textView1);  
  32.   
  33.             ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;  
  34.   
  35.             // Add the tabs to Action Bar    
  36.             AddTab(Resource.Drawable.article, "Article");  
  37.             AddTab(Resource.Drawable.blog, "Blog");  
  38.             AddTab(Resource.Drawable.news, "News");  
  39.             AddTab(Resource.Drawable.award, "Awards");  
  40.   
  41.         }  
  42.   
  43.         private void AddTab(int tabimg, string tabText)  
  44.         {  
  45.             ActionBar.Tab tab = ActionBar.NewTab();  
  46.             tab.SetText(tabText);  
  47.             tab.SetIcon(tabimg); //This is for icon file.  
  48.             tab.TabSelected += OnTabSelected;  
  49.             ActionBar.AddTab(tab);  
  50.         }  
  51.         private void OnTabSelected(object sender, ActionBar.TabEventArgs args)  
  52.         {  
  53.             var CurrentTab = (ActionBar.Tab)sender;  
  54.   
  55.             if (CurrentTab.Position == 0)  
  56.             {  
  57.                // var textView = FindViewById<TextView>(Resource.Id.textView1);  
  58.                 textView.Text = "Article Tab Selected";  
  59.                 textView.SetBackgroundColor(Color.Red);  
  60.                 listnames1 = FindViewById<ListView>(Resource.Id.listview);  
  61.                 //listnames.SetBackgroundColor(Color.MidnightBlue);  
  62.   
  63.                 LinearLayout mainLayout = FindViewById<LinearLayout>(Resource.Id.linearlayout2);  
  64.                 mainLayout.SetBackgroundColor(Color.RoyalBlue);  
  65.   
  66.                 itemlist1 = new List<string>();  
  67.                 itemlist1.Add("Create App Using Xamarin.Android Using C# - Part Four");  
  68.                 itemlist1.Add("Introduction To SQL Operations Studio And Connecting It With SQL Server");  
  69.                 itemlist1.Add("Client Side Routing Using Angular In MVC");  
  70.                 itemlist1.Add("Partial View In ASP.NET MVC Using Entity Framework");  
  71.                 ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist1);  
  72.                 listnames1.Adapter = adapter;  
  73.                 listnames1.ItemClick += Listnames1_ItemClick;  
  74.   
  75.             }  
  76.             else if (CurrentTab.Position == 1)  
  77.             {  
  78.                 //var textView = FindViewById<TextView>(Resource.Id.textView1);  
  79.                 textView.Text = "Blog Tab Selected";  
  80.                 textView.SetBackgroundColor(Color.OrangeRed);  
  81.                 listnames2 = FindViewById<ListView>(Resource.Id.listview);  
  82.                 LinearLayout mainLayout = FindViewById<LinearLayout>(Resource.Id.linearlayout2);  
  83.                 mainLayout.SetBackgroundColor(Color.Blue);  
  84.                 itemlist2 = new List<string>();  
  85.                 itemlist2.Add("Boost Your Career Through C# Corner");  
  86.                 itemlist2.Add("Google Map GPS Locator Using MVC And BootBox - Part Thirteen");  
  87.                 itemlist2.Add("Google Maps- Route Direction Information Between Source And Destination");  
  88.                 itemlist2.Add("Google Maps Travelling Mode Using Bootstrap In ASP.NET MVC - PART Seven");  
  89.                 ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist2);  
  90.                 listnames2.Adapter = adapter;  
  91.                 listnames2.ItemClick += Listnames2_ItemClick;  
  92.                  
  93.   
  94.             }  
  95.             else if (CurrentTab.Position == 2)  
  96.             {  
  97.                 var textView = FindViewById<TextView>(Resource.Id.textView1);  
  98.                 textView.Text = "News Tab Selected";  
  99.                 textView.SetBackgroundColor(Color.RoyalBlue);  
  100.                 listnames3 = FindViewById<ListView>(Resource.Id.listview);  
  101.                 LinearLayout mainLayout = FindViewById<LinearLayout>(Resource.Id.linearlayout2);  
  102.                 mainLayout.SetBackgroundColor(Color.Orchid);  
  103.                 itemlist3 = new List<string>();  
  104.                 itemlist3.Add("C# Corner Android App v0.5.7 Released");  
  105.                 itemlist3.Add("Google Releases ARCore Developer Preview 2");  
  106.                 itemlist3.Add("Artificial Intelligence Microsoft Launches AI Platform And AI School Silently");  
  107.                 itemlist3.Add("Amazon Launches A New Test Simulator (Beta) for Alexa Skills");  
  108.                 ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist3);  
  109.                 listnames3.Adapter = adapter;  
  110.                 listnames3.ItemClick += Listnames3_ItemClick;  
  111.             }  
  112.             else if (CurrentTab.Position == 3)  
  113.             {  
  114.                 var textView = FindViewById<TextView>(Resource.Id.textView1);  
  115.                 textView.Text = "Awards Tab Selected";  
  116.                 textView.SetBackgroundColor(Color.Blue);  
  117.                 listnames4 = FindViewById<ListView>(Resource.Id.listview);  
  118.                 LinearLayout mainLayout = FindViewById<LinearLayout>(Resource.Id.linearlayout2);  
  119.                 mainLayout.SetBackgroundColor(Color.Olive);  
  120.                 itemlist4 = new List<string>();  
  121.                 itemlist4.Add("The Month of April 2017 Winners Announced");  
  122.                 itemlist4.Add("2017 First Half of the Year MVPs Announced ");  
  123.                 itemlist4.Add("Microsoft Announces New AI MVP Award Category");  
  124.                 itemlist4.Add("Xamarin MVPs Join Microsoft MVP Program");  
  125.                 ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist4);  
  126.                 listnames4.Adapter = adapter;  
  127.                 listnames4.ItemClick += Listnames4_ItemClick;  
  128.             }  
  129.         }  
  130.         private void Listnames1_ItemClick(object sender, AdapterView.ItemClickEventArgs e)  
  131.         {  
  132.             Toast.MakeText(this, e.Position.ToString(), ToastLength.Long).Show();  
  133.             Toast.MakeText(this, "You Clicked Article at " + itemlist1[e.Position], ToastLength.Long).Show();  
  134.         }  
  135.         private void Listnames2_ItemClick(object sender, AdapterView.ItemClickEventArgs e)  
  136.         {  
  137.             Toast.MakeText(this, e.Position.ToString(), ToastLength.Long).Show();  
  138.             Toast.MakeText(this, "You Clicked Blog at " + itemlist2[e.Position], ToastLength.Long).Show();  
  139.         }  
  140.         private void Listnames3_ItemClick(object sender, AdapterView.ItemClickEventArgs e)  
  141.         {  
  142.             Toast.MakeText(this, e.Position.ToString(), ToastLength.Long).Show();  
  143.             Toast.MakeText(this, "You Clicked News at " + itemlist3[e.Position], ToastLength.Long).Show();  
  144.         }  
  145.         private void Listnames4_ItemClick(object sender, AdapterView.ItemClickEventArgs e)  
  146.         {  
  147.             Toast.MakeText(this, e.Position.ToString(), ToastLength.Long).Show();  
  148.             Toast.MakeText(this, "You Clicked Awards at " + itemlist4[e.Position], ToastLength.Long).Show();  
  149.         }  
  150.     }  
  151. } 
Code Description
 
For setting the image icon and text, add the code snippet as below.
  1. protected override void OnCreate(Bundle bundle)  
  2.         {  
  3.             base.OnCreate(bundle);  
  4.             SetContentView(Resource.Layout.Main);  
  5.            textView = FindViewById<TextView>(Resource.Id.textView1);  
  6.   
  7.             ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;  
  8.   
  9.             // Add the tabs to Action Bar    
  10.             AddTab(Resource.Drawable.article, "Article");  
  11.             AddTab(Resource.Drawable.blog, "Blog");  
  12.             AddTab(Resource.Drawable.news, "News");  
  13.             AddTab(Resource.Drawable.award, "Awards");  
  14.               
  15.         }  
  16.   
  17.         private void AddTab(int tabimg, string tabText)  
  18.         {  
  19.             ActionBar.Tab tab = ActionBar.NewTab();  
  20.             tab.SetText(tabText);  
  21.             tab.SetIcon(tabimg); //This is for icon file.  
  22.             tab.TabSelected += OnTabSelected;  
  23.             ActionBar.AddTab(tab);  
  24.         } 
For setting only image icon, add the code snippet given below.
  1. protected override void OnCreate(Bundle bundle)  
  2.         {  
  3.             base.OnCreate(bundle);  
  4.             SetContentView(Resource.Layout.Main);  
  5.            textView = FindViewById<TextView>(Resource.Id.textView1);  
  6.   
  7.             ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;  
  8.   
  9.             // Add the tabs to Action Bar    
  10.             AddTab(Resource.Drawable.article);  
  11.             AddTab(Resource.Drawable.blog);  
  12.             AddTab(Resource.Drawable.news);  
  13.             AddTab(Resource.Drawable.award);  
  14.               
  15.         }  
  16.   
  17.         private void AddTab(int tabimg)  
  18.         {  
  19.             ActionBar.Tab tab = ActionBar.NewTab();  
  20.               
  21.             tab.SetIcon(tabimg); //This is for icon file.  
  22.             tab.TabSelected += OnTabSelected;  
  23.             ActionBar.AddTab(tab);  
  24.         } 
For setting the text only for tab, use this code.
  1. protected override void OnCreate(Bundle bundle)  
  2.         {  
  3.             base.OnCreate(bundle);  
  4.             SetContentView(Resource.Layout.Main);  
  5.             textView = FindViewById<TextView>(Resource.Id.textView1);  
  6.   
  7.             ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;  
  8.   
  9.             // Add the tabs to Action Bar    
  10.             AddTab("Article");  
  11.             AddTab("Blog");  
  12.             AddTab("News");  
  13.             AddTab("Awards");  
  14.   
  15.         }  
  16.   
  17.         private void AddTab(string tabText)  
  18.         {  
  19.             ActionBar.Tab tab = ActionBar.NewTab();  
  20.             tab.SetText(tabText);  
  21.             tab.TabSelected += OnTabSelected;  
  22.             ActionBar.AddTab(tab);  
  23.         }  
First, I declared some variables using which we can access the value of control assigned to it.
  1. private TextView textView;  
  2.   
  3.         private ListView listnames1;  
  4.         private ListView listnames2;  
  5.         private ListView listnames3;  
  6.         private ListView listnames4;  
  7.   
  8.         private List<string> itemlist1;  
  9.         private List<string> itemlist2;  
  10.         private List<string> itemlist3;  
  11.         private List<string> itemlist4; 
Then, in OnCreate() method, I added the tabs to Action Bar.
  1. ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;  
  2.   
  3.            // Add the tabs to Action Bar    
  4.            AddTab("Article");  
  5.            AddTab("Blog");  
  6.            AddTab("News");  
  7.            AddTab("Awards"); 
Set the activity content from the layout resource.
  1. SetContentView(Resource.Layout.Main); 
  1. base.OnCreate(bundle); 
This method will be called when the activity is started.
  1. textView = FindViewById<TextView>(Resource.Id.textView1); 
This textview will take the value of textview1 control id of TextView control class using FindViewById<TextView>.
  1. ActionBar.NavigationMode = ActionBarNavigationMode.Tabs; 
We can set the navigation mode on action bar.
  • Standard
  • Lists
  • Tabs
  1. private void AddTab(string tabText)  
  2.         {  
  3.             ActionBar.Tab tab = ActionBar.NewTab();  
  4.             tab.SetText(tabText);  
  5.             tab.TabSelected += OnTabSelected;  
  6.             ActionBar.AddTab(tab);  
  7.         } 
 Here, I added the AddTab() method to add the tab text names as well as OnTabSelected event will be fired as per the selection of tabs.
  1. private void OnTabSelected(object sender, ActionBar.TabEventArgs args)  
  2.         {  
  3.             var CurrentTab = (ActionBar.Tab)sender;  
  4.   
  5.             if (CurrentTab.Position == 0)  
  6.             {  
  7.                // var textView = FindViewById<TextView>(Resource.Id.textView1);  
  8.                 textView.Text = "Article Tab Selected";  
  9.                 textView.SetBackgroundColor(Color.Red);  
  10.                 listnames1 = FindViewById<ListView>(Resource.Id.listview);  
  11.                 //listnames.SetBackgroundColor(Color.MidnightBlue);  
  12.   
  13.                 LinearLayout mainLayout = FindViewById<LinearLayout>(Resource.Id.linearlayout2);  
  14.                 mainLayout.SetBackgroundColor(Color.RoyalBlue);  
  15.   
  16.                 itemlist1 = new List<string>();  
  17.                 itemlist1.Add("Create App Using Xamarin.Android Using C# - Part Four");  
  18.                 itemlist1.Add("Introduction To SQL Operations Studio And Connecting It With SQL Server");  
  19.                 itemlist1.Add("Client Side Routing Using Angular In MVC");  
  20.                 itemlist1.Add("Partial View In ASP.NET MVC Using Entity Framework");  
  21.                 ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist1);  
  22.                 listnames1.Adapter = adapter;  
  23.                 listnames1.ItemClick += Listnames1_ItemClick;  
  24.   
  25.             }  
  26.             else if (CurrentTab.Position == 1)  
  27.             {  
  28.                 //var textView = FindViewById<TextView>(Resource.Id.textView1);  
  29.                 textView.Text = "Blog Tab Selected";  
  30.                 textView.SetBackgroundColor(Color.OrangeRed);  
  31.                 listnames2 = FindViewById<ListView>(Resource.Id.listview);  
  32.                 LinearLayout mainLayout = FindViewById<LinearLayout>(Resource.Id.linearlayout2);  
  33.                 mainLayout.SetBackgroundColor(Color.Blue);  
  34.                 itemlist2 = new List<string>();  
  35.                 itemlist2.Add("Boost Your Career Through C# Corner");  
  36.                 itemlist2.Add("Google Map GPS Locator Using MVC And BootBox - Part Thirteen");  
  37.                 itemlist2.Add("Google Maps- Route Direction Information Between Source And Destination");  
  38.                 itemlist2.Add("Google Maps Travelling Mode Using Bootstrap In ASP.NET MVC - PART Seven");  
  39.                 ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist2);  
  40.                 listnames2.Adapter = adapter;  
  41.                 listnames2.ItemClick += Listnames2_ItemClick;  
  42.                  
  43.   
  44.             }  
  45.             else if (CurrentTab.Position == 2)  
  46.             {  
  47.                 var textView = FindViewById<TextView>(Resource.Id.textView1);  
  48.                 textView.Text = "News Tab Selected";  
  49.                 textView.SetBackgroundColor(Color.RoyalBlue);  
  50.                 listnames3 = FindViewById<ListView>(Resource.Id.listview);  
  51.                 LinearLayout mainLayout = FindViewById<LinearLayout>(Resource.Id.linearlayout2);  
  52.                 mainLayout.SetBackgroundColor(Color.Orchid);  
  53.                 itemlist3 = new List<string>();  
  54.                 itemlist3.Add("C# Corner Android App v0.5.7 Released");  
  55.                 itemlist3.Add("Google Releases ARCore Developer Preview 2");  
  56.                 itemlist3.Add("Artificial Intelligence Microsoft Launches AI Platform And AI School Silently");  
  57.                 itemlist3.Add("Amazon Launches A New Test Simulator (Beta) for Alexa Skills");  
  58.                 ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist3);  
  59.                 listnames3.Adapter = adapter;  
  60.                 listnames3.ItemClick += Listnames3_ItemClick;  
  61.             }  
  62.             else if (CurrentTab.Position == 3)  
  63.             {  
  64.                 var textView = FindViewById<TextView>(Resource.Id.textView1);  
  65.                 textView.Text = "Awards Tab Selected";  
  66.                 textView.SetBackgroundColor(Color.Blue);  
  67.                 listnames4 = FindViewById<ListView>(Resource.Id.listview);  
  68.                 LinearLayout mainLayout = FindViewById<LinearLayout>(Resource.Id.linearlayout2);  
  69.                 mainLayout.SetBackgroundColor(Color.Olive);  
  70.                 itemlist4 = new List<string>();  
  71.                 itemlist4.Add("The Month of April 2017 Winners Announced");  
  72.                 itemlist4.Add("2017 First Half of the Year MVPs Announced ");  
  73.                 itemlist4.Add("Microsoft Announces New AI MVP Award Category");  
  74.                 itemlist4.Add("Xamarin MVPs Join Microsoft MVP Program");  
  75.                 ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist4);  
  76.                 listnames4.Adapter = adapter;  
  77.                 listnames4.ItemClick += Listnames4_ItemClick;  
  78.             }  
  79.         }  
  80.         private void Listnames1_ItemClick(object sender, AdapterView.ItemClickEventArgs e)  
  81.         {  
  82.             Toast.MakeText(this, e.Position.ToString(), ToastLength.Long).Show();  
  83.             Toast.MakeText(this, "You Clicked Article at " + itemlist1[e.Position], ToastLength.Long).Show();  
  84.         }  
  85.         private void Listnames2_ItemClick(object sender, AdapterView.ItemClickEventArgs e)  
  86.         {  
  87.             Toast.MakeText(this, e.Position.ToString(), ToastLength.Long).Show();  
  88.             Toast.MakeText(this, "You Clicked Blog at " + itemlist2[e.Position], ToastLength.Long).Show();  
  89.         }  
  90.         private void Listnames3_ItemClick(object sender, AdapterView.ItemClickEventArgs e)  
  91.         {  
  92.             Toast.MakeText(this, e.Position.ToString(), ToastLength.Long).Show();  
  93.             Toast.MakeText(this, "You Clicked News at " + itemlist3[e.Position], ToastLength.Long).Show();  
  94.         }  
  95.         private void Listnames4_ItemClick(object sender, AdapterView.ItemClickEventArgs e)  
  96.         {  
  97.             Toast.MakeText(this, e.Position.ToString(), ToastLength.Long).Show();  
  98.             Toast.MakeText(this, "You Clicked Awards at " + itemlist4[e.Position], ToastLength.Long).Show();  
  99.         } 
In the OnTabSelected event, I assigned the properties of textview text name as well as color. These will be changed as per the selection of tabs and different listview names will be shown. On the selection of listview, it will show the position of listview in array as well as it shows the text or name of listview as per selection of user. By default, the start position of listview in tabbed page will start from 0.
 
Here, I declared one local variable. Based on the selection of tab in ActionBar, the value will be assigned to this local variable.
  1. var CurrentTab = (ActionBar.Tab)sender; 
 If I select the first tab, then the below code will be executed.
  1. if (CurrentTab.Position == 0)  
  2.             {  
  3.                // var textView = FindViewById<TextView>(Resource.Id.textView1);  
  4.                 textView.Text = "Article Tab Selected";  
  5.                 textView.SetBackgroundColor(Color.Red);  
  6.                 listnames1 = FindViewById<ListView>(Resource.Id.listview);  
  7.                 //listnames.SetBackgroundColor(Color.MidnightBlue);  
  8.   
  9.                 LinearLayout mainLayout = FindViewById<LinearLayout>(Resource.Id.linearlayout2);  
  10.                 mainLayout.SetBackgroundColor(Color.RoyalBlue);  
  11.   
  12.                 itemlist1 = new List<string>();  
  13.                 itemlist1.Add("Create App Using Xamarin.Android Using C# - Part Four");  
  14.                 itemlist1.Add("Introduction To SQL Operations Studio And Connecting It With SQL Server");  
  15.                 itemlist1.Add("Client Side Routing Using Angular In MVC");  
  16.                 itemlist1.Add("Partial View In ASP.NET MVC Using Entity Framework");  
  17.                 ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist1);  
  18.                 listnames1.Adapter = adapter;  
  19.                 listnames1.ItemClick += Listnames1_ItemClick;  
  20.   
  21.             } 
 I assigned the listname click event of listview for the first tab.
  1. private void Listnames1_ItemClick(object sender, AdapterView.ItemClickEventArgs e)  
  2.        {  
  3.            Toast.MakeText(this, e.Position.ToString(), ToastLength.Long).Show();  
  4.            Toast.MakeText(this, "You Clicked Article at " + itemlist1[e.Position], ToastLength.Long).Show();  
  5.        } 
Then, it will show the position of listname of listview as well as the listname text value.
 
Like this, we can add other tabs' functionaity.
 
ActionBar
 
The Action Bar includes support for adding tabbed interfaces in Android 4.0. The following screenshot shows an example of such an interface.To create tabs in the Action Bar, we first need to set its NavigationMode property to support tabs. In Android 4, an ActionBar property is available on the Activity class, which we can use to set the NavigationMode .
  1. ActionBar.NavigationMode = ActionBarNavigationMode.Tabs; 
Once this is done, we can create a tab by calling the NewTab method on the Action Bar. With this tab instance, we can call the SetText and SetIcon methods to set the tab's label text and icon.
  1. ActionBar.Tab tab = ActionBar.NewTab();  
  2.            tab.SetText(tabText);  
  3.            tab.SetIcon(Resource.Drawable.Icon); //This is for icon file.  
  4.            tab.TabSelected += OnTabSelected;  
  5.            ActionBar.AddTab(tab); 
Before we can add the tab however, we need to handle the TabSelected event. In this handler, we can create the content for the tab. Action Bar tabs are designed to work with Fragments, which are classes that represent a portion of the user interface in an Activity.
 
ActionBar Tabs
 
The action bar is an Android UI pattern that is used to provide a consistent user interface for key features such as tabs, application identity, menus, and search. In Android 3.0 (API level 11), Google introduced the ActionBar APIs to the Android platform. The ActionBar APIs introduce UI themes to provide a consistent look and feel and classes that allow for tabbed user interfaces. This guide discusses how to add Action Bar tabs to a Xamarin.Android application. It also discusses how to use the Android Support Library v7 to backport ActionBar tabs to Xamarin.Android applications targeting Android 2.1 to Android 2.3.  
 
The action bar tries to display all of its tabs concurrently and make all the tabs equal in size based on the width of the widest tab label.

Each tab in the action bar should be associated with a fragment. When the user selects a tab, the application will display the fragment that is associated with the tab. The ActionBar is not responsible for displaying the appropriate fragment to the user. Instead, the ActionBar will notify an application about state changes in a tab through a class that implements the ActionBar.ITabListener interface. This interface provides three callback methods that Android will invoke when the state of the tab changes,

  • OnTabSelected 
    This method is called when the user selects the tab. It should display the fragment.

  • OnTabReselected
    This method is called when the tab is already selected but is selected again by the user. This callback is typically used to refresh/update the displayed fragment.

  • OnTabUnselected
    This method is called when the user selects another tab. This callback is used to save the state in the displayed fragment before it disappears.

Xamarin.Android wraps the ActionBar.ITabListener with events on the ActionBar.Tab class. Applications may assign event handlers to one or more of these events. There are three events (one for each method in ActionBar.ITabListener) that an action bar tab will raise,

  • TabSelected
  • TabReselected
  • TabUnselected
The ActionBar is native to Android 3.0 (API level 11) and higher and is available to any Xamarin.Android application that targets this API as a minimum.
 
In the OnCreate method of an Activity – before initializing any UI widgets – an application must set the NavigationMode on the ActionBar to ActionBar.NavigationModeTabs

Create a new tab using ActionBar.NewTab().Assign event handlers or provide a custom ActionBar.ITabListener implementation that will respond to the events that are raised when the user interacts with the ActionBar tabs.Add the tab that was created in the previous step to the ActionBar.

Event Handlers and ActionBar.ITabListener

Applications should use event handlers and ActionBar.ITabListener for different scenarios. Event handlers do offer a certain amount of syntactic convenience; they save you from having to create a class and implement ActionBar.ITabListener. This convenience does come at a cost – Xamarin.Android performs this transformation for you, creating one class and implementing ActionBar.ITabListener for you. This is fine when an application has a limited number of tabs.

When dealing with many tabs, or sharing common functionality between ActionBar tabs, it can be more efficient in terms of memory and performance to create a custom class that implements ActionBar.ITabListener, and sharing a single instance of the class. This will reduce the number of GREF's that a Xamarin.Android application is using.

Overview
 
A tabbed user interface in a Xamarin.Android using the ActionBar. We covered how to add tabs to the ActionBar and  an Activity can interact with tab events via the ActionBar.ITabListener interface. We also saw how the Android Support Library v7 AppCompat component backports the ActionBar tabs to older versions of Android.  
 
ListView

A ListView consists of the following parts,

  • Rows – The visible representation of the data in the list.

  • Adapter – A non-visual class that binds the data source to the list view.

  • Fast Scrolling – A handle that lets the user scroll the length of the list.

  • Section Index – A user interface element that floats over the scrolling rows to indicate where in the list the current rows are located.  The primary classes used to display ListViews are shown here:

  • ListView – user interface element that displays a scrollable collection of rows. On phones it usually uses up the entire screen (in which case, the ListActivity class can be used) or it could be part of a larger layout on phones or tablet devices.

  • View – a View in Android can be any user interface element, but in the context of a ListView it requires a View to be supplied for each row.

  • BaseAdapter – Base class for Adapter implementations to bind a ListView to a data source.

  • ArrayAdapter – Built-in Adapter class that binds an array of strings to a ListView for display. The generic ArrayAdapter<T> does the same for other types.

  • CursorAdapter – Use CursorAdapter or SimpleCursorAdapter to display data based on an SQLite query.

To add rows to a ListView you need to add it to your layout and implement an IListAdapter with methods that the ListView calls to populate itself. Android includes built-in ListActivity and ArrayAdapter classes that you can use without defining any custom layout XML or code. The ListActivity class automatically creates a ListView and exposes a ListAdapter property to supply the row views to display via an adapter.The built-in adapters take a view resource ID as a parameter that gets used for each row. 

To respond to user touches there needs to be one more method implemented in the ListActivity – OnListItemClick – like this.

ArrayAdapter<string> is great because of its simplicity, but it's extremely limited. However, often times you have a collection of business entities, rather than just strings that you want to bind. For example, if your data consists of a collection of Employee classes, then you might want the list to just display the names of each employee. To customize the behavior of a ListView to control what data is displayed you must implement a subclass of BaseAdapter overriding the following four items,

  • Count – To tell the control how many rows are in the data.

  • GetView – To return a View for each row, populated with data. This method has a parameter for the ListView to pass in an existing, unused row for re-use.

  • GetItemId – Return a row identifier (typically the row number, although it can be any long value that you like).

  • this[int] indexer – To return the data associated with a particular row number.

Using the custom adapter is similar to the built-in ArrayAdapter, passing in a context and the string[] of values to display.Fast Scrolling helps the user to scroll through long lists by providing an additional 'handle' that acts as a scroll bar to directly access a part of the list.Causing the fast scrolling handle to appear is as simple as setting the FastScrollEnabled property to true,
  1. ListView.FastScrollEnabled = true; 
A section index provides additional feedback for users when they are fast-scrolling through a long list – it shows which 'section' they have scrolled to. To cause the section index to appear the Adapter subclass must implement the ISectionIndexer interface to supply the index text depending on the rows being displayed.

To implement ISectionIndexer you need to add three methods to an adapter,

  • GetSections – Provides the complete list of section index titles that could be displayed. This method requires an array of Java Objects so the code needs to create a Java.Lang.Object[] from a .NET collection. In our example it returns a list of the initial characters in the list as Java.Lang.String .

  • GetPositionForSection – Returns the first row position for a given section index.

  • GetSectionForPosition – Returns the section index to be displayed for a given row.

OUTPUT
 
Both Icon and text for Tab
 
 
Only Icon For Tab
 
 
 
Only Text For Tab
 
 
 
Setting of Icon of Android App
 
 
 
Gif image for better understanding including both icon and text....
 
 
SUMMARY
  • What is actionbar.
  • What is actionbar tabs.
  • How to set image and text in tab.
  • Listview functionality in individual tabbed page.

<<Click here for previous part


Similar Articles