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.
Step 1
Click File > New Solution and select Android App. Click Next.
Then give the app a name, select a target version of Android and click Next.
Step 2
Confirm the project name, solution name, location and click Create.
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:
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.
You can also now add the following two lines of code to create a list called cityList.
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.
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.
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).
The code above will result in a list that looks like this when you test the app:
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.
Then select Android > Layout. Give the new layout the name CityCell and click New.
Step 9
Open the new CityCell.axml file and drag three LinearLayout (Horizontal) elements on to the screen.
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
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.
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.
In the New File dialog, select General > Empty Class and then give it the name CitiesAdapter and click New.
In the CitiesAdapter.cs file, add the following highlighted lines of code to create a new list and a new activity.
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).
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.
Change the Count override method so that it will return cities.Count;
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.
The following highlighted method below will be added to your code.
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:
Step 13
Now we can start adding the different text label elements for this view.
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.
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.
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.
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.
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.
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.
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.
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.
That’s it! Now if you test the app, it should look something like this:
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.
Step 21
Call the new layout file Details and then open this new Details.axml file.
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.
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.
Step 24
Add some images to your drawable folder inside the Resources folder. Right-click the drawable folder and click Add > New File.
Find the folder that contains the images you want to use. Click Open.
Select the images you wish to use and click OK.
Select Copy the file to the directory and click OK.
Step 25
Open the MainActivity.cs file. Add public int ImageId; to the public class City.
Then scroll up to the OnCreate method and specify the ImageId for each item in the list.
Step 26
Add an ItemClick event for the ListView which will create a new method called ListView_ItemClick.
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).
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.
And that’s it! Now you can test your app by tapping on one of the items on the list to see its details.
