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.

Step 2

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

 

Step 3

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

This is the code for List View. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">

<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/listView1" />
</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.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Profile support"
        android:textSize="16dp"
        android:id="@+id/lbltransparent"
        android:paddingTop="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp" />
</LinearLayout>

Step 5

Create an Enum that holds the type of view that's to be created.

 

ViewType.cs

public enum ViewType
   {
       Header, List, Button
   }

Step 6

Create an interface that has a method. 

IViewItemType .cs 

public interface IViewItemType
    {
        ViewType GetViewType();
    }

Step 7

Create three classes that inherit the above interface.

SettingsContent.cs 

public class SettingsContent : IViewItemType
{
    public int ImageResource, ImageArrow;
    public string SettingsText;

    public SettingsContent(int imageResource,string text,int imgArrow)
    {
        ImageResource = imageResource;
        ImageArrow = imgArrow;
        SettingsText = text;
    }
    public ViewType GetViewType()
    {
        return ViewType.List;
    }
}

 HeaderText.cs 

public class HeaderText : IViewItemType
    {
        public string Text;

        public HeaderText(string text)
        {
            Text = text;
        }

        public ViewType GetViewType()
        {
            return ViewType.Header;
        }
    }

 SettingsLogOut.cs 

public class SettingsLogOut : IViewItemType
   {
       public ViewType GetViewType()
       {
           return ViewType.Button;
       }
   }

Step 8

Create an activity that sets the adapter to the list view.

 

ListActivity.cs 

public class MainActivity : AppCompatActivity
  {
      public ListView SettingsListView;
      private List<IViewItemType> settingMenuContents;

      public MainActivity()
      {
          settingMenuContents = new List<IViewItemType>();
          settingMenuContents.Add(new HeaderText("ListView with Sections"));
          settingMenuContents.Add(new SettingsContent("BLUETOOTHNAME"));
          settingMenuContents.Add(new SettingsContent("ACTIVITIES"));
          settingMenuContents.Add(new SettingsContent("DEVICES"));
          settingMenuContents.Add(new SettingsContent("SECURITY"));
          settingMenuContents.Add(new HeaderText(string.Empty));
          settingMenuContents.Add(new SettingsContent("SUPPORT"));
          settingMenuContents.Add(new SettingsContent("REPORTPROBLEM"));
          settingMenuContents.Add(new SettingsContent("TERMS"));
          settingMenuContents.Add(new SettingsContent("ABOUT"));
          settingMenuContents.Add(new SettingsLogOut());
      }

      protected override void OnCreate(Bundle savedInstanceState)
      {
          base.OnCreate(savedInstanceState);

          SetContentView(Resource.Layout.activity_main);
          SettingsListView = FindViewById<ListView>(Resource.Id.sectionalListView);
          SettingsListView.Adapter = new ListAdapter(this, settingMenuContents);
          SettingsListView.Clickable = false;
      }
  }

Step 9

Create the adapter for list view in ListAdapter.cs.

public class ListAdapter : BaseAdapter
   {

       Context context;

       public List<IViewItemType> SettingsItem;
       private LayoutInflater inflater;

       public ListAdapter(Context context, List<IViewItemType> items)
       {
           this.context = context;
           SettingsItem = items;
           inflater = (LayoutInflater)this.context.GetSystemService(Context.LayoutInflaterService);
       }


       public override Java.Lang.Object GetItem(int position)
       {
           return position;
       }

       public override long GetItemId(int position)
       {
           return position;
       }

       public override View GetView(int position, View convertView, ViewGroup parent)
       {
          View view = convertView;
           try
           {
               IViewItemType viewItem = SettingsItem[position];
               if (viewItem.GetViewType() == ViewType.Header)
               {
                   view = inflater.Inflate(Resource.Layout.SettingsTextView, null);
               }
               else if (viewItem.GetViewType() == ViewType.List)
               {
                   SettingsContent listViewContent = (SettingsContent)viewItem;
                   view = inflater.Inflate(Resource.Layout.SettingsRowTemplate, null);

                   //listview text
                   view.FindViewById<TextView>(Resource.Id.lblSettingsText).Text = listViewContent.SettingsText;

               }
               else if (viewItem.GetViewType() == ViewType.Button)
               {
                   //var gradient = (SettingsLogOut)item;
                   view = inflater.Inflate(Resource.Layout.LogOutButton, null);
               }
           }
           catch
           {
           }

           return view;
       }

       //Fill in cound here, currently 0
       public override int Count
       {
           get
           {
               return SettingsItem.Count;
           }
       }

   }

That's all. Just run the app and you will see an output as below.

 

 

 

For reference, I have attached the zip file.

 

Hope you enjoy Xamarin.Android.