Tutorials Xamarin ListView Example in Xamarin.Android

ListView Example in Xamarin.Android

This post will walk you through crating a custom ListView in Xamarin.Android using list adapter.

ListView is one of the most common UI pattern, used extensively to display collection of data elements in rows. Android ListView is a view group that displays a list of scrollable items.

The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array. Find out more about android ListView and ListAdapters from Android ListView Tutorial.

Following are the steps involved in using ListView in your application

  1. Declare ListView layout
  2. Declare list row layout
  3. Define ListView Adapter
  4. Setting ListView Adapter
  5. Handle list click event

1. Declare ListView layout

Before using list in your application, you first need to declare its layout inside your activity or fragment. For the sake of simplicity, in the below code snippet, we have declared ListView inside activity layout file.

ListActivity.axml

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

The property android:id="@+id/IntentoryList" in the above code snippet is the id assigned to ListView. This id will be used to initialize this from activity cs file.

2. Declare list row layout

In the above step we have declared ListView layout. Now it is the time to define the layout for list row item. This layout will be used by list adapter.

ListItemRow.axml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:minHeight="50dp"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/Thumbnail"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:paddingLeft="10dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/Placeholder" />
    <TextView
        android:id="@+id/Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/Thumbnail"
        android:lineSpacingExtra="3dp"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:typeface="sans" />
    <TextView
        android:id="@+id/Description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/Title"
        android:layout_toRightOf="@id/Thumbnail"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:textColor="#fff"
        android:textSize="11sp" />
</RelativeLayout>

3. Define ListView Adapter

Adapter is a tricky part while creating ListView. BaseAdapter is a common Adapter that can be used in both ListView, GridView or Spinners. An adapter takes list of data objects as input, and each object in the list is mapped to a list row. Adapter also inflates the layout to be rendered for each row items.

In our example, CusotmListAdapter takes list of Post objects. The structure of Post class as described below.

public class Post
{
	public string url { get; set; }
	public string title { get; set; }
	public string description { get; set; }
}

The post class contains three fields; a url, title and a description. In this example we will not cover much on how to get the data source, you may hardcode or write some logic to download data form server. Now lets move to our list adapter implementation.

public class CusotmListAdapter : BaseAdapter<Post>
{
	Activity context;
	List<Post> list;

	public CusotmListAdapter (Activity _context, List<Post> _list)
		:base()
	{
		this.context = _context;
		this.list = _list;
	}

	public override int Count {
		get { return list.Count; }
	}

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

	public override Post this[int index] {
		get { return list [index]; }
	}

	public override View GetView (int position, View convertView, ViewGroup parent)
	{
		View view = convertView; 

		// re-use an existing view, if one is available
		// otherwise create a new one
		if (view == null)
			view = context.LayoutInflater.Inflate (Resource.Layout.ListRowLayout, parent, false);

		Post item = this [position];
		view.FindViewById<TextView> (Resource.Id.Title).Text = item.title;
		view.FindViewById<TextView>(Resource.Id.Description).Text = item.description;

		using (var imageView = view.FindViewById<ImageView> (Resource.Id.Thumbnail)) {
			string url = Android.Text.Html.FromHtml (item.thumbnail).ToString ();

			//Download and display image
			Koush.UrlImageViewHelper.SetUrlDrawable (imageView, 
				url, Resource.Drawable.Placeholder);
		}
		return view;
	}
}
  1. You must override the Count, GetItemId and GetView method in your BaseAdapter class implementation. The Count method indicates the total number of rows in the list, GetItemId represent a unique id for reach item in the list. GetView inflates layout for each list row and render on the screen.
  2. In this example, we have used UrlImageViewHelper component. You may download the same form component store and add to your project.

4. Setting ListView Adapter

Once your list adapter is ready, then you are almost done with your ListView implementation. Now all you need to do is to instantiate the adapter and setting to ListView.

//Initializing listview
listView = FindViewById (Resource.Id.feedList);
listView.ItemClick += OnListItemClick;
listView.Adapter = new CusotmListAdapter(this, listData);

You can handle ListView click event by adding ItemClick callback.

void OnListItemClick(object sender, AdapterView.ItemClickEventArgs e) {
	Post item = result.posts.ElementAt (e.Position);
	// Do whatever you like here
}
Total
0
Shares
guest
8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
JavaTechig
JavaTechig
7 years ago
Ace
Ace
7 years ago

Works perfectly!!!

Ace
Ace
7 years ago

You deserve a share!!

Sridhar
Sridhar
7 years ago

Hi guys,

I am newbie in Xamarin.Android. Right now, I am working on the Recycler view. I couldn’t able to build and run my App. It’s giving few errors as follows,

1. (Error XA5209: Unzipping failed. Please download https://dl-ssl.google.com/android/repository/android_m2repository_r15.zip and extract it to the local/share/Xamarin/Android.Support.v4/22.2.0/content directory. (XA5209) )

2. (Error XA5209: Reason: local/share/Xamarin/Android.Support.v4/22.2.0/android_m2repository_r15.zip is not a valid zip file (XA5209))

3. (Error XA5207: Please install package: ‘Xamarin.Android.Support.v4’ available in SDK installer. Java library file local/share/Xamarin/Android.Support.v4/22.2.0/embedded/classes.jar doesn’t exist. (XA5207))

NOTE: If I run my code on the desktop it work’s fine. Whereas in my laptop, it’s throwing me such errors. I can see this might be a basic error to be fixed, I am lost! Help me guys!!

Escarcega Light
Escarcega Light
5 years ago

You right!!

Luis Simões
Luis Simões
5 years ago

What is “result.posts”?

marco
marco
3 years ago

What is result.posts on OnListItemClick. Thanks

Previous Post

Using SQLite.NET ORM in Xamarin Application

Next Post
ios vs android app permissions

iOS App Permissions – What Makes Them Better Than Android ?

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
8
0
Would love your thoughts, please comment.x
()
x