Creating Custom ListView In Xamarin Android App

Introduction

In this article, we are going to learn about how to create a custom ListView in Xamarin Android app.

Solution

Here are the steps to add tabs in an Android app.

Step 1

Create/ open your Android solution in Visual Studio or Xamarin Studio.

Step 2

Create the ListView inside your AXML file, as shown below.

(File Name: main.axml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fastScrollEnabled="true" />
</LinearLayout>

Step 3: Initialize ListView in MainActivity, as shown below.

(File Name: MainActivity.cs)

public class MainActivity : Activity
{
//Intialize ListView
ListView myList;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
myList = FindViewById<ListView>(Resource.Id.listView);
}
}

Step 4

Now, create the row for the ListView cell to show the details of the user as Name, Image and Department.

(FileName: userRow.axml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px"
android:paddingBottom="4dp">
<ImageView
android:id="@+id/photoImageView"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:padding="5dp" />
<TextView
android:id="@+id/nameTextView"
android:layout_toRightOf="@id/photoImageView"
android:text="Name"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp" />
<TextView
android:id="@+id/departmentTextView"
android:layout_toRightOf="@id/photoImageView"
android:layout_below="@id/nameTextView"
android:text="Department"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp" />
</RelativeLayout>

Step 5

Create User Model, as shown below.

(File Name: User.cs)

public class User
{
public string Name { get; set; }
public string ImageUrl { get; set; }
public string Department { get; set; }
public string Details { get; set; }
public override string ToString()
{
return Name + " " + Department;
}
}

Step 6

To bind the row, we required ListView Adapter, so create a Custom Adapter, as shown below.

(File Name: MyCustomListAdapter.cs)

public class MyCustomListAdapter : BaseAdapter<User>
{
List<User> users;
public MyCustomListAdapter(List<User> users)
{
this.users = users;
}
public override User this[int position]
{
get
{
return users[position];
}
}
public override int Count
{
get
{
return users.Count;
}
}
public override long GetItemId(int position)
{
return position;
}
public override View GetView(int position, View convertView, ViewGroup parent)
{
var view = convertView;
if(view==null)
{
view = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.userRow, parent, false);
var photo = view.FindViewById<ImageView>(Resource.Id.photoImageView);
var name = view.FindViewById<TextView>(Resource.Id.nameTextView);
var department = view.FindViewById<TextView>(Resource.Id.departmentTextView);
view.Tag = new ViewHolder() { Photo = photo, Name = name, Department = department };
}
var holder = (ViewHolder)view.Tag;
holder.Photo.SetImageDrawable(ImageManager.Get(parent.Context, users[position].ImageUrl));
holder.Name.Text = users[position].Name;
holder.Department.Text = users[position].Department;
return view;
}
}

The Custom Adapter is extended by the Base Adapter and it has some Abstract methods, as shown below.

Count- This method returns the count of the list items.
GetItemId- It returns the position of the item.
GetView- This method is used to bind the view to the ListView row, it will bind the data with the row.

Step 7

Now, create the Image Manager class, which is used to bind the images with the ImageView, as shown below.

(File Name: ImageManager.cs)

public static class ImageManager
{
static Dictionary<string, Drawable> cache = new Dictionary<string, Drawable>();
public static Drawable Get(Context context, string url)
{
if (!cache.ContainsKey(url))
{
var drawable = Drawable.CreateFromStream(context.Assets.Open(url), null);
cache.Add(url, drawable);
}
return cache[url];
}
}

In the code given above, the images are boud with the Assets folder. (Add the images to the Image folder accordingly).

Step 8

Now, we require data source for the list, so we will create UserData file to provide the data to the list, as shown below.

(File Name: UserData.cs)

public static class UserData
{
public static List<User> Users { get; private set; }
static UserData()
{
var temp = new List<User>();
AddUser(temp);
AddUser(temp);
AddUser(temp);
Users = temp.OrderBy(i => i.Name).ToList();
}
static void AddUser(List<User> users)
{
users.Add(new User()
{
Name = "aVirendra Thakur",
Department = "Xamarin Android & Xamarin Forms Development",
ImageUrl = "images/image.png",
Details = "Virendra has over 2 years of experience developing mobile applications,"
});
users.Add(new User()
{
Name = "bVirendra Thakur",
Department = "Xamarin Android & Xamarin Forms Development",
ImageUrl = "images/image2.png",
Details = "Virndra has over 2 years of experience developing mobile applications; specializing in Android & C# cross platform development."
});
users.Add(new User()
{
Name = "bVirendra Thakur",
Department = "Xamarin Android & Xamarin Forms Development",
ImageUrl = "images/image.png",
Details = "Virndra has over 2 years of experience developing mobile applications; specializing in Android & C# cross platform development."
});
users.Add(new User()
{
Name = "aVirendra Thakur",
Department = "Xamarin Android & Xamarin Forms Development",
ImageUrl = "images/image2.png",
Details = "Virndra has over 2 years of experience developing mobile applications; specializing in Android & C# cross platform development."
}); users.Add(new User()
{
Name = "dVirendra Thakur",
Department = "Xamarin Android & Xamarin Forms Development",
ImageUrl = "images/image.png",
Details = "Virndra has over 2 years of experience developing mobile applications; specializing in Android & C# cross platform development."
});
}

Step 9

Create ViewHolder Class, which holds the controls of the view. It will only create the controls and reuse it in ListView, which saves the memory.

(File Name: ViewHolder.cs)

public class ViewHolder: Java.Lang.Object
{
public ImageView Photo { get; set; }
public TextView Name { get; set; }
public TextView Department { get; set; }
}

Step 10

Now, go to MyCustomListAdapter and add the few lines of code to bind the data, as shown below.

(File Name: MyCustomListAdapter.cs)

public override View GetView(int position, View convertView, ViewGroup parent)
{
var view = convertView;
if(view==null)
{
view = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.userRow, parent, false);
var photo = view.FindViewById<ImageView>(Resource.Id.photoImageView);
var name = view.FindViewById<TextView>(Resource.Id.nameTextView);
var department = view.FindViewById<TextView>(Resource.Id.departmentTextView);
view.Tag = new ViewHolder() { Photo = photo, Name = name, Department = department };
}
var holder = (ViewHolder)view.Tag;
holder.Photo.SetImageDrawable(ImageManager.Get(parent.Context, users[position].ImageUrl));
holder.Name.Text = users[position].Name;
holder.Department.Text = users[position].Department;
return view;
}

Step 11

Add the Custom Adapter to the ListView in MainActivity, as shown below.

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
myList = FindViewById<ListView>(Resource.Id.listView);
myList.Adapter = new MyCustomListAdapter(UserData.Users);
}

Output

Now, run the Application and you will see the output given below.

12 Comments

Join the conversation! Your thoughts help the community grow.

Chigozie Johnpaul6y ago
Hi, getting the error like 'Object reference not set to an instance of an object.' at myList.Adapter = new MyCustomListAdapter(UserData.Users);
Nikita Patil7y ago
Why I'm getting Unhandled Exception:Java.IO.FileNotFoundException: images/img.png occurred and how to solve this
majid etezazian8y ago
Very good. tnx a lot
zeeshan haider8y ago
How select multiple rows from list same as whatsapp selection in xamarin android? any idea?
Kumar Sambhav8y ago
Where to create images folder, I am getting error: Java.IO.FileNotFoundException: images/image.png
- Logesh Palani7y ago
  Use Assets Folder to Store your images and music, videos
Roy H8y ago
Can you explain the same list view by using Mvvmcross please???
Umar Farooq9y ago
Virendra this article is very helpfull, but can you tell me how to put images of contacts ?
Dennis Chicaiza9y ago
In this list as I can program the click event to get the name field of a listing item
- Logesh Palani7y ago
  Yes, You can derive ItemClick event to get clicked item position to ....
Geethanjana Illangasinghe9y ago
Hi, can u explane how to add edittext to end of the each list item in list view
ib bellad9y ago
Hi, getting the error like 'Object reference not set to an instance of an object.' at myList.Adapter = new MyCustomListAdapter(UserData.Users);