Wire up the project using jumper wires by following these instructions or checking out the circuit diagram and images below.
Connect VCC on Bluetooth module to 3.3V on Arduino
Connect GND on Bluetooth module to GND on Arduino
Connect TXD on Bluetooth module to digital pin 7 on Arduino
Connect RXD on Bluetooth module to digital pin 8 on Arduino
Connect the long pin from the LED on the breadboard to digital pin 2 on Arduino
Connect the short pin from the LED on the breadboard to a 220 Ohm resistor and from there to GND on the Arduino
Note: The STATE and EN pins on the Bluetooth module do not need to be connected to anything in this project.
Here are some images showing the LED turned on and everything wired up.
Arduino code
Create a new sketch in the Arduino IDE and add the following code. Then upload the sketch to your Arduino board.
#include <SoftwareSerial.h>
int led = 2;
SoftwareSerial Bluetooth(7, 8);
void setup() {
Serial.begin(9600);
Bluetooth.begin(9600);
pinMode(led, OUTPUT);
}
void loop() {
int command;
if (Bluetooth.available()) {
command = Bluetooth.read();
Serial.println("Input received:");
if (command != 0)
{
// A non-zero input will turn on the LED
Serial.println("0 / ON");
digitalWrite(led, HIGH);
}
else
{
// A zero value input will turn off the LED
Serial.println("1 / OFF");
digitalWrite(led, LOW);
}
}
}
Controlling the Arduino via Bluetooth
To connect your Android or iOS mobile device to the Arduino you will need to download a free app (or you could also make your own app) that can connect to the HM-10 Bluetooth module and send commands. You can search your device’s app store to find a free app that will work for this project but for this example we will use the free Bluetooth Terminal app on iOS.
Tip: If you search the iOS App Store or Google Play app store using the keywords “bluetooth arduino” or “bluetooth hm-10” you should be able to find a suitable app.
The steps below are for the Bluetooth Terminal app on iOS but will be similar for other apps on other devices:
Open the app and connect to the Bluetooth module (in this case it is called CC41-A but the name will vary depending on the model you have).
Tap ‘Select characteristic’ and then select FFE1 (at the bottom of the list).
Select Decimal.
Using the on-screen keypad, you can enter different decimal values. Enter 1 and tap the Send button. The LED light should turn on. Enter 0 and tap the Send button. The LED should then turn off. If you don’t see anything happen, click Tools > Serial Monitor in the Arduino IDE and then set the baud date to 9600 bauds. Check if any input is being received and displayed in the serial monitor when you send the 0 or 1 commands to the Arduino from the app.
Where to from here?
You can use Bluetooth to control other projects such as a robot or car. You can also try receiving data from the Arduino – eg. send sensor readings to your phone.
Which Bluetooth module should I use?
There are several different Bluetooth modules that should work with this tutorial. The one used in this project was purchased on eBay and is called “HM-10 CC2540 CC2541 BLE Bluetooth 4.0 Wireless Module“.
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:
Click image to see larger version.
Step 4
You can also go ahead and deletethe 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.
Click image to see larger version.
You can also now add the following two lines of code to create a list called cityList.
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.
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.
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).
Click image to see larger version.
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.
Click image to see larger version.
The following highlighted method below will be added to your code.
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:
Click image to see larger version.
Step 13
Now we can start adding the different text label elements for this view.
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.
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.
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.
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.
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.
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.
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.
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.
Click image to see larger version.
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.
Click image to see larger version.
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.
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).
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.
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.
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.
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.
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:
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.
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:
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).
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.
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.
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.
Click the image to see a larger version.
Now go and test your app and this is what it should look like…
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:
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.
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.
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.
Step 4
Now add a click event for each radio button so that the app displays a message saying which option was selected.
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.
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.
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.
Change the Text value on each RadioButton so they are different.
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.
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.
In this tutorial you will learn how to create an iOS 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 the same screen. Tapping a button will take the user to another screen that grabs information from the first screen and displays a fact. The app will look like this…
Step 1
Open Xamarin and click File > New Solution to get started. Give your app a name (the app is called AnimalAgeCalculatorIOS in this example). Select a target iOS version and click Next.
Step 2
Confirm the project and solution name as well as the project location. Click Create.
Step 3
Open the Main.storyboard file in the Resources folder and drag a Label on to the screen. The label in this example app is given the Text value Enter your age in years.
Then drag a Text Field element on to the screen with the placeholder text Age. Give this Text Field the Name ageTextField.
Step 4
Add another label with the text value Convert to… and then four buttons with the following names:
dogButton
catButton
goatButton
hamsterButton
Then add another label with the text value Your result and a button with the text value Find out more and the Name detailsButton – as shown below.
Step 5
Now open the ViewController.cs file and add a TouchUpInside+= event for the dogButton element inside the ViewDidLoad() method. As you type in the line dogButton.TouchUpInside+= and press the spacebar on your keyboard you will be presented with some options. Double-click on DogButton_TouchUpInside to create a new method of the same name. If you don’t see the option immediately, start typing it in until it shows up in the list and then double-click it to add the new method for the touch event.
Step 6
Now repeat the last step for each of the buttons (adding a new method for the TouchUpInside events for each of the four animal buttons).
Step 7
Add the following variables to the ViewController : UIViewController class:
float animalAge; (stores the age of the user in selected animal years)
string animal; (stores the name of the animal the user selected)
Step 8
Now add the following highlighted code in the methods for the button touch events. This will get the user’s age from the text field and store it in the age variable as a float value. The animal’s age will also be calculated (based on which animal button the user pressed) and stored in the animalAge variable as a float value. The selected animal’s name will be stored in the animal variable as a string value. The label displaying the result will also be updated.
Step 9
Now drag a Navigation Controller from the toolbox onto the screen in the Main.storyboard file.
Step 10
Right-click and delete the Root View Controller screen on the left (may have to do this twice).
Step 11
Hold down the Control (Ctrl) key while clicking and dragging from the Navigation Controller screen (on the left) to the main screen (on the right). You’ll see a blue line appear connecting the two screens together and a menu will also appear.
When the menu appears make sure you select Root.
Step 12
Now drag a View Controller from the toolbox on to the screen and place it on the right side of the main screen. This will be the second screen in the app.
Step 13
Drag a Label on to the screen. Give it a name and you will notice that a warning icon appears. Clicking on the warning icon will reveal the warning message.
The warning message tells us that there is no codebehind for this screen so we will need to create one. This will create a second ViewController.cs file for this screen. Give it the name ResultViewController and press the Enter key.
In the solution panel you should now see the ResultViewController.cs file in the list. This file is where we add the code for the second screen.
Step 14
Now Control (Ctrl) click the Find out more button on the main screen and while holding down the mouse key, drag on to the second screen and release. A small menu will appear. Select Show (this means when the button is pressed, it will show the second screen).
Step 15
Now go back to ViewController.cs and add a new method. Start typing public override PrepareForSegue and then double-click the method shown in the list to create it.
Click the image for a larger version.
Add the following highlighted code to the new PrepareForSegue method. This will create a variable for the second screen/view controller and the two variables that will have their values passed to the second screen are also specified here.
Click the image for a larger version.
Step 16
Now go to the ResultViewController.cs file (for the second screen) and add the following highlighted code in the ResultViewController : UIViewController class. This will declare the animalAge and animal variables with initial values of 0f for animalAge and an empty string for animal.
Click the image for a larger version.
Step 17
Now drag a Text View element on to the second screen with the Name resultLabel and the Text value of Your result. Resize it so it has plenty of room for text.
Step 18
Go back to the ResultViewController.cs file and add the ViewDidLoad method.
Click the image for a larger version.
Inside the ViewDidLoad method, add the following highlighted code. This will display the result to the user based on their animal age and selected animal.
Click the image for a larger version.
Step 19
Now drag a Button element from the toolbox on to the second screen in the Main.storyboard file and give it the Name value backButton and the Text value Back.
Step 20
Now Control (Ctrl) click and drag from the Back button on the second screen to the main screen and click Show when the menu appears after releasing the mouse button. This will make the app take the user back to the main screen when they press the Back button.
Step 21
The final step is to allow the user to dismiss the keyboard on the main screen when the keyboard is no longer required. Go back to the ViewController.cs file and add an override TouchesBegan method as shown below.
Click the image for a larger version.
Inside the new override method, add the following highlighted line of code which will end editing and dismiss the keyboard when the user no longer requires it.
Click the image for a larger version.
That’s it! Now go and save all your files and test your app.
This tutorial explains how to play audio files in the background in an iOS app. An audio file can play when a screen loads or when an event occurs (such as a button press or change in a variable’s value). The example app in this tutorial will play a sound when a button is pressed. We will also look at how to use the Vibrate function in an iPhone to make the phone vibrate as well as playing a sound.
Here is what this app will look like:
Step 1
Open Xamarin and click File > New Solution. Then select iOS Appand SingleView App as the project template. Click Next.
Step 2
Give your new app a name and select a target iOS version. Click Next. On the following screen, confirm the project and solution name and then click Create.
Step 3
When the solution opens, right-click on the project folder. Select Add > New Folder.
Give the new folder the name Sounds.
Step 4
Right-click on the new Sounds folder and select Add > Add files from folder.
Step 5
Navigate to the folder which contains the audio file(s) you wish to use in your app. Click Open.
Step 6
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.
Then select Copy the file to the directory and click OK. This file will be copied to the project’s Sounds folder. You should then be able to see the audio file in the Sounds folder within the project folder from the Solution panel.
Step 7
Right-click on the audio file in the Sounds folder. Select Build Action and set to BundleResource (if this does not work during testing, try selecting Content instead).
Step 8
Open the Main.storyboard file. Change the View to your desired iPhone/iPad model. Drag three Button elements on to the screen as shown below. Give the first button a Name of playSoundButton and the text value ‘Play sound’. Give the second button a Name of playSoundVibrateButton and the text value ‘Play sound and vibrate’. Give the third button a Name of vibrateButton and the text value ‘Vibrate’. Save the file.
Click the image to see a larger version.
Step 9
Open the ViewController.cs file and add the following two highlighted lines of code. The first two highlighted lines allow us to access audio tools and lower-level classes. url defines where the location and name of the audio file, while mySound is the name of the variable holding the sound file.
Click the image to see a larger version.
Step 10
Now add the following two highlighted lines of code in the ViewDidLoad method. Here we define the location and filename of the audio file as well as directing the mySound variable to use this audio file. Replace mysound.mp3 with the name of your sound file.
Click the image to see a larger version.
Step 11
Now create a TouchUpInside event for each of the three buttons in the ViewDidLoad method. Inside the new methods for each TouchUpInside event, add the lines of code shown below.
SystemSound.PlaySystemSound(); will just play the sound
SystemSound.PlayAlertSound(); will play the sound and vibrate the phone
SystemSound.Vibrate.PlaySystemSound(); will just vibrate the phone
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.
Step 1
Start by creating a new app solution in Xamarin (click File > New Solution). Select Android App as the project template. Click Next.
Give the new app a name. Then click Next.
Confirm the solution and project name, Make sure you specify a folder to store your project files in and then click Create.
Step 2
Open the Main.axml file (in Resources > layout). Delete the button already there. Save the file.
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).
Step 4
Right-click on the Resources folder. Select Add > New Folder.
Give the new folder the name ‘raw’ and then press Enter.
Step 5
Select the new ‘raw’ folder and right-click it. Then click Add > Add files from folder.
Step 6
Navigate to the folder which contains the audio file(s) you wish to use in your app. Click Open.
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.
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.
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.
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.
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).
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.
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.
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).
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.
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…
Step 1
Open Xamarin Studio. Click File > New Solution. Select Android App (C#) as the template.
Step 2
Give your app a name, for example AnimalAgeCalculator. Click Next.
Step 3
Confirm the project and solution name as well as the project folder location and click Create.
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.
Step 4
Select Android > Layout, give the new screen a name (eg. Result.axml) and then click New.
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’.
Step 6
Now add a Plain Text element and change its Id to @+id/ageEditText .
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
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).
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.
Step 10
Now click on the project folder (not the solution folder) and click the cog icon (or right-click) > Add > New File.
Select Activity from the Android list, name it ResultActivity and then click New.
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.
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).
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.
Click image to view larger version.
The new method called DogButton_Click will be created as shown below.
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.
Add the following code to the methods show below.
Step 15
Make sure you have the line of code using Android.Content; at the top section of the MainActivity.cs file’s code.
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.
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.
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.
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’.
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 InputType for the ageEditText element to number. Save the file and test your app.
Click the Build icon to test your app using an Android simulator.
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.
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!
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.
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.
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.
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.
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…
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.
Step 2
Give your app a name and select Modern Development as the target platform. Click Next.
Confirm the project and solution name and the project folder location. Click Create.
Step 3
Open the Main.axml file in the Resources / layout folder. Delete the default button on the screen.
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.
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”.
Change the name of the ListView to myListView as show below.
Step 6
Open the MainActivity.cs file. Delete the lines of code highlighted below. They won’t be needed for this program.
Step 7
Add the following line of code highlighted below to the top section of your code.
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.
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.
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.
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.
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.
This tutorial explains how to add more than one screen to your iOS app and link screens together using buttons. We will use a simple example for this tutorial as show below…
Watch the video below or scroll down to read the step-by-step instructions and sample code.
Video
Step 1
Start by creating a new solution (click File > New Solution).
Step 2
Give your app a name, select a minimum supported iOS version and click Next.
Confirm the project and solution names, the project folder location and click Create.
Step 3
Open the Main.storyboard file and drag a Button element on to the screen. Give it a name and change its text value.
Step 4
Drag a Navigation Controller anywhere onto the storyboard. It should look like this…
Step 5
Right-click the Root View Controller and click Delete.
Step 6
Hold down the Ctrl (Control) key while dragging the Navigation Controller screen to your main screen (you will see a blue line linking the two screens together). The select Root from the list of options – this will make the main screen the root screen (the screen that loads first when the app starts running).
Step 7
Now drag a View Controller element onto the storyboard and place it to the right side of your main (root) screen. This will create a new screen which will be the second screen in your app.
Step 8
Hold down the Ctrl (Control) key while clicking and dragging the button on the main screen to the second screen. When you see the list of options appear, select Appear.
Step 9
Now we can add a Button to get from the second screen back to the main screen. Drag a button element on to the second screen. Give it a name. When you name the first element that you add to a new screen, you will see a yellow warning icon. Click it and then you will need to type in the name of the new ViewController for this screen (for example, ScreenTwoViewController)– the name you provide will be the name of a new C# file that will contain the code for this screen. Change the Title property of the button the Back.
Step 10
Now click on the new button on the second screen. Hold down the Ctrl (Control) key while dragging this button to the main screen. Click on Show. This will make the Back button take the user back to the main screen when they tap it.
Lastly, double-click on the main screen’s title so you can rename it.
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)
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";
}
}
}
}
In this tutorial we will look at how to improve the code in the Temperature Converter App for iOS 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 or enters something other than numbers (such as a letter or other character)? 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.
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.
Sample code
Here is the new and improved code for the ViewController.cs file.
// need to add using System; line to access math functions
using System;
using UIKit;
namespace TempConverter
{
public partial class ViewController : UIViewController
{
public ViewController (IntPtr handle) : base (handle)
{
}
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.e
// Create a button touch event for the Convert to Celsius button
cButton.TouchUpInside+= CButton_TouchUpInside;
// Create a button touch event for the Convert to Fahrenheit button
fButton.TouchUpInside+= FButton_TouchUpInside;
}
void FButton_TouchUpInside (object sender, EventArgs e)
{
// Get the temperature entered and store as a string
string tempString = tempTextField.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
resultLabel.Text = fResultRounded.ToString () + " degrees Fahrenheit";
}
// If tempString is not numeric, ask user to enter numbers only
else {
resultLabel.Text = "Enter numbers only";
}
// If nothing was entered by user, ask user to enter a number
}
else {
resultLabel.Text = "Enter a number to convert";
}
}
void CButton_TouchUpInside (object sender, EventArgs e)
{
// Get the temperature entered and store as a string
string tempString = tempTextField.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
resultLabel.Text = cResultRounded.ToString () + " degrees Celsius";
}
// If tempString is not numeric, ask user to enter numbers only
else {
resultLabel.Text = "Enter numbers only";
}
}
// If nothing was entered by user, ask user to enter a number
else {
resultLabel.Text = "Enter a number to convert";
}
}
public override void DidReceiveMemoryWarning ()
{
base.DidReceiveMemoryWarning ();
// Release any cached data, images, etc that aren't in use.
}
public override void TouchesBegan (Foundation.NSSet touches, UIEvent evt)
{
base.TouchesBegan (touches, evt);
this.View.EndEditing (true);
}
}
}
This tutorial will show you how to create a Temperature Converter app for iOS devices using Xamarin. We made the same app for Android in a previous tutorial and now we are going to make it for iOS devices. The app will look like this…
Although we will be using Xamarin for designing and coding the app, you will still need to have XCode installed on your Mac device (click here for detailed installation instructions).
Watch the video below or scroll down to view the step-by-step instructions and sample code.
Video
Step 1
To get started, open Xamarin and begin a New Solution.
Step 2
Select App under iOS and then select Single View App (C#). Click on Next to continue.
Step 3
Give your app a name. In this case, it will be called TempConverter. You also need to select a minimum iOS version you want to support. In this case, the target version is iOS 9.1. Make sure the target version is either an older or same version of iOS that you will be using to run the app on. Click Next to continue.
Step 4
Now just confirm the project and solution name (making sure it is not the same name as a solution that already exists in your projects folder) as well as the project folder location and click Create.
Step 5
Once the new solution has loaded, Xamarin will automatically open a file called AppDelegate.cs. Don’t worry about this file for now as we won’t really be changing anything there. The two files that we will be working with are the Main.storyboard file (for adding the buttons, text labels, and text boxes) and ViewController.cs (for coding the functionality).
Double-click the Main.storyboard file to open it. It may take a minute to load. The storyboard is where you will add your user interface elements such as buttons, text boxes and text labels. Choose the iPhone device that you want to use as the preview for your storyboard eg. iPhone 6.
Step 6
In the Toolbox panel (use the search box to find and add the Toolbox to your layout if you don’t see it there), scroll down until you see Label (you can also search in the Toolbox for the Label element.
Drag a Label element on to the phone screen where you would like to place it.
Step 7
Change the Text value in the Properties panel (on the Widgets tab) to ‘Enter temperature in degrees:’.
Step 8
Drag the edges of the Label element to resize it so that you can see all of the text.
You can also change the colour of the text, the font and alignment (eg. align to center) from the Properties panel.
Step 9
Drag a Text Field element from the Toolbox on to the screen under the text label. Change its Placeholder text to ‘Temperature in degrees’. Resize the Text Field and center-align the text.
Step 10
Drag two Button elements on to the screen and resize them to fit their text. Change the first button’s text to ‘Convert to Celsius’ and the second button’s text to ‘Convert to Fahrenheit’.
Step 11
The last element to add is the text label which will display the result of the temperature conversion. Drag a Label element on to the screen and change its default Text to 0, change its Colour and Font size/style. You can also change the Alignment to center.
Step 12
Now we need to name each of the screen elements so that they can be accessed by the code. Firstly, click on the temperature text field and change its Name to tempTextField.
Step 13
Now give the ‘Convert to Celsius’ button the Name cButton.
Also set the Name of the ‘Convert to Fahrenheit’ button to fButton.
Step 14
Lastly, click on the text label which will display the conversion result and change its Name to resultLabel. Now is a good time to save the Main.storyboard file (Click File > Save).
Step 15
Now its time to do some coding. Open the ViewController.cs file. In this file, click inside the ViewDidLoad method and add the code highlighted below. This code will add a button touch event that will occur when the user touches to Convert to Celsius button. When we create the cButton.TouchUpInside event it will also automatically create a new method CButton_TouchUpInside which will contain the code that will convert a temperature to Celsius.
Step 16
We now need to also create a button touch event for the Convert to Fahrenheit button and a method that will contain its code.
Step 17
Now let’s add the code for the FButton_TouchUpInside method first. This method will be called when the Convert to Fahrenheit button is pressed by the user. Add the highlighted code below. Firstly, a float variable called temp is created to store the temperature value that the user enters into the text field as a float value. Then a variable called fResult will convert the temperature from Celsius to Fahrenheit and store the result as a float value. Lastly, the text on the resultLabel element will display the result and the text ‘degrees Fahrenheit’ at the end of the sentence eg. ’68 degrees Fahrenheit’.
Note: You may need to resize the fResult label element in the Main.storyboard file so that it can fit the result and text.
Step 18
We can now add the code for the Convert to CButton_TouchUpInside method to run the conversion when the Convert to Celsius button is pressed. Add the highlighted code to this method shown below. Then save your code (File > Save).
Step 19
Now go back to the Main.storyboard file and select the Text Field element. In the Properties panel and on the Widget tab, scroll down and change the Keyboard Type to Decimal Pad so that numbers with decimal place can be typed in and the most suitable keypad is displayed. Save the file.
Step 20
At this point, the app will work and will allow the user to type in a temperature (as a whole or decimal number) and convert it to either Celsius or Fahrenheit. However, after the user has typed in a number they should be able to hid the keyboard if it is no longer needed.
Before testing the app we will add a little piece of code that will allow the keypad to be dismissed by the user when it is no longer needed. To do this, go back to the ViewController.cs file and start typing the highlighted line of code (where it is shown below). As you start typing override touchesBegan you should see an auto-complete suggestion called TouchesBegan(NSSet touches, UIEvent evt). Press the Enter/Return key on your keyboard to auto-complete the line of code. This will create a new override method called TouchesBegan. Inside this method we will add some code to dismiss the keyboard.
As you start typing override touchesBegan you should see an auto-complete suggestion called TouchesBegan(NSSet touches, UIEvent evt). Press the Enter/Return key on your keyboard to auto-complete the line of code.
Add the following code inside the new override method called TouchesBegan to allow the keyboard to be dismissed when typing has been completed by the user. Then save the file.
Finishing up
All of the coding is done. Congratulations – you have made your first iOS app using Xamarin and the C# programming language! Remember to save your files.Now just select a type of iPhone model you would like to test this app on and click on the Build button to start testing/emulating the app.
And this is what the completed app should look like…
What next?
Test your app thoroughly. Are there any problems with your app? Does it crash under some circumstances? Is there any way it could be improved. Jump into the next tutorial to see how this app can be improved.
Sample code
You can download the sample code for the ViewController.cs file here:
using System;
using UIKit;
namespace TempConverter
{
public partial class ViewController : UIViewController
{
public ViewController (IntPtr handle) : base (handle)
{
}
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.e
cButton.TouchUpInside+= CButton_TouchUpInside;
fButton.TouchUpInside+= FButton_TouchUpInside;
}
void FButton_TouchUpInside (object sender, EventArgs e)
{
float temp = float.Parse(tempTextField.Text);
float fResult = temp * 1.8f + 32f;
resultLabel.Text = fResult.ToString () + " degrees Fahrenheit";
}
void CButton_TouchUpInside (object sender, EventArgs e)
{
float temp = float.Parse (tempTextField.Text);
float cResult = (temp - 32f) / 1.8f;
resultLabel.Text = cResult.ToString () + " degrees Celsius";
}
public override void DidReceiveMemoryWarning ()
{
base.DidReceiveMemoryWarning ();
// Release any cached data, images, etc that aren't in use.
}
public override void TouchesBegan (Foundation.NSSet touches, UIEvent evt)
{
base.TouchesBegan (touches, evt);
this.View.EndEditing (true);
}
}
}
