In Focus

Sectional ListView In Xamarin Android

To create the list view with headers, we are using an interface and enum.

To create your first app in Xamarin.Android, you can refer here.

Introduction 

To create a ListView with headers, we are using an interface and enum.

Step 1 

Open Visual Studio, and go to New Project >> Templates >> Visual C# >> Android, then select Blank App (Android)

Give project a name and choose location.

SharePoint

Step 2

Next, open Solution Explorer >> Project Name >> Resources >> layout, and then select Main.axml. After that, click "Open Design View".

SharePoint  

Step 3

Go to Toolbar, select ListView, drag and drop in Design Page and then change id as android:id="@+id/listView1".

SharePoint


This is the code for List View. 
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <LinearLayout    
  3.     xmlns:android="http://schemas.android.com/apk/res/android"        
  4. android:orientation="vertical"        
  5. android:layout_width="fill_parent"   
  6. android:layout_height="fill_parent"    
  7. android:minWidth="25px"        
  8. android:minHeight="25px">    

  9. <ListView        
  10. android:minWidth="25px"        
  11. android:minHeight="25px"       
  12. android:layout_width="match_parent"        
  13. android:layout_height="match_parent"       
  14. android:id="@+id/listView1" />    
  15. </LinearLayout>    

Step 4

Next, create the Item Template that is to be added in the list view to show the content.

Create MyTemplate.xaml for Item Template.
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  2.     android:orientation="vertical"    
  3.     android:layout_width="match_parent"    
  4.     android:layout_height="wrap_content">    
  5.     <TextView    
  6.         android:layout_width="match_parent"    
  7.         android:layout_height="wrap_content"    
  8.         android:text="Profile support"    
  9.         android:textSize="16dp"      
  10.         android:id="@+id/lbltransparent"    
  11.         android:paddingTop="10dp"    
  12.         android:paddingLeft="10dp"    
  13.         android:paddingRight="10dp" />    
  14. </LinearLayout>    
Step 5

Create an Enum that holds the type of view that's to be created.
 
ViewType.cs
  1. public enum ViewType  
  2.    {  
  3.        Header, List, Button  
  4.    }  

Step 6

Create an interface that has a method. 

IViewItemType .cs 
  1. public interface IViewItemType  
  2.     {  
  3.         ViewType GetViewType();  
  4.     }  

Step 7

Create three classes that inherit the above interface.

SettingsContent.cs 
  1. public class SettingsContent : IViewItemType  
  2. {  
  3.     public int ImageResource, ImageArrow;  
  4.     public string SettingsText;  
  5.   
  6.     public SettingsContent(int imageResource,string text,int imgArrow)  
  7.     {  
  8.         ImageResource = imageResource;  
  9.         ImageArrow = imgArrow;  
  10.         SettingsText = text;  
  11.     }  
  12.     public ViewType GetViewType()  
  13.     {  
  14.         return ViewType.List;  
  15.     }  
  16. }  
 HeaderText.cs 
  1. public class HeaderText : IViewItemType  
  2.     {  
  3.         public string Text;  
  4.   
  5.         public HeaderText(string text)  
  6.         {  
  7.             Text = text;  
  8.         }  
  9.   
  10.         public ViewType GetViewType()  
  11.         {  
  12.             return ViewType.Header;  
  13.         }  
  14.     }  
 SettingsLogOut.cs 
  1. public class SettingsLogOut : IViewItemType  
  2.    {  
  3.        public ViewType GetViewType()  
  4.        {  
  5.            return ViewType.Button;  
  6.        }  
  7.    }  
Step 8

Create an activity that sets the adapter to the list view.
 
ListActivity.cs 
  1. public class MainActivity : AppCompatActivity  
  2.   {  
  3.       public ListView SettingsListView;  
  4.       private List<IViewItemType> settingMenuContents;  
  5.   
  6.       public MainActivity()  
  7.       {  
  8.           settingMenuContents = new List<IViewItemType>();  
  9.           settingMenuContents.Add(new HeaderText("ListView with Sections"));  
  10.           settingMenuContents.Add(new SettingsContent("BLUETOOTHNAME"));  
  11.           settingMenuContents.Add(new SettingsContent("ACTIVITIES"));  
  12.           settingMenuContents.Add(new SettingsContent("DEVICES"));  
  13.           settingMenuContents.Add(new SettingsContent("SECURITY"));             
  14.           settingMenuContents.Add(new HeaderText(string.Empty));  
  15.           settingMenuContents.Add(new SettingsContent("SUPPORT"));             
  16.           settingMenuContents.Add(new SettingsContent("REPORTPROBLEM"));             
  17.           settingMenuContents.Add(new SettingsContent("TERMS"));             
  18.           settingMenuContents.Add(new SettingsContent("ABOUT"));                         
  19.           settingMenuContents.Add(new SettingsLogOut());  
  20.       }  
  21.   
  22.       protected override void OnCreate(Bundle savedInstanceState)  
  23.       {  
  24.           base.OnCreate(savedInstanceState);  
  25.   
  26.           SetContentView(Resource.Layout.activity_main);  
  27.           SettingsListView = FindViewById<ListView>(Resource.Id.sectionalListView);  
  28.           SettingsListView.Adapter = new ListAdapter(this, settingMenuContents);  
  29.           SettingsListView.Clickable = false;  
  30.       }  
  31.   }       
Step 9

Create the adapter for list view in ListAdapter.cs.
  1. public class ListAdapter : BaseAdapter  
  2.    {  
  3.   
  4.        Context context;  
  5.   
  6.        public List<IViewItemType> SettingsItem;  
  7.        private LayoutInflater inflater;  
  8.   
  9.        public ListAdapter(Context context, List<IViewItemType> items)  
  10.        {  
  11.            this.context = context;  
  12.            SettingsItem = items;  
  13.            inflater = (LayoutInflater)this.context.GetSystemService(Context.LayoutInflaterService);  
  14.        }  
  15.   
  16.   
  17.        public override Java.Lang.Object GetItem(int position)  
  18.        {  
  19.            return position;  
  20.        }  
  21.   
  22.        public override long GetItemId(int position)  
  23.        {  
  24.            return position;  
  25.        }  
  26.   
  27.        public override View GetView(int position, View convertView, ViewGroup parent)  
  28.        {  
  29.           View view = convertView;  
  30.            try  
  31.            {  
  32.                IViewItemType viewItem = SettingsItem[position];  
  33.                if (viewItem.GetViewType() == ViewType.Header)  
  34.                {  
  35.                    view = inflater.Inflate(Resource.Layout.SettingsTextView, null);  
  36.                }  
  37.                else if (viewItem.GetViewType() == ViewType.List)  
  38.                {  
  39.                    SettingsContent listViewContent = (SettingsContent)viewItem;  
  40.                    view = inflater.Inflate(Resource.Layout.SettingsRowTemplate, null);  
  41.                 
  42.                    //listview text  
  43.                    view.FindViewById<TextView>(Resource.Id.lblSettingsText).Text = listViewContent.SettingsText;  
  44.                   
  45.                }  
  46.                else if (viewItem.GetViewType() == ViewType.Button)  
  47.                {  
  48.                    //var gradient = (SettingsLogOut)item;  
  49.                    view = inflater.Inflate(Resource.Layout.LogOutButton, null);  
  50.                }  
  51.            }  
  52.            catch  
  53.            {  
  54.            }  
  55.   
  56.            return view;  
  57.        }  
  58.   
  59.        //Fill in cound here, currently 0  
  60.        public override int Count  
  61.        {  
  62.            get  
  63.            {  
  64.                return SettingsItem.Count;  
  65.            }  
  66.        }  
  67.   
  68.    }  
That's all. Just run the app and you will see an output as below.
 
SharePoint  
 
For reference, I have attached the zip file.
 
Hope you enjoy Xamarin.Android.