Tag Archives: android

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

 

Using Toasts to display messages in Android

A Toast is a small message that is temporarily displayed at the bottom of a screen in Android apps and is usually used to notify the user that something has occurred or changed, or to confirm an action that the user took such as saving a file or sending a message. The example app below shows a Toast that gives a confirmation to the user that they clicked a button. The Toast will appear when the button is clicked and then disappear a few seconds later.

image1

Step 1

For this example, we will display a Toast when a button is clicked. Add a button to your app’s screen. In this example, we are using the Main.axml screen and the default button.

image2

Step 2

When the button is clicked it will display a toast. You need to define the button in your code and create a click event for it. You can use the existing button and click event that usually exists by default when you create a new Android app, if you wish.

The following line needs to be added inside the click event for the button to make the Toast appear:

Toast.MakeText(this, "You clicked the button", ToastLength.Long).Show();

The complete code should look something like this:

image3
Click the image to see a larger version.

The string message inside the quotes could also be replaced with a variable’s value, or you could also display a variable’s value joined to a string. The Toast can be used for any event such as a click event, when an option is selected or changed, after a certain time period, when something is received, or even just when the app loads.

Go and test your app and it should look something like this when the Toast appears after clicking the button.

image1

Adding toggle buttons to an Android app with Xamarin

This tutorial will show you how to add and use ToggleButton elements for Android apps in Xamarin. ToggleButtons are like on/off switches that only have two possible states and can only be in one state at any one time.

Toggle buttons in an app look like this:

image5

Step 1

To get started, create an Android app solution in Xamarin and open the Main.axml file from the Resources > layout folder. Drag a ToggleButton element on to the screen from the toolbox and give it an Id (eg. @+id/toggleButton1).

image1

The default text for a ToggleButton that is on is “ON” and the default text for a ToggleButton that is off is “OFF”. However, you can change this from the Properties panel.

image2

Step 2

Add a Text (Medium) element to the screen that will display a change in result (eg. ToggleButton switching from off to on). This example TextView is named @+id/resultTextView1.

image3

Step 3

Save the Main.axml file and go to the MainActivity.cs file. Define and set up the ToggleButton and TextView elements in the code and add a CheckedChange method which checks when a change in state is detected. The if statement will check if the ToggleBox is checked and will display the result.

image4
Click the image to see a larger version.

Now go and test your app and this is what it should look like…

image5

Adding radio buttons to an Android app with Xamarin

This tutorial explains how to add radio buttons to an Android app and make decisions based on which option the user selects. Radio buttons allow the user to select one item from a list of items. This is what an app screen with radio buttons looks like:

image10

Step 1

To get started, create a new Android app solution in Xamarin and then open the Main.axml file (in the Resources > layout folder). Drag a Text (Medium) element and three RadioButton elements from the Toolbox on to the app screen. Change the Text values on each element from the Properties panel and make sure each radio button has a name (eg. radioButton1, radioButton2, radioButton3) after @+id/ in the Id field on the Properties panel.

image1

Step 2

Add a Space element and another Text (Medium) element to your screen. Resize the Space element to make some space between the radio buttons and the Text (Medium) element. Give the Text (Medium) element a name eg @+id/resultTextView.

image2

Step 3

Open the MainActivity.cs file and define the three radio buttons and the text view. Then add them to the OnCreate method, so they can be accessed by the code.

image3

Step 4 

Now add a click event for each radio button so that the app displays a message saying which option was selected.

image4

Save your code and test the app. The example shown below is what you should see. However, the problem is that once you select an option it can’t be de-selected. Also, when using radio buttons you should only be able to select one option at a time but at the moment you can have more than one option selected at a time. We will fix this in the next section.

image5

Step 5

Go back to the screen design and delete all three radio buttons. Replace these radio buttons with a RadioGroup from the toolbox. This RadioGroup element has the name @+id/radioGroup1 . You will notice that the RadioGroup provides you already with three radio buttons grouped together. A RadioGroup can have any amount of radio buttons in it, but only one can be selected at a time.

image6

If you go to the Source view you can see that you can add more RadioButton elements to belong to the RadioGroup as long as you add them inside the RadioGroup tags.

image7

Change the Text value on each RadioButton so they are different.

image8

Step 6

Save the Main.axml file and go back to the MainActivity.cs file. The code needs to be changed so now it can access the RadioGroup element. A CheckChanged event is also added to detect when an option has been checked by the user. When this event fires, the option they selected is store in the option variable and the result is displayed to the user.

image9

Now if you test your app, it should look like what you see below. You could now add if statements to check which radio button was selected and have another event occur.

image10

Add a relative layout to an Android screen in Xamarin

In the tutorials so far, we have been designing Android app screens in Xamarin using a Linear Layout. A Linear Layout basically arranges buttons, text views, text fields and other elements within boundaries. These elements are usually stacked. However, Relative Layouts allow us to position elements relative to each other.

image11

Note: If you change to a Relative Layout, you will need to add elements to your screen through code instead of dragging and dropping items on from the toolbox. It is best to drag all of the elements on that you need (eg. buttons, text boxes), and then switch to a relative layout.

This tutorial assumes you already know how to create an Android app project in Xamarin. If you don’t know how to, then go back to the first tutorial.

Step 1

Open the Main.axml file (in the Resources > layouts folder) for your Android app in Xamarin. Drag a few elements on to your screen (eg. three buttons as shown below).

image4

Step 2

Click on the Source tab. Remove any gravity properties from the linear layout and remove the android:orientation=”vertical” line. Where the code says LinearLayout, replace it with RelativeLayout (both in the opening and closing tags).

image5

Go back to the Designer view and you will notice that all of the buttons are now on top of each other.

image6

Step 3

Go back to the Source tab and start typing a new line inside the Button tag for the first button. Start typing layout and you will see many options to select from. Select the android:layout_below option by double-clicking it or press Enter.

image7

Complete the line by typing android:layout_below=”@id/button1” and then close the button tag using />  …this will set the second button to be positioned below the first button. Do the same for the third button but set it so it is placed under the second button (replace @id/button1 or @id/button2 with the names of your buttons/elements).

image8

Now go back to the Designer view and you should see the three buttons placed below each other as shown below.

image9

Experiment with the different layout options from the list, for example layout_toRightof will place an element to the right side of another element.

image10

This is what the screen will look like when button2 is set to be placed to the right of button1.

image11

That’s it! You can use different combinations of layout properties to arrange the elements on your screen and position each element in relation to other elements.

Play audio in an Android app with Xamarin

This tutorial explains how to play audio in an Android app made in Xamarin. The audio can be played when a screen loads or when an event occurs such as a button click or change in a variable’s value. For this tutorial, we will play a sound when a button is tapped.

au_app

Step 1

Start by creating a new app solution in Xamarin (click File > New Solution). Select Android App as the project template. Click Next.

au1

Give the new app a name. Then click Next.

au2

Confirm the solution and project name, Make sure you specify a folder to store your project files in and then click Create.

au3

Step 2

Open the Main.axml file (in Resources > layout). Delete the button already there. Save the file.

au4

Step 3 

Open the MainActivity.cs file and delete the highlighted lines of code (these lines for the button are not needed anymore as we won’t be using the default button).

au5

Step 4 

Right-click on the Resources folder. Select Add > New Folder.

au6

Give the new folder the name ‘raw’ and then press Enter.

au6b

Step 5

Select the new ‘raw’ folder and right-click it. Then click Add > Add files from folder.

au7

Step 6

Navigate to the folder which contains the audio file(s) you wish to use in your app. Click Open.

au7b

Step 7

Select the audio files you wish to include in the project (for this example, we will use an MP3 file called mysound.mp3). Click OK.

au8

Then select Copy the file to the directory and click OK. This file will be copied to the project’s raw folder. You should then be able to see the audio file in the raw folder from the Solution panel.

au8b

Step 8

Open the Main.axml file again and drag a Button element from the Toolbox onto the phone screen. Change the button’s Id value to @+id/playButton. Then change its Text value to Play Sound. Save this file.

au9

Step 9

Open the MainActivity.cs file again. Add the following highlighted line of code to the top section of the existing code. This will give us access to Android.Media.

au10
Click the image to see a larger version.

Step 10

Add the following two highlighted lines of code to the MainActivity.cs file to define the MediaPlayer element and to include the audio file in the code. Replace mysound with the name of your audio file (there is no need to include the .mp3 extension).

au11
Click the image to see a larger version.

Step 11

Now add the following two highlighted lines of code to define the Button element and access the playButton button from the screen.

au12
Click the image to see a larger version.

Step 12

Now add a click event for the button inside the OnCreate method. As you type playButton.Click+= and press the spacebar key you will see a list of options. You should see the option to create the PlayButton_Click method (if you don’t, start typing its name until it shows up – as shown below). Double-click this option from the list to create a new method.

au13
Click the image to see a larger version.

Step 13

Inside the new PlayButton_Click method add the line _player.Start(); – this will play the sound file when the button is clicked/tapped by the user. You can use this line anywhere in your app to play the sound (not just on a click event).

au14
Click the image to see a larger version.

That’s it! Now go and test your app. Hint: You can also add a button that runs the line of code _player.Stop(); to stop the audio file playing.

au15

Passing data between screens on Android with Xamarin

In this tutorial you will learn how to create an Android app that can pass data from one screen to another. This will be demonstrated in an example app that will ask the user for their age and will then convert their age to into animal years (of different types of animals). The user will select an animal by tapping a button and then the result will be displayed on another screen. The app will look like this…

pda_app

Step 1

Open Xamarin Studio. Click File > New Solution. Select Android App (C#) as the template.

pda1

Step 2

Give your app a name, for example AnimalAgeCalculator. Click Next.

pda2

Step 3

Confirm the project and solution name as well as the project folder location and click Create.

pda3

Step 3

Navigate to the Resources > layout folder and click the cog icon (or right-click the folder). Then Click Add > New File. We will be adding the second screen to the app.

pda4

Step 4

Select Android > Layout, give the new screen a name (eg. Result.axml) and then click New.

pda5

Step 5

Open the Main.axml folder in the Resources > layout folder. Add a Text (Large) element and change the Text value to say ‘Enter your age in years’.

pda6

Step 6

Now add a Plain Text element and change its Id to @+id/ageEditText .

pda7

Step 7

Now add a Text (Medium) element which says ‘Convert to…’. Underneath this, add some Button elements such as those shown below. Change their Text values and Id’s. The buttons below have the following Id’s in order:

@+id/dogButton

@+id/catButton

@+id/goatButton

@+id/hamsterButton

pda8

Save the file.

Step 8

Now open the Results.axml file and add a Text (Large) element – replace its Text value with ‘Result’. Then add a Text (Medium) element, change its Id value to @+id/resultTextView and give it a default Text value (it doesn’t matter what you put here as the result text will change).

pda8b

Step 9

Add some spacing and then a Button element. Rename the Id of this button @+id/backButton and change the Text value to ‘Go back’. Save the file.

pda9

Step 10 

Now click on the project folder (not the solution folder) and click the cog icon (or right-click) > Add > New File.

pda10

Select Activity from the Android list, name it ResultActivity and then click New.

pda11

Step 11

Open the MainActivity.cs file and delete the two sections of highlighted code shown below inside the MainActivity class. This code will not be required in this app.

pda12
Click image to view larger version.

Step 12

In the MainActivity class, define the EditText and Button elements, and create two float variables (age and animalAge) and a string variable (animal) as highlighted on lines 11-18 below. In the OnCreate method, add the following highlighted code (shown in lines 27-31).

pda13
Click image to view larger version.

Step 13 

In the OnCreate method, after adding the EditText and Button elements to the code, start typing dogButton.Click+= to create a button click event and then press the Spacebar key. You will see a list of options – double-click the DogButton_Click option to create a new method of the same name.

pda14
Click image to view larger version.

The new method called DogButton_Click will be created as shown below.

pda14b
Click image to view larger version.

Step 14

Repeat the last step for each button click event. You should now have click events and matching methods for the dog, cat, goat, and hamster buttons. This is where we will start adding code to convert the human years to animal years and take the user to another screen.

pda14c

Add the following code to the methods show below.

pda14d

Step 15

Make sure you have the line of code using Android.Content; at the top section of the MainActivity.cs file’s code.

pda15

Step 16

In the HamsterButton_Click method, change the animal variable’s value to “Hamster” and then create a new intent which will send the values of the animalAge and animal variables to the ResultActivity screen.

pda16

Step 17

The last step will need to be repeated for each button click method as shown below. Just change the value for the animal variable in each method to the appropriate animal as shown below. Save the file.

pda17

Step 18

Open the ResultActivity.cs file and make sure your code is the same as shown in the highlighted areas in the image below. You will need to define the resultTextView and backButton elements as well as get the animalAge and animal values from the Intent created in the MainActivity.cs file. The resultTextView element will display the result of the age conversion (the selected animal name and result in animal years). Save the file.

pda18
Click image to view larger version.

Now just add a click event and method for the backButton element which will take the user back to the main screen when they click on the button which says ‘Go back’.

pda18b
Click image to view larger version.

Step 19

The last step before testing is to go back to the Main.axml file and change the Input Type for the ageEditText element to number. Save the file and test your app.

pda19

Click the Build icon to test your app using an Android simulator.
pda19b

Improving the app

One last thing we can do is prevent any errors from occurring or the app from crashing if the user does not enter a value to convert before tapping a button. We can check if the text field has been left empty and only run the conversion and open the result screen if a value exists in the text input field. Here is an example of this in the HamsterButton_Click method.

pda20

You could repeat this step for all of the button click methods. Now go and test your app again – it should no longer crash if the user does not enter a value in the text field!

Adding click events to a ListView in Android with Xamarin

This tutorial explains how to add click events to items on a list using an Android ListView in Xamarin. In this example, we have a list containing cities in Australia which was made in the previous tutorial. When individual list items are clicked/touched you can have a click event which might take the user to another screen or change the value of a variable, for example.

lv1

Step 1

Open the MainActivity.cs code from the previous tutorial (Creating a Simple ListView in Android with Xamarin) and after the myListView.Adapter = adapter; line start typing in myListView.ItemClick+= and press the spacebar. You will see a list of items to select. Double-click on the MyListView_ItemClick to create a new method of this name.

lvc1
Click the image for a larger version.

You will now have a new method called MyListView_ItemClick. This method will be called when any item on the list is clicked.

Click the image for a larger version.
Click the image for a larger version.

Step 2

Now add an if statement to check which item on the list was clicked/touched. For example, we could check if the ‘Sydney’ list item was clicked or touched. If it was, we can the run the appropriate code for that item. For example, we could take the user to another screen with information about Sydney.

Here is an example. You can just add if statements for each item if it is a small list. If it is a large list, you might like to find a more efficient way of doing it.

if (myListItems [e.Position] == "Sydney") {
                //  code to run when list item clicked goes here
            }

The code that you need to add is highlighted below.

lvc3
Click the image for a larger version.

And that’s it! Now go and try it yourself.

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

Send SMS from Android app with Xamarin

In this tutorial you will learn how to make an Android app that can send SMS messages. Firstly, we will create a button that can send a pre-determined message to a pre-determined number. We will then extend the app by adding text fields where the user can enter a number and their message.

This is what the app will look like at the end of this tutorial…

smsapp

Step 1

To get started, open Xamarin and click File > New and select Android App from the list of templates. We will be writing this app in the C# language.

sms1

Step 2

Give your app a name. In this example, the app is called SMSApp and Modern Development has been selected as the Target Platform.

sms2

Step 3

Confirm the project and solution name as well as the folder the project will be stored in. Then click on Create.

sms3

Step 4

Open the Main.axml file in the Resources > Layout folder and delete the ‘Hello world, click me!’ button.

sms4

Step 5

Drag a new Button element from the Toolbox on to the screen. Rename its Id to @+id/sendButton and change the Text value to Send SMS.

sms5

Step 6

Now open the MainActivity.cs file to add the code. Delete the code that is highlighted below.

sms6

Step 7 

Click on the Project menu and then select the Project Options (it will be the name of your app project – here it is called SMSApp Options).

sms7

Step 8

Select Android Application from the list and then in the Required Permissions list, check the SendSms option and click on OK. This will allow the app to send SMS messages.

sms8

Step 9

Add the using Android.Telephony; line to the top section of the code.

sms9

Step 10

Define the sendButton as a Button element in your code.

sms10

Step 11

Add the following highlighted line of code to the OnCreate method so that you can access the button element from the screen.

sms11

Step 12

Now create a button click event. Type in sendButton.Click+= then press the spacebar. Double-click the option to create the SendButton_Click method.

sms12

Step 13

Inside the SendButton_Click method, add the following highlighted code.

sms13

There are two values that you need to change. The phone number (shown as 0123456789 above) needs to be changed and also the SMS message contents (shown as Hello world above). Change these values as you like. You can also get values from existing variables here or from user input in text fields. Now go and test your app on a phone with a working SIM card.

Adding user input

Now we will allow the user to enter in a number and a message to send. We will need to add a couple of text labels and text fields to the screen.

Step 14

Open the Main.axml file. Add two Text (Medium) elements and two Plain Text elements as shown below. The Text (Medium) elements should ask the user to enter a number and enter a message.

sms14

Step 15

Rename the first Plain Text element (under Enter a number) to @+id/numberEditText. Rename the second Plain Text element (under Enter a message) to @+id/messageEditText.

sms15a

sms15b

Step 16

Go back to the MainActivity.cs code. Modify the code by adding the highlighted lines of code shown below. You firstly need to define the EditText elements in the MainActivity class (lines 11-12) and then allow the code to access these elements from the screen (lines 22-23). Then you need to modify the SendButton_Click method so that the text entered by the user (the phone number and the desired message) are saved in string variables (lines 31-32). These variables are then used in line 33.

sms16

That’s it! Now go and test your completed app.

Improving the Android Temperature Converter App

In this tutorial we will look at how to improve the code in the Temperature Converter App for Android from the previous tutorial. If you have tested the app yourself, you might notice that the app works great when the user enters only numbers. However, what happens when a user enters nothing at all? The app will crash!

We will look at how to prevent such errors from occurring so that the app won’t crash if the user accidentally (or deliberately) enters non-numeric values or nothing at all – this is something known as data validation. This is what the app will look like…

Android Temperature Converter app (with data validation)
Android Temperature Converter app (with data validation)

The code below is from the same app but has some new code added to it. All of the code is commented, explaining what each new line does. None of the design elements (buttons, labels, text fields) have been changed in any way.

using Android.App;
using Android.Widget;
using Android.OS;
// need to add using System; to access the Math functions
using System;

namespace TemperatureConverter
{
  [Activity (Label = "TemperatureConverter", MainLauncher = true, Icon = "@mipmap/icon")]
  public class MainActivity : Activity
  {
    Button cButton;
    Button fButton;
    TextView resultTextView;
    EditText temperatureTextEdit;

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

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

      cButton = FindViewById<Button> (TemperatureConverter.Resource.Id.cButton);
      fButton = FindViewById<Button> (TemperatureConverter.Resource.Id.fButton);
      resultTextView = FindViewById<TextView> (TemperatureConverter.Resource.Id.resultTextView);
      temperatureTextEdit = FindViewById<EditText> (TemperatureConverter.Resource.Id.temperatureTextEdit);

      cButton.Click += CButton_Click;
      fButton.Click += FButton_Click;
    }

    void FButton_Click (object sender, System.EventArgs e)
    {
      // Get the temperature entered and store as a string
      string tempString = temperatureTextEdit.Text;
      // Check if the string is empty
      if (string.IsNullOrEmpty (tempString) == false) {
        // If string is not empty, create a float variable to store the temperature value
        float temp;
        // Use TryParse method to store the value in the temp variable if value is numeric
        bool isNumeric = float.TryParse (tempString, out temp);
        // Check if tempString value is numeric and if so, use it in the conversion formula
        if (isNumeric == true) {
          // Create fResult variable which stores result of C to F conversion
          float fResult = temp * 1.8f + 32f;
          // Change fResult to decimal data type and round to 2 decimal places
          decimal fResultRounded = Math.Round ((decimal)fResult, 2);
          // Display result on the screen
          resultTextView.Text = fResultRounded.ToString () + " degrees Fahrenheit";
        }
        // If tempString is not numeric, ask user to enter numbers only
        else {
          resultTextView.Text = "Enter numbers only";
        }
        // If nothing was entered by user, ask user to enter a number
      }
      else {
        resultTextView.Text = "Enter a number to convert";
      }
    }

    void CButton_Click (object sender, System.EventArgs e)
    {
      // Get the temperature entered and store as a string
      string tempString = temperatureTextEdit.Text;
      // Check if the string is empty
      if (string.IsNullOrEmpty (tempString) == false) {
        // If string is not empty, create a float variable to store the temperature value
        float temp;
        // Use TryParse method to store the value in the temp variable if value is numeric
        bool isNumeric = float.TryParse(tempString, out temp);
        // Check if tempString value is numeric and if so, use it in the conversion formula
        if (isNumeric == true) {
          // Create cResult variable which stores result of F to C conversion
          float cResult = (temp - 32f) / 1.8f;
          // Change cResult to decimal data type and round to 2 decimal places
          decimal cResultRounded = Math.Round((decimal)cResult, 2);
          // Display result on the screen
          resultTextView.Text = cResultRounded.ToString () + " degrees Celsius";
        } 
        // If tempString is not numeric, ask user to enter numbers only
        else {
          resultTextView.Text = "Enter numbers only";
        }
      }
      // If nothing was entered by user, ask user to enter a number
      else {
        resultTextView.Text = "Enter a number to convert";
      }
    }
  }
}

Adding more screens to an Android app

In this tutorial, you will learn how to add multiple screens to an Android app. We will use the existing Android Temperature Converter app from one of the earlier tutorials to look at how to add more screens to apps and link each screen with buttons.

This is what the two screens of the app will look like:

ms_app_example

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

Video

Step 1

Drag a Space element on to the screen underneath the buttons and text view items.

ms1

Step 2

Now go to the Layout tab on the Properties panel and change Height to 100dp.

ms2

Step 3

Drag a Button element on to the screen under the Space element. Rename its Id to @+id/helpButton and change the Text value to Help. This button will link to a ‘Help’ screen that will provide information on how to use the app or how to get support. Save the file.

ms3

Step 4

Next to the layout folder, click the cog icon and then Add and New File…

ms4

Step 5

Select a new Android Layout and call it Help. Then click New.

ms5

Step 6

Your new Help.axml file should appear in the layout folder. Add a Text (Large) element to the top of the screen and change the Text value to Instructions. Then add a Multiline Text element to the screen, change its Text value to be the instructions for the app.

ms6

Step 7

Now add a Button element. Change its Text value to Go back and its Id to @+id/backButton. Save the file.

ms7

Step 8

Now go to the project folder and click on the cog icon. Click Add and New File…

ms8

Step 9

Create a new Activity file called HelpActivity. Click New. This file will contain the code for the Help screen.

ms9

Step 10

Open the HelpActivity.cs file and add the following line of code to link the Help.axml screen file to the HelpActivity.cs code file. Save the file.

ms10
Click the image to see a larger version.

Step 11

The next thing to do is to go back to the MainActivity.cs file to link the Help button to the Help.axml screen. Firstly, define the Help button in the code by adding these lines of code.

ms11
Click the image to see a larger version.

Step 12

Create a click event for the helpButton Button element.

ms12
Click the image for a larger version.

Step 13

Add the following line of code to the top section of the MainActivity.cs file.

ms13

Step 14

Inside the new HelpButton_Click method, add the following code. We will create a new intent that will open the other screen (the Help screen) when the button is clicked.

ms14
Click the image to see a larger version.

Step 15

Now go back to the HelpActivity.cs file and add this code for the Back home button so that when the user presses that button they will go back to the main screen. Save your files.

ms15
Click the image to see a larger version.

That’s it! Now go and test your app. It should have two screens like the ones shown below that open when you click on the buttons linking the screens.

ms_app_example

Sample code

Here is the C# sample code for the MainActivity.cs file:

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

using Android.Content;

namespace TemperatureConverter
{
  [Activity (Label = "TemperatureConverter", MainLauncher = true, Icon = "@mipmap/icon")]
  public class MainActivity : Activity
  {
    Button cButton;
    Button fButton;
    TextView resultTextView;
    EditText temperatureTextEdit;

    Button helpButton;

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

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

      cButton = FindViewById<Button> (TemperatureConverter.Resource.Id.cButton);
      fButton = FindViewById<Button> (TemperatureConverter.Resource.Id.fButton);
      resultTextView = FindViewById<TextView> (TemperatureConverter.Resource.Id.resultTextView);
      temperatureTextEdit = FindViewById<EditText> (TemperatureConverter.Resource.Id.temperatureTextEdit);

      helpButton = FindViewById<Button> (TemperatureConverter.Resource.Id.helpButton);

      cButton.Click+= CButton_Click;
      fButton.Click+= FButton_Click;

      helpButton.Click+= HelpButton_Click;
    }

    void HelpButton_Click (object sender, System.EventArgs e)
    {
      var intent = new Intent (this,typeof(HelpActivity));
      StartActivity(intent);
    }

    void FButton_Click (object sender, System.EventArgs e)
    {
      float temp = float.Parse (temperatureTextEdit.Text);
      float fResult = temp * 1.8f + 32f;
      resultTextView.Text = fResult.ToString () + " degrees Fahreheit";
    }

    void CButton_Click (object sender, System.EventArgs e)
    {
      float temp = float.Parse (temperatureTextEdit.Text);
      float cResult = (temp - 32f) / 1.8f;
      resultTextView.Text = cResult.ToString () + " degrees Celsius";
    }
  }
}

Here is the sample C# code for the HelpActivity.cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;

namespace TemperatureConverter
{
  [Activity (Label = "HelpActivity")]			
  public class HelpActivity : Activity
  {
    Button backButton;

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

      // add this line of code to link this file to the Help screen
      SetContentView (Resource.Layout.Help);

      backButton = FindViewById<Button> (TemperatureConverter.Resource.Id.backButton);
      backButton.Click+= BackButton_Click;

    }

    void BackButton_Click (object sender, EventArgs e)
    {
      var intent = new Intent (this,typeof(MainActivity));
      StartActivity(intent);
    }
  }
}

Changing your Android app icon

Before you publish your app you might want to change your application icon. In fact, some application marketplaces might reject an Android application that does not have its own icon. To get started, you will need to create a logo and save it as a PNG file somewhere on your computer.

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

Video

Step 1 

Open your solution in Xamarin and then open the Resources and drawable folders. Click on the cog icon next to the drawable folder and then click Add > Add Files from Folder…

ic1

Step 2

Select the folder which contains the icon file and then click on Open.

ic2

Step 3

Check the icon that you want to use and then click OK.

ic3

Choose Copy the file to the directory and then click OK.

ic4

You should now see the icon file in the drawable folder.

ic5

Step 4

Click on Project and then select [YourAppName] Options. For this example, we need to click on CookieClicker Options.

ic6

Click on Android Application and then change the Application icon field to @drawable/[YourIconName]. For the example below, it is @drawable/cookie_icon. Then click on OK.

ic7

Alternatively, you can change the icon in the MainActivity.cs file code.

ic8

Now when you go to Build > Archive for Publishing, you should see your app icon there (publishing your app will be explained in the next tutorial).

ic9

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!";
    }
  }
}

 

Creating your first Android app with Xamarin

This tutorial explains how to use Xamarin and the C# programming skills you have gained so far in this tutorial series to start making your very own Android apps. In this tutorial, we will develop a Temperature Converter app for Android which can convert between Celsius and Fahrenheit temperatures.

This is what the app will look like:

Temperature Converter app for Android
Temperature Converter app for Android

So let’s get started! You can watch the video below or read through the step-by-step instructions below. The C# sample code for this project is also at the bottom of this page.

Video

Step 1

Click on New Solution to create a new solution for this project.

aa1

Step 2

Select the Android App template and click Next.

aa2

Step 3

Give your app a name. For this example, we have called the app TemperatureConverter. Select a target platform. Here, we have chosen Modern Development to make this app compatible with modern Android phones. If you choose Latest and Greatest you will need to download the latest Android Simulators. Choose Default theme and click Next.

aa3

Step 4

Choose the location to store your project and click Next. You can keep the project name as it is or give it a different name.

aa4

Step 5

After Xamarin creates your new project it will most likely automatically open the MainActivity.cs file (if not, double-click it from the Solution folders list on the left side of the screen). By default, you will already have some lines of code in there for an example app. Delete the lines of code shown in the image below (we will be adding our own buttons so we don’t need the one that is already there).

aa5

Step 6

In the Solution list on the left side of the screen, click to open the Resources folder, then open the layout folder, and double-click to open the Main.axml file. This will open the storyboard for our main screen in Designer view.

aa6

You will see the default button ‘Hello World, Click Me!’ there. You can right-click this button and click on Delete to remove the button.

aa6b

Step 7

From the Toolbox on the right side of the screen, scroll down until you see the Text (Small) element (under Form Widgets). Drag the Text (Small) element on to the storyboard in the Designer view.

aa7

Step 8

Now drag a Plain Text element (under Text Fields) from the Toolbox on to the storyboard under the Small Text element you added in the previous step.

aa8

Step 9

Now you need to drag two Button elements (found under Form Widgets in the Toolbox) on to the screen.

aa9

Hint: You can search form screen design elements in the Toolbox using the search box.

Step 10

The last screen design element to add is a Text (Large) (large text label) to display the result of the temperature conversion.

aa10

Step 11

Click on the Small Text element and in the Properties panel (and Widgets tab) change the Text property from ‘Small Text’ to ‘Temperature (in degrees)’. Hit the Enter/Return key on your keyboard and you should see the text label change on the phone screen.

aa11

Step 12

Change the Text property in the Properties panel for both buttons. The first button should say ‘Convert to Celsius’ and the second button should say ‘Convert to Fahrenheit’.

aa12

Step 13

Now change the large text label so that it says ‘0’ is the default value before any result is displayed.

aa13

Did you know? These values can also be changed from the Source view if you prefer as shown below. Be careful not to accidentally change any of the other code though! Some of your code might be different to the code below – don’t change it unless you know exactly what you are doing.

You can alternatively change the text and IDs of elements in the Source view if you prefer that over the Designer view.
You can alternatively change the text and IDs of elements in the Source view if you prefer that over the Designer view.

Step 14

Now that we have changed the text that displays on the labels and buttons, we need to change the actual names of the elements.

Click on the temperature text field and change its Id in the Properties panel. Its Id needs to change from @+id/editText1 to @+id/temperatureEditText.

aa14

Step 15

Now change the name (Id) of the text label that will display the conversion result. Click on the result label and change its Id from @+id/textView2 to @+id/resultTextView.

aa15

Step 16

Repeat the last step for the two buttons changing their Id’s to @+id/cButton for the Convert to Celsius button and @+id/fButton for the Convert to Fahrenheit button. Make sure you save the Main.axml file by pressing Cmd + S (on Mac) or Ctrl + S (on Windows).

aa16

Step 17

Now we can add the functionality to the app. Open the MainActivity.cs file. Firstly, we will define the different text label and button elements in the code. Inside the public class MainActivity: Activity class, add the following highlighted code:

aa17
Click to see larger version of image if you can’t read the code.

Step 18

Now we need to assign the values from the Main.axml file to each element in the MainActivity.cs file. Under the SetContentView (Resource.Layout.Main); line of code, add the following highlighted code:

aa18

Now we will be able to use these elements in a new method that will convert the temperature input.

Step 19

We need to create click events for both the ‘Convert to Celsius’ button and the ‘Convert to Fahrenheit’ button. To do this, add the code below. You will notice that this will create two new methods for our click events. These methods will be used when the click event is fired (when the buttons are tapped by the user) so the relevant conversion code will need to be in each click event method.

aa19

Step 20

Now let’s add the code for the FButton_Click method first (the method which will convert from Celsius to Fahrenheit). We will create a new float variable that will contain the value entered by the user in the temperatureEditText text field. The value will also need to be converted (parsed) from the string data type to the float data type.

aa20

Step 21

A float variable will need to be created that will store the result of converting from Celsius to Fahrenheit. In the conversion formula, we need to add the letter f at the end of each value that will need to be parsed as a float.

Step 22

Now we can access the resultTextView element and display the conversion result on that text label. It will also need to be converted to a string. We can add the text “ degrees Farenheit” to the end of the result displayed.

Step 23

Now we just need to write the code for the CButton_Click method by creating the variable which will store the value entered by the user, creating a variable which will store the Fahrenheit to Celsius conversion result, and then displaying the result on the text label. After adding the code (as shown below), save the file.

aa23

Step 24

Now go back to the Main.axml file in the Designer view and click on the temperatureEditText text field element. In the Properties panel, scroll down until you see Input Type (under Input Format on the Widget tab). Change the Input Type to NumberDecimal. Then save the file.

aa24

That is all of the coding done! Now we can test the app but first we must select an Android Virtual Device to emulate the app.

Step 25

Click on the Device button next to Debug on the top toolbar and select a compatible Virtual Device that has been installed. The Virtual Device must be the same or higher API level than the targeted device selected in Step 3 (eg. the Modern Development option is API level 16). The Nexus 5 virtual device shown below is API level 19. If you don’t have a compatible virtual device to select then you will need to click on Manage Android Devices and download a compatible virtual device (they are free to download).

To install and use virtual Android devices for testing, it is suggested you install the Xamarin Android Player. Once installed, you can download a virtual device (eg. Nexus 5) and use it on your Mac or PC to test the Android apps you build. You can also use the built-in Android Virtual Device manager but it is much slower!

aa25a

Once a compatible virtual device has been selected you can run the app by clicking on the Build icon on the top toolbar.

aa25b

The Xamarin Android Player will open and load the selected virtual device. It may take a minute. Unlock the device screen and your app should open!

aa25c
Unlock the simulated phone by dragging the padlock icon to the side. Your app should then automatically open.
aa25d
Enter a number value in the text field and then press the relevant conversion button to see the conversion result.
Success!
Success!

Congratulations, you just made your very first Android app using Xamarin and the C# language! In the next tutorial we will make the same app for an iPhone.

Later on we will also look at how to export an Android app so that you can install it on your own phone.

Sample C# code

Here is the sample code for the MainActivity.cs file. Note that the app, solution and project are all named TemperatureConverter.

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

namespace TemperatureConverter
{
  [Activity (Label = "TemperatureConverter", MainLauncher = true, Icon = "@mipmap/icon")]
  public class MainActivity : Activity
  {
    Button cButton;
    Button fButton;
    TextView resultTextView;
    EditText temperatureTextEdit;

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

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

      cButton = FindViewById<Button> (TemperatureConverter.Resource.Id.cButton);
      fButton = FindViewById<Button> (TemperatureConverter.Resource.Id.fButton);
      resultTextView = FindViewById<TextView> (TemperatureConverter.Resource.Id.resultTextView);
      temperatureTextEdit = FindViewById<EditText> (TemperatureConverter.Resource.Id.temperatureTextEdit);

      cButton.Click+= CButton_Click;
      fButton.Click+= FButton_Click;

    }

    void FButton_Click (object sender, System.EventArgs e)
    {
      float temp = float.Parse (temperatureTextEdit.Text);
      float fResult = temp * 1.8f + 32f;
      resultTextView.Text = fResult.ToString () + " degrees Fahreheit";
    }

    void CButton_Click (object sender, System.EventArgs e)
    {
      float temp = float.Parse (temperatureTextEdit.Text);
      float cResult = (temp - 32f) / 1.8f;
      resultTextView.Text = cResult.ToString () + " degrees Celsius";
    }
  }
}