Tag Archives: application

Adding a ListView to an Android app

In this tutorial you will learn how to add a ListView in your Android app using Xamarin. ListView elements allow you to create a scrollable list where each list item can have a click event. A ListView looks like this…

lv1

In this tutorial, we will create the ListView and then we will make each item in the list ‘clickable’ in the next tutorial.

Step 1

To get started, create a new solution in Xamarin (File > New Solution). Choose the Android App template and click Next.

lv2

Step 2

Give your app a name and select Modern Development as the target platform. Click Next.

lv3

Confirm the project and solution name and the project folder location. Click Create.

lv4

Step 3

Open the Main.axml file in the Resources / layout folder. Delete the default button on the screen.

lv5

Step 4

Drag a ListView element on to your screen from the Toolbox. You won’t necessarily see anything on the screen after dragging the ListView on to the screen, so we will look at the code for the Main.axml file in the next step.

lv6

Step 5

Click on the Source tab to view the code for the Main.axml file. Delete the two lines of code that specify the minimum width and height for the ListView element. Then make sure that the layout_width and layout_height properties for the ListView element are both set to “match_parent”.

lv7

Change the name of the ListView to myListView as show below.

lv8

Step 6

Open the MainActivity.cs file. Delete the lines of code highlighted below. They won’t be needed for this program.

lv9

Step 7

Add the following line of code highlighted below to the top section of your code.

lv10

Step 8

We need to create a new List that will contain a list of items of the string data type. It can be called myListItems. We also need to add the ListView to the code called myListView. To do this, add the following two highlighted lines of code in the MainActivity class.

lv11

Step 9

Add the following highlighted line of code inside the OnCreate method so that you can access the ListView item (that you added to the Main.axml screen) in your MainActivity.cs code.

lv12

Step 10

Now you can start adding items to the list called myListItems. Firstly, you need to setup the list (as shown on line 23 below) and then you can add string items to the list. For example, this app will contain a list of cities in Australia. Add the following highlighted lines of code.

lv13

Step 11

In Android development, whenever we want to show a vertical list of scrollable items on a screen we need to use a ListView as we have done. Data in the ListView is populated using an Adapter. The simplest type of adapter we can use is called the ArrayAdapter. The ArrayAdapter will convert an ArrayList of objects into View items that are loaded into the ListView container. This is exactly what we will do here. Copy the two highlighted lines of code below to convert your Arraylist into View items that will be displayed in the ListView in your app.

lv14
Click the image to see a larger version.

That’s it! Now test your app using a suitable virtual Android device (eg. Nexus 5 API 19). In the next tutorial we will add click events for the list items.

lvapptest

Next tutorial: Add click events to a ListView in an Android app

Publishing your Android app

This tutorial explains how to publish your app and create an .APK file that can be installed on an Android phone. For this tutorial, we will be using the CookieClicker app. You might also want to change the app icon and details before publishing your app.

Watch the video below or scroll down to read the step-by-step instructions.

Video

Step 1

To get started, open the solution that you wish to publish in Xamarin. You will need to create an Android Signing Key before you can publish your app. To do this, click on the Xamarin Studio Community menu and select Preferences (this might be on the File menu in Windows).

p1

Step 2

In the Preferences dialog, click on Android Signing Keys (under Publishing) and click on Create New Key.

p2

Step 3

Give your new signing certificate an alias (name) and create a password (at least 6 characters long). Then select the validity length (how many years the certificate will be valid for) and fill in at least of the text boxes with something (eg. just provide your name or your city name). Click on OK to continue.

p3a

You should then see your new signing key/certificate in the list of Android Signing Keys. Click on OK to exit the Preferences dialog.

p3b

Step 4

Select the Project menu and change your Active Configuration to Release. This will allow you to publish your app (you can change this back to Debug after you have published your app so you can return back to coding and testing your apps).

p4

Step 5

Select the Build menu and then click Archive for Publishing.

p5

Step 6

Now click on Sign and Distribute.

p6

Then select Ad-Hoc to save the app file (the .apk file) to your computer. Click on Next.

p7

Step 7

Select your signing key from the list and click Next.

p8

Then confirm you are happy with the app details and file size and click Publish.

p9

Step 8

Lastly, choose where to save your .apk file and click on Save. You can now share this file online or copy it to your phone (either by USB cable or email). You can also upload it to the Google Play store for other people to download.

p10

Step 9

After you have published your app, remember to change the project’s active configuration back to Debug by clicking on the Project menu > Active Configuration > Debug.

Important note

If you decide to upload your app to the Google Play store you must make sure that you do not violate any copyright laws (eg. check that you are not using other people’s images or sound files and that you app is not the same as an existing app). Also, make sure you have your parents’ permission before uploading any apps to the Google Play store.

Making a Cookie Clicker game for Android

For our second Android app project, we will create the most pointless but addictive game in the world…a cookie clicker! A basic version of it will look like the image shown below, but you can extend this game as much as you like. You will also learn how to add image buttons to your app screens.

cc1

Watch the video below or scroll down to read the step-by-step instructions and view the sample code.

Video

Step 1

You will need to create a new Android App solution in Xamarin called CookieClicker. Click on New Solution (or File > New Solution) to get started.

cc2

Step 2

Choose Android App as the type of new solution and then click Next.

cc3

Step 3

Set the App Name to CookieClicker (one word – no spaced). Choose Modern Development as the Targeted Platform using the default theme and click on Next.

cc4

Step 4

Keep the project and solution names as CookieClicker, select a project location to store your files in and click on Create.

cc5

Step 5

Open the MainActivity.cs file (if it does not automatically open) and delete the lines of code highlighted below. These lines of code won’t be needed for this project.

cc6
Click to see larger version of this image.

Step 6

Now open the Main.axml file located in the Resources > layout folder.

cc7

Step 7

Click on the button that says “Hello World, Click Me!”. We won’t need this button so it can be deleted. Either click on it and press the Delete key on your keyboard, or right-click the button and select Delete.

cc8

Step 8

From the Toolbox (if you don’t see it, you can search for the Toolbox from the search bar), scroll down under Images & Media and drag an ImageButton element on to the phone screen.

cc9

Step 9

Now you will need to download a cookie image to your computer (preferably a PNG image file with a transparent background). A free public-domain image has been provided below. Click on the image to open the full-size version and then save the image to a folder on your computer and name it cookie.png.

Click to open the full-size image. Image from: https://pixabay.com/en/chocolate-chip-cookies-dessert-304801/ (CC0 Public Domain - free for commercial use, no attribution required)
Click to open the full-size image. Image from: https://pixabay.com/en/chocolate-chip-cookies-dessert-304801/ (CC0 Public Domain – free for commercial use, no attribution required)

Step 10

Select the ‘drawable’ folder inside the Resources folder and click on the small cog icon. Then select Add > Add Files from Folder.

cc10

Step 11

Select the folder that contains the cookie image file and click on Open.

cc11

Step 12

Select the cookie.png file (or whatever yours is called) and make sure the checkbox is checked. Then click on OK.

cc12

Step 13

Make sure you select Copy the file to the directory and then click on OK.

cc13

Step 14

Now you should see cookie.png in the drawable folder.

cc14

Step 15

Click on the ImageButton element on the phone screen and change the Src property to @drawable/cookie (you do not need to include the .png file extension).

cc15

Step 16

Now we need to make sure the image fits properly on the screen. Click on the drop-down arrow next to the Scale Type property and change it to fitCenter.

cc16a

You can then also click on the ImageButton and drag the little circle up to change the height of the image. You can also change the width of the image this way. Alternatively, go to the Layout tab on the Properties panel and change the width and height values there eg. 435dp for the height. Note: sizes of elements are measured using the ‘dp’ unit on Android.

cc16b

cc16c

If you go to the Source tab, your code for the Main.axml file might look like the code shown below. However, your code could be a little different so don’t change the code here unless you are sure you know what you are doing.

cc16d

Step 17

In the Designer view, drag a Text (Large) element on to the phone screen under the ImageButton. This will be used to display the number of clicks.cc17

Step 18

From the Widget tab on the Properties panel, change the Text value from Large Text to 0 clicks. At the same time, change its Id from @+id/textView1 to @+id/cookieTextView . You can also change the Gravity value to center so the text is centered.

cc18

Step 19

Click on the ImageButton element (the cookie) and change its Id from @+id/imageButton1 to @+id/cookieImageButton – now you need to save the Main.axml file.

cc19

Step 20

Now we can add the code! Open the MainActivity.cs file and create an integer variables called clicks that is given an initial integer value of 0. This variable will be created inside the MainActivity class, as highlighted below.

cc20

Step 21

We also need to define the ImageButton element and the TextView element in the code. This is highlighted in the lines below. Make sure to use the correct names for each element.

cc21

Step 22

Inside the OnCreate method (under the SetContentView (Resource.Layout.Main); line), we need to now setup the ImageButton and TextView element.

cc22

Step 23

The next thing you need to do is create a click event for the cookie ImageButton by adding the line cookieImageButton.Click+= CookieImageButton_Click; – this will create a new method called CookieImageButton_Click which will contain the code that will increase the number of clicks and display the number of clicks each time the ImageButton is tapped.

cc23

Step 24 

Inside the CookieImageButton_Click method, add the following two highlighted lines of code. The clicks++; line will increase the clicks variable by 1 each time the button is tapped, and the next line of code is responsible for converting the clicks variable value to a string and displaying the clicks variable’s value on the screen as well as the text “clicks!” at the end eg. 25 clicks!

cc24a

Now save your work. All of the coding is done! Now you could extend this app by adding extra buttons to purchase items when a certain number of cookies are clicked (using if statements) or increase the number of cookies by a different amount. You could add extra text labels or buttons too. However, let’s test that this app works properly first. Click on the Build button after selecting a virtual device to run the app on (if you don’t know how to do this, refer to the previous tutorial – Creating your first Android app with Xamarin).

cc25a

cc25b

Here is the source code for the MainActivity.cs file:

using Android.App;
using Android.Widget;
using Android.OS;

namespace CookieClicker
{
  [Activity (Label = "CookieClicker", MainLauncher = true, Icon = "@midmap-hdpi/icon")]
  public class MainActivity : Activity
  {
    int clicks = 0;

    ImageButton cookieImageButton;
    TextView cookieTextView;

    protected override void OnCreate (Bundle savedInstanceState)
    {
      base.OnCreate (savedInstanceState);

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

      cookieImageButton = FindViewById<ImageButton> (CookieClicker.Resource.Id.cookieImageButton);
      cookieTextView = FindViewById<TextView> (CookieClicker.Resource.Id.cookieTextView);

      cookieImageButton.Click+= CookieImageButton_Click;

    }

    void CookieImageButton_Click (object sender, System.EventArgs e)
    {
      clicks++;
      cookieTextView.Text = clicks.ToString () + " clicks!";
    }
  }
}