Creating a custom list in Android with Xamarin

This tutorial will show you how to create a detailed list for an Android app using your own custom list design. For this project, we will create a list of cities and when the user taps a city from the list, the app will take them to another screen with more details about that city.

customlistandroid

Step 1

Click File > New Solution and select Android App. Click Next.

image3

Then give the app a name, select a target version of Android and click Next.

image4

Step 2

Confirm the project name, solution name, location and click Create.

image5

Step 3

Open the MainActivity.cs file and change MainActivity : Activity to say MainActivity : ListActivity . You can also delete the existing code for the default button. The code should look like this:

image6
Click image to see larger version.

Step 4

You can also go ahead and delete the following two lines of code from the MainActivity.cs file as it will not be needed (because we will not be loading the Main screen, we will be loading a list):

// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);

Next, add using System.Collections.Generic; so we can use a list, and then create the City class which will define the properties for a city.

image7
Click image to see larger version.

You can also now add the following two lines of code to create a list called cityList.

image8
Click image to see larger version.

Step 5

Now you can start populating your cities list with some cities and their information. Add as many as you like. Two cities have been added below with the properties Name, Country, State, and Population.

image9
Click image to see larger version.

Step 6 

You will now need to create an adapter which is an ArrayAdapter as we are going to be working with an array for a list.

image10
Click image to see larger version.

Step 7

Inside the City class, add a public override string ToString() method. Inside the new method, add the code shown below so that you can display the city information in each row of the list. The way it is formatted works like this: The numbers (0,1,2,3) represent each of the elements displayed in a row. For example, in the code below {0} s matched to the city Name, {1} is matched to the state, {2} is matched to the country name, and so on. Inside the double-quotes, you can specify each element and how they will be formatted (eg. separated by commas or dashes).

image11
Click image to see larger version.

The code above will result in a list that looks like this when you test the app:

image12

Clearly, the formatting needs improving but we can work with this for now to have a rough idea of what the list will look like. We can now focus on making a custom row for the list.

Step 8

Right-click the layout folder inside the Resources folder and then click Add > New File.

image13

Then select Android > Layout. Give the new layout the name CityCell and click New.

image14

Step 9

Open the new CityCell.axml file and drag three LinearLayout (Horizontal) elements on to the screen.

image15

Now drag a Text (Large) element on to the first LinearLayout (this will be for the city name), two Text (Medium) elements next to each other on the second LinearLayout (for state and country), and then a Text (Small) element on the third (bottom) LinearLayout (this will be for the population). Change their default Text value so that you know what each text element is for (eg. City name, State, Country, Population).

Give them the following Id values:

  • @+id/cityNameTextView
  • @+id/stateTextView
  • @+id/countryTextView
  • @+id/populationTextView

image16

You can also add some padding to the left side of each text view element by clicking on the Layout tab on the Properties panel and adding a dp value for Left padding eg. 10dp – now is a good time to save the file.

image17

Step 10

Now that we have defined our own custom layout, we can go back and change the adapter in the MainActivity.cs file. Instead of using SimpleListItem1, we can use our own new custom layout for the list items / rows. To do this, right-click the project folder, click Add > New file.

image18

In the New File dialog, select General > Empty Class and then give it the name CitiesAdapter and click New.

image19

In the CitiesAdapter.cs file, add the following highlighted lines of code to create a new list and a new activity.

image20

Step 11

Now modify the code as you see it below. Don’t worry if you are getting error messages at this point – we will fix those in the next steps. Firstly, the CitiesAdapter will need to inherit from BaseAdapter, so we specify this (line 8). For this, we also require using Android.Widget; (line 4). We also need to create and define an activity in this file. In the constructor of the CitiesAdapter method we will be receiving an activity (line 13), and we will set the value of the local activity to the one we get from the argument (line16). We will also create the cities list here (line 15).

image21

Add a new public override Count method by typing in public override count and then double-click Count from the list or press Enter to select it.

image22

Change the Count override method so that it will return cities.Count;

image23

Step 12

We need to add another override method. We need to add the public override GetView method by typing in public override GetView and then double-clicking or pressing Enter to select the GetView method.

image24
Click image to see larger version.

The following highlighted method below will be added to your code.

image25
Click image to see larger version.

Now we need to create a view and we do this by modifying the method we just created. Replace the line of code inside the method (shown on line 30 above) with the following line:

var view = convertView ?? activity.LayoutInflater.Inflate(ListAppAndroid.Resource.Layout.CityCell, parent, false);

The method will now look like this:

image26
Click image to see larger version.

Step 13

Now we can start adding the different text label elements for this view.

image27
Click image to see larger version.

Step 14

Now we need to get the data which will be equal to cities in the position that we will get from the arguments. The label text will contain this data. Then we can return the view.

image28
Click image to see larger version.

Step 15

Next, we create a new method. Start typing public override GetItem and then select the GetItem method from the list to create it.

image29
Click image to see larger version.

Step 16

Change the line of code inside the new GetItem method to return null; because we don’t need to return anything at the moment.

image30
Click image to see larger version.

Step 17

We will now need to create a new id that may be requested. Go back to the MainActivity.cs file and located the public class City. Add public long Id; to your class. Save the file.

image31
Click image to see larger version.

Step 18

Return to the CitiesAdapter.cs file. Another method needs to be created. Start typing public override GetItemId and then select the GetItemId method from the autocomplete list to create it.

image32
Click image to see larger version.

We now need to get the city in the position that’s been requested so we need to change the code inside the new GetItemId method to return cities[position].Id; – save the file.

image33
Click image to see larger version.

Now that we have the CitiesAdpater we can start using it instead of ArrayAdapter. Go back to MainActivity.cs and change the ListAdapter as shown below (make sure you pay attention to where you use uppercase letters and where you don’t use them). Save the file.

image34
Click image to see larger version.

Step 19

One last thing you can do to touch up the appearance of the list is to change the way the population number on the label is formatted so that hundreds and thousands are separated by commas.

Go to the GetView method in CitiesAdapter.cs. Then find the line populationLabel.Text = … and add “#,##0” inside the ToString brackets – this will format numbers with comma in between hundreds and thousands.

image35
Click image to see larger version.

That’s it! Now if you test the app, it should look something like this:

image1

The second part of this tutorial focuses on adding a details screen so that when the user taps one of the cities on the list, they can find out more information about it.

Step 20

Start by adding a new screen. Right-click the layout folder, click Add > New File.

image36

Step 21 

Call the new layout file Details and then open this new Details.axml file.

image37

Step 22

Add a Text (Large) element and an ImageView element to the new Details screen. Then change the Id for the text element to @+Id/cityNameTextView2 (remember, that we already have a cityNameTextView). Also, change the ImageView element’s Id to @+id/cityImageView. You can also resize the image and add padding to the left side of the text.

image38

Step 23

Now you will need to create a DetailsActivity.cs file. To do this, right-click the project folder, click Add > New File and call it DetailsActivity.

image39

image40

Step 24

Add some images to your drawable folder inside the Resources folder. Right-click the drawable folder and click Add > New File.

image41

Find the folder that contains the images you want to use. Click Open.

image42

Select the images you wish to use and click OK.

image43

Select Copy the file to the directory and click OK.

image44

Step 25

Open the MainActivity.cs file. Add public int ImageId; to the public class City.

image45
Click image to see larger version.

Then scroll up to the OnCreate method and specify the ImageId for each item in the list.

image46

Step 26

Add an ItemClick event for the ListView which will create a new method called ListView_ItemClick.

image47
Click image to see larger version.

Step 27

Inside the ListView_ItemClick method, firstly we will check that the event argument is not empty. Then we will create an intent, send the city name and image ID with the intent, and start the new activity (the Details screen).

image48
Click image to see larger version.

Step 28

Now go back to the DetailsActivity.cs file created earlier and add the following highlighted code. This will create the TextView and ImageView, get the selected city and its data, then display the data (the city name and image) on the screen.

image49
Click image to see larger version.

And that’s it! Now you can test your app by tapping on one of the items on the list to see its details.

image2