Share via


Xamarin Android: How to create an Android ListView with section header

In this example, we will show how to create a ListView with the section header. This involves following steps:

  1. Create two custom layout for your ListView header and list item.
  2. Create your custom adapter for ListView
  3. Instantiate ListView in your activity
  4. The GetMenuItemType method is the IMenuItemsType interface
  5. The MenuHeaderItem class is inheriting GetMenuItemType. The GetMenuItemType is return 0
  6. The MenuContentItem class is inheriting GetMenuItemType. The GetMenuItemType is return 1
  7. The resources/layout XML files are added, the ListViewHeaderItem.axml and the ListViewContentItem are containing custom designing
  1. Create an interface in MainActivity.cs. This method returns the number of types.

    public interface IMenuItemsType
    {
        int GetMenuItemsType();
    }
    
  2. Create MenuHeaderItem and MenuContentItem

    public class MenuHeaderItem : IMenuItemsType
            {
                public string HeaderText { get; set; }
     
                public int GetMenuItemsType()
                {
                    return TYPE_ITEM;// return 0. It is header
                }
     
                public MenuHeaderItem(string _headerText)
                {
                    HeaderText = _headerText;// return title of header
                }
            }
     
            public class MenuContentItem : IMenuItemsType
            {
                public string Title { get; set; }
                public string SubTitle { get; set; }
                public int IconImage { get; set; }
     
                public int GetMenuItemsType()
                {
                    return TYPE_SEPORATOR;// return 1
                }
     
                public MenuContentItem(string _title, string _subtitle, int _iconImage)
                {
                    Title = _title;
                    SubTitle = _subtitle;
                    IconImage = _iconImage;
                }
            }
    
  3. Create a custom listview with arrayAdapter

    public class ListViewAdapter : ArrayAdapter<IMenuItemsType>
            {
                private Context context;
                private List<IMenuItemsType> items;
                private LayoutInflater inflater;
     
                public ListViewAdapter(Context context, List<IMenuItemsType> items) : base(context,0,items)
                {
                    this.context = context;
                    this.items = items;
                    this.inflater = (LayoutInflater)this.context.GetSystemService(Context.LayoutInflaterService);
                }
     
     
                public override int Count
                {
                    get
                    {
                        //throw new System.NotImplementedException();
                        return items.Count;
                    }
                }
     
                public override long GetItemId(int position)
                {
                    //throw new System.NotImplementedException();
                    return position;
                }
     
                public override View GetView(int position, View convertView, ViewGroup parent)
                {
                    //throw new System.NotImplementedException();
                    View view = convertView;
                    try
                    {
                        IMenuItemsType item = items[position];
                        if (item.GetMenuItemsType() == TYPE_ITEM)
                        {
                            MenuHeaderItem _headerItem = (MenuHeaderItem)item;
                            view = inflater.Inflate(Resource.Layout.ListViewHeaderItem, null);
                            // user dont click header item
                            view.Clickable = false;
     
                            var headerName = view.FindViewById<TextView>(Resource.Id.txtHeader);
                            headerName.Text = _headerItem.HeaderText;
     
                        }
                        else if (item.GetMenuItemsType() == TYPE_SEPORATOR)
                        {
                            MenuContentItem _contentItem = (MenuContentItem)item;
                            view = inflater.Inflate(Resource.Layout.ListViewContentItem, null);
     
                            var _title = view.FindViewById<TextView>(Resource.Id.txtTitle);
                            var _imgIcon = view.FindViewById<ImageView>(Resource.Id.imgIcon);
                            var _subTitle = view.FindViewById<TextView>(Resource.Id.txtSubTitle);
     
                            _title.Text = _contentItem.Title;
                            _imgIcon.SetBackgroundResource(_contentItem.IconImage);
                            _subTitle.Text = _contentItem.SubTitle;
                        }
                    }
                    catch (Exception ex)
                    {
                        Toast.MakeText(context, ex.Message, ToastLength.Long);
                    }
                    return view;
                }
            }
    
  4.  In OnCreate

    public static int TYPE_ITEM = 0;
            public static int TYPE_SEPORATOR=1;
     
            List<IMenuItemsType> item = new List<IMenuItemsType>();
     
            protected override void OnCreate(Bundle savedInstanceState)
            {
                base.OnCreate(savedInstanceState);
     
                // Set our view from the "main" layout resource
                SetContentView(Resource.Layout.Main);
     
                item.Add(new MenuHeaderItem("GENERAL SETTINGS"));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display",Resource.Drawable.Delete15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.DoubleTap15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.Settings15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.ShowProperty15));
                item.Add(new MenuHeaderItem("NOTIFICATIONS"));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.Settings15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.Phone15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.EditUserMale15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.DoubleTap15));
                item.Add(new MenuHeaderItem("GENERAL SETTINGS"));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.Delete15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.DoubleTap15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.Settings15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.ShowProperty15));
                item.Add(new MenuHeaderItem("NOTIFICATIONS"));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.Settings15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.Phone15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.EditUserMale15));
                item.Add(new MenuContentItem("Display Settings", "Settings about screen display", Resource.Drawable.DoubleTap15));
     
                ListView lst = FindViewById<ListView>(Resource.Id.lstview);
                lst.Adapter = new ListViewAdapter(this, item);
                          
            }
    

    Source

    Listview with Sections Header