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:
- Create two custom layout for your ListView header and list item.
- Create your custom adapter for ListView
- Instantiate ListView in your activity
- The GetMenuItemType method is the IMenuItemsType interface
- The MenuHeaderItem class is inheriting GetMenuItemType. The GetMenuItemType is return 0
- The MenuContentItem class is inheriting GetMenuItemType. The GetMenuItemType is return 1
- The
resources/layout
XML files are added, the ListViewHeaderItem.axml and the ListViewContentItem are containing custom designing
Create an interface in MainActivity.cs. This method returns the number of types.
public interface IMenuItemsType { int GetMenuItemsType(); }
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; } }
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; } }
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