Build Android App using Xamarin in Visual Studio 2013 - Part 2

In our previous post ( How To Start Building Android App using Xamarin in Visual Studio 2013 ? ) we have seen how to create a very simple hello world android program using Xamarin. In this post we will see how to create an Android application with a list view.

Start Visual Studio 2013 and got to File-> New -> Project, where you can see the section Android under Visual C# Templates.

Select Blank App (Android) Template, provide a proper name and location and then Click OK.

A default application is created in the solution explore.

A List view consists of the following.

Row – A UI Elements displays the data.
Adapter – A class that binds the data to the List view.

Android has built-in Views and Adapters defined in Android.Resources or the user can create a custom View or Adapter based on their needs.

First let’s look in to how to create a basic built-in List view using built-in Adapters.

The activity which binds data to the list view should implement IListAdapter interface, Android by default provides a class which has implemented IListAdapter interface the class is called as ListActivity.

Extend the MainActivity class from ListActivity.

[Activity(Label = "ANDROID_APP", MainLauncher = true, Icon = "@drawable/icon")]

public class MainActivity : ListActivity

{

private List&lt;string&gt; viewItems;

protected override void OnCreate(Bundle bundle)

{

base.OnCreate(bundle);

viewItems = new List&lt;string&gt;();

viewItems.Add("Row 1");

viewItems.Add("Row 2");

viewItems.Add("Row 3");

viewItems.Add("Row 4");

viewItems.Add("Row 5");

ListAdapter = new ArrayAdapter&lt;String&gt;(this, Android.Resource.Layout.SimpleListItem1, viewItems);

}

}

Create a List<string> object and populate some data to the list, then create a new ArrayAdapter object which takes the layout to be used in the List, and the object to be bind to the list as parameter and returns the ListAdapater.

Here are the few default list view layout supported by android

SimpleListItem1 – This list item displays a single line of text.
SimpleListItem2 – This list item displays a two line of text.
ActivityListItem – This list item displays an image and a text.
SimpleListItemActivated1 – This list item displays a line of text with choice to select single or multiple.
SimpleListItemActivated2 – This list item displays two line of text with choice to select single or multiple.
SimpleListItemChecked – This list item displays a line of text with choice to select single or multiple, but the selection is shown as a checked symbol.

In this example we have used SimpleListItem1 to display the data in the List.

The ListAdapter of type IListAdapter which populates the data to the UI.

That’s it. Now you are ready to test your application.

Run the application by selecting the suitable Android Emulator Installed in the development machine.

Your List View Android application is up and Running.

Not all the time we are satisfied with the default data templates, let’s see how to create a Custom List view and Custom Adapter.

Custom views are generally declared as AXML files in the Resources/Layout directory.

Open Main.axml file and create a ListView control inside the LinearLayout (linear layout is a layout that arranges its children in a single column or a single row), assign it with an id “List” and set the height and width property for the control.

&lt;?xml version="1.0" encoding="utf-8"?&gt;

&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"&gt;

&lt;ListView android:id="@+id/List"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:cacheColorHint="#FFDAFF7F"/&gt;

&lt;/LinearLayout&gt;

Now create another AXML file called CustomList.axml in Layout folder this file contains the custom layout for each row that will appear in the list view.

Create a Linear Layout and add a three text view controls to that layout.

Like shown below.

&lt;LinearLayout

android:id="@+id/Text"

android:orientation="vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:paddingLeft="10dip"&gt;

&lt;TextView

android:id="@+id/Text1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="30dip"

android:textStyle="italic" /&gt;

&lt;TextView

android:id="@+id/Text2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="27dip"/&gt;

&lt;TextView

android:id="@+id/Text3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="25dip"/&gt;

&lt;/LinearLayout&gt;

Now we need a model which contains the data that will get bind to the List View. Create a new class called CustomModel.cs and add three properties as shown below.

public class CustomModel

{

public string Title { get; set; }

public string Author { get; set; }

public string Description { get; set; }

}

Create a new class call CustomActivity.cs and extend it from BaseAdapter<T>, T is of the type CustomModel in our example. BaseAdapter is an Abstract class, implement the abstract methods in the CustomActivity class.

List&lt;CustomModel&gt; items;

Activity context;

public CustomActivity(Activity context, List&lt;CustomModel&gt; items) : base()

{

this.context = context;

this.items = items;

}

public override CustomModel this[int position]

{

get { return items[position]; }

}

public override int Count

{

get { return items.Count; }

}

public override long GetItemId(int position)

{

return position;

}

public override View GetView(int position, View convertView, ViewGroup parent)

{

var item = items[position];

View view = convertView;

if (view == null) // no view to re-use, create new

view = context.LayoutInflater.Inflate(Resource.Layout.CustomView, null);

view.FindViewById&lt;TextView&gt;(Resource.Id.Text1).Text = item.Heading;

view.FindViewById&lt;TextView&gt;(Resource.Id.Text2).Text = item.SubHeading;

view.FindViewById&lt;ImageView&gt;(Resource.Id.Image).SetImageResource(item.ImageResourceId);

return view;

}

The Getview is the Method which gets called each time the Row is being created or Re-used, so always check whether the convertView parameter is null or not, if it is null then the row is being created else the row is being re used while scrolling. If it is null then create a new View.

if (view == null) // no view to re-use, create new

view = context.LayoutInflater.Inflate(Resource.Layout.CustomList, null);

Assign value to the data items in the list and return the view to the UI.

view.FindViewById&lt;TextView&gt;(Resource.Id.Text1).Text = item.Title;

view.FindViewById&lt;TextView&gt;(Resource.Id.Text2).Text = item.Author;

view.FindViewById&lt;TextView&gt;(Resource.Id.Text3).Text = item.Description;

return view;

Go the MainActivity.cs file and create a list object for the CustomModel Class. And set the content view to Main.axml.


public class MainActivity : Activity

{

private List&lt;CustomModel&gt; viewItems;

ListView listView;

protected override void OnCreate(Bundle bundle)

{

base.OnCreate(bundle);

SetContentView(Resource.Layout.Main);

viewItems = new List&lt;CustomModel&gt;();

for (int i = 1; i &lt;= 5; i++)

{

var model = new CustomModel();

model.Title = "Title " + i;

model.Author = "Author " + i;

model.Description = "Description " + i;

viewItems.Add(model);

}

listView = FindViewById&lt;ListView&gt;(Resource.Id.List);

listView.Adapter = new CustomActivity(this,viewItems);

}

}

Create a new object for the CustomActivity and assign it to the ListView’s Adapter property.

That’s it. Now you are ready to test your application.

Run the application by selecting the suitable Android Emulator Installed in the development machine.