Before we build our ListAdapter, we need to create another AXML sheet for the CustomCell, add another file to the Resources | layout folder called CustomCell.xml, and implement the following:

 
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="horizontal"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:weightSum="4">
     <TextView
         android:id="@+id/username"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1" />
 </LinearLayout> 

This is another simple layout which has one TextView wrapped in a LinearLayout. The TextView  will display the ConnectionId for each Client.

Now let's get back to the ListAdapter. Inside the Views folder, add another file called ClientsListAdapter.cs and implement the following:

public class ClientsListAdapter : BaseAdapter<Client>
     {
         private List<Client> _clients;
         private Activity _context;
         public ClientsListAdapter(Activity context) : base()
         {
             _context = context;
             _clients = new List<Client>();
         } 
    } 

Firstly, we are just creating a new class which inherits the BaseAdapter class which is typecasted to the Client object. We also have a private List which is going to store the clients retrieved from the SignalRClient, and finally we have the current Activity Context. Now let's add in the required override functions from the BaseAdapter:

public override Client this[int position]
         {
             get
             {
                 return _clients[position];
             }
         }
         public override Java.Lang.Object GetItem (int position)
         {
             return null;
         }
 
         public override long GetItemId(int position)
         {
             return position;
         }
         public override int Count
         {
             get
              {
                  return _clients.Count;
              }
          }
 
         public override View GetView(int position, View convertView, ViewGroup parent)
         {
             View view = convertView; // re-use an existing view, if one is available
             if (view == null)
             {
                  // otherwise create a new one
                 view = _context.LayoutInflater.Inflate(Resource.Layout.CustomCell, null);
             }
             // set labels
             var connectionIdTextView = view.FindViewById<TextView>
 (Resource.Id.username);
             connectionIdTextView.Text = _clients[position].Username;
             return view;
         }  

The first override is to implement an index reference to the _clientslist. All the override functions are the same as we implemented in Chapter 1, Building a Gallery Application. Let's turn our attention to the GetView function; we are simply creating a new CustomCell layout using the LayoutInflater framework (this will take any AXML file and create a new instance of the view).

Then, now that we have our new view, we will set the Text property of the TextView  object in the CustomCell view to the Username in our Client object.

Finally, our last step is to add a another function called UpdateClients (as specified in our presenter). This will simply take a new IEnumerable of Clients, and the List will be updated accordingly:

public void UpdateClients(IEnumerable<Client> clients)
         {
             foreach (var client in clients)
             {
                 _clients.Add(client);
             }
         }  

With complete direction from the presenter class, look how fast we developed the android interface.

You can try testing the first page. Startup the server Hub and watch the list update whenever we connect or disconnect a new client. A good test on this example is to use multiple running instances of the application on different devices.