Create Custom ListView In Xamarin With Visual Studio 2015

Introduction

In Android Application Development, sometimes we need to use ListView, which has content images, as well as List item or ListView with the button. For this, we need to create custom ListView. In this article, I am creating custom ListView, which has both the content images and items.

The steps are given below to create custom ListView.

Step 1

Create new project for an Android Application

I have selected “Blank App(Android)” template for this article.

Step 2

Application layout

I have used two Android layouts to create custom ListView. First is “main.axml” layout, which is contact ListView, and second is “list_single.axml”, whose contents are ListView and ImageView, using “Table Layout” View. AXML code of both layouts is given below.

Main.axml

<?xml version="1.0" encoding="utf-8"?> given
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_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/listView" />
</LinearLayout>

list_single.axml

<?xml version ="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow>
<ImageView
android:id="@+id/img"
android:layout_width="50dp"
android:layout_height="50dp" />
<TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="50dp" />
</TableRow>
</TableLayout>

I have taken 10 items in ListView with its corresponding image, so I have added 10 image files in Resource->drawable folder. It is shown below.

Step 3

Create CustomList BaseAdapter class

To create custom ListView, I have created “CustomList” class, which is extended BaseAdapter base class. BaseAdapter requires GetItem(), GetItemId(), GetView and count methods. GetView() method is used to create view of custom ListView and LayoutInflater is used to manipulate Android screen, using predefined XML layout (Here is list_single.axml). This class is used to instantiate layout XML file into its corresponding View objects. It is never used directly. “CustomList” class has three arguments, which are Activity, List Item and corresponding Imageid. GetItemId() and Count method requires count, which is the length of the string object “listitem”. “CustomList” class code snippet is given below.

CustomList.cs

class CustomList: BaseAdapter
{
private Activity context;
private string[] listitem;
private int[] imageId;
public override int Count {
get {
return listitem.Length;
}
}
public CustomList(Activity context, string[] listitem, int[] imageId) {
this.context = context;
this.listitem = listitem;
this.imageId = imageId;
}
public override Java.Lang.Object GetItem(int position) {
return null;
}
public override long GetItemId(int position) {
return listitem.Length;
}
public override View GetView(int position, ViewconvertView, ViewGroup parent) {
var view = context.LayoutInflater.Inflate(Resource.Layout.list_single, parent, false);
TextView txtTitle = (TextView) view.FindViewById(Resource.Id.txt);
ImageView imageView = (ImageView) view.FindViewById(Resource.Id.img);
txtTitle.Text = (listitem[position]).ToString();
imageView.SetImageResource(imageId[position]);
return view;
}
}

Step 4

Show Custom ListView and ItemClick event

In MainActivity, I have set two arrays, where one string array is for list item (“listitem”) and an image Id (“imageId”). Create an object of “CustomList” class as “adapter” and it is set as Adapter of ListView of main.axml. The code snippet of MainActivity is shown below.

MainActivity.cs

public class MainActivity : Activity
{
ListView list;
string[] listitem = {" C# Corner"," Xamarin"," Google Plus"," Twitter"," Windows"," Bing"," Itunes"," Wordpress"," Drupal"," Whatapp"};
int[] imageId = {
Resource.Drawable.image9,
Resource.Drawable.image10,
Resource.Drawable.image1,
Resource.Drawable.image2,
Resource.Drawable.image3,
Resource.Drawable.image4,
Resource.Drawable.image5,
Resource.Drawable.image6,
Resource.Drawable.image7,
Resource.Drawable.image8
};
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView (Resource.Layout.Main);
CustomList adapter = new CustomList(this,listitem, imageId);
list = (ListView)FindViewById(Resource.Id.listView);
list.Adapter = adapter;
list.ItemClick += List_ItemClick;
}
private void List_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
{
Toast.MakeText(this, "You Clicked at " + listitem[e.Position], ToastLength.Long).Show();
}
}

When the user clicks on List item, it shows a message on the screen “You Clicked at” with listitem. For example, if user clicks on item “C# Corner”, display message comes when you click at C# Corner”. We can see this in an output section of this article.

Output

Summary

In this article, we learned how to create, show custom ListView and how to write Item click event of ListView in Xamarin with Visual Studio 2015.