Tag Archives: add

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 a Details screen to the List app for iOS with Xamarin

In this tutorial, we will look at how to extend the iOS List app we made in the previous tutorial by adding a Details screen that will display more details about item the user has selected from the list.

This is what the app will look like…

detailsscreen

Note: The title bar of the app will normally display and should be presented when the app is tested on an actual iOS device, but a bug in the iOS Simulator used here prevents the title bar from showing.

Step 1

Drag a Navigation Controller from the Toolbox on to your storyboard.

image3

Right-click and Delete the Root View Controller that is not required (you may have to delete twice).

image4

Step 2

Hold down the Control (Ctrl) key while clicking and dragging from the Navigation Controller to the Table View screen. Then select Root.

image5

Step 3

Drag a View Controller from the Toolbox on to your storyboard next to the main screen.

image6

Step 4

Add an ImageView element and a Label element to your screen. The default Text value for the label can be set to City Name. You also need to give both elements a name. Set the Name value for the Image View to cityImageView and the Name value for the label to cityNameLabel.

image7
When you give the ImageView or Label element a name you will see a yellow warning icon in the Name field. Click this icon and then type in DetailsViewContoller and press the Enter key to generate a new class and codebehind for this screen.

image8

Step 5

Now Control-click (Crl + click) and drag from the row on the main screen to the new details screen and select Show. This means that when the user selects a city from the list, they will be taken to the city details screen.

image9

You can also double-click on the main screen’s title to change it.

image10

Step 6

Click on the arrow between the main screen and details screen. On the Properties panel, set the Identifier value to DetailsSegue. Remember its name because it will be used in the code.

image11

 

Step 7

Open the CitiesViewController.cs file and scroll down to the City class. We need to add a new property called ImagePath which will contain the image for each city in the class.

image12

 

Step 8

Right-click the project folder and select Add > New Folder. Name this folder Images.

image13

Now right-click the Images folder and click Add > Add Files from Folder.

image14

Browse for the folder containing your images and then click Open.

image15

Select the desired images and then click OK.

image16

Select Copy the file to the directory and Use the same action for all selected files. Then click OK.

image17

Step 9

Go back to the CitiesViewController.cs file and for each city in the cityList, add the lines highlighted below to specify the ImagePath for each city’s image. Remember to add a comma to the end of the line before the ImagePath line (see the commas at the end of lines 22 and 31).

image18

Step 10

Go to the DetailsViewController.cs file and add the public City selectedCity; line to the DetailsViewController : UIViewController class. Save the file.

image19

 Step 11

Now you need to add a PrepareForSegue override method. You can add this method after the GetCell method. Start typing public override PrepareForSegue and then select the PrepAreForSegue method from the list by double-clicking it or pressing Enter to autocomplete.

image20

Step 12

Add the following code to the new PrepareForSegue method. This will check if the segue is the DetailsSegue (in other words, if the user tapped one of the rows from the table on the main screen that takes them to the details screen). Then it will get the relevant data from the selected row to be displayed on the details screen.

image21

Step 13

Back in the DetailsViewController.cs file, add a public override ViewWillAppear method. To do this, start typing public override ViewWillAppear and then select that method from the list.

image22

Step 14

Inside the new ViewWillAppear method (which runs as soon as the second screen loads), add the following highlighted lines of code (replacing any existing default code inside the method). This will set the label text to display the name of the selected city and will also set the ImageView to display the image representing the selected city.

image23

All done! Make sure you save your files and then you can test your app!

You can extend this app by adding more properties to each City item so that the Details page can display more information about a city such as points of interest, activities, and even its location on a map.

In the next tutorial we will look at how to add thumbnail image previews to each row in the list.

Play audio in an iOS app with Xamarin

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:

ia_app

Step 1 

Open Xamarin and click File > New Solution. Then select iOS App and SingleView App as the project template. Click Next.

ia1

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.

ia2

Step 3

When the solution opens, right-click on the project folder. Select Add > New Folder.

ia3

Give the new folder the name Sounds.

ia3b

Step 4

Right-click on the new Sounds folder and select Add > Add files from folder.

ia4

Step 5

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

ia4b

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.

ia5

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.

ia5b

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).

ia6

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.

ia7
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.

ia8
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.

ia9
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
ia10
Click the image to see a larger version.

That’s it! Now go and test the app!

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

Adding more screens to an iOS app

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…

iosmultiscreenapp

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).

ims1

Step 2

Give your app a name, select a minimum supported iOS version and click Next.

ims2a

Confirm the project and solution names, the project folder location and click Create.

ims2b

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.

ims3

Step 4

Drag a Navigation Controller anywhere onto the storyboard. It should look like this…

ims4

Step 5

Right-click the Root View Controller and click Delete.

ims5

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).

ims6

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.

ims7

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.

ims8

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.

ims9

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.

ims10

Lastly, double-click on the main screen’s title so you can rename it.

ims11

That’s it! Now you can test out your app.

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);
    }
  }
}

Adding sound to a game in PlayCanvas

This tutorial explains how to add sound effects and background music to your game in PlayCanvas. You can add sounds that can be heard from anywhere in the game or attach sounds to objects that can only be heard when your character is near them in the game.

You can also add sounds that automatically play and loop in the background and you can also control when sounds play and stop using code. Using code to control sound will be explained in the next tutorial. Watch the video below to see how to add sound to your game.

South Of The Border by Audionautix is licensed under a Creative Commons Attribution licence (https://creativecommons.org/licenses/by/4.0/)
Artist: http://audionautix.com/

Arrays in PHP

An array is a structured data type that contains a number of related data items. It is kind of like a list eg. $months = array(0,1,2,3,4,5); creates an array that contains 6 different numbers.

Each item in the array has an index number which represents its position in the array. Indexing begins from 0 which means that the first value in an array will have an index of 0, the second value will have an index of 1, the third value will have an index of 2, and so on.

This tutorial explains how to create arrays in PHP and how to add elements and view elements in arrays. You will also learn how to add more items to an existing array using the array_push function.

In the video tutorial you are also introduced to print_r and var_dump. Here are the differences between echo, print, print_r, and var_dump:

  • echo – outputs all of the parameters. It is a language construct, not a function.
  • print – is mostly the same as echo. However, print has a return value of 1 meaning it can be used in expressions whereas echo has a void return type.
  • print_r – displays information about a variable or array that is readable by humans.
  • var_dump – prints out a detailed ‘dump’ of a variable or array. A dump includes information such as the type of variable or array and its size. A dump also includes the type and size of individual elements in an array. var_dump provides more detail that print_r does. More information can be found here.

Sample PHP code:

<?php
  // create a simple array with 6 elements inside it
  $months = array('January','February','March','April','May','June');

  // use array_push to add 1 or more items to the array
  array_push($months,'July','August','September','October','November','December');

  // return the value of the twelfth element in the array
  echo $months[11];

  // display the values in the array and their key
  print_r(array_values($months));

  // display the values in the array as well as the size of the array
  // and the size of each element in the array
  var_dump(array_values($months));
?>

PHP Manual references:

Layers in Unity

In this tutorial we will look at how to use layers in Unity. Layers are quite useful if you want to make some objects invisible to different cameras or players or if you want to ignore light or cameras on some layers. Watch the video to see how you can work with layers in Unity.

Please note that this tutorial continues on from the previous tutorial: Adding a PIP Map Effect in Unity.

Cameras in Unity

This tutorial explains how to add cameras to your 3D game project in Unity. Cameras allow you to see scenes from different views and you can also attach cameras to the players in your game so that they see different views eg. first person view. Scroll down to watch the video.

A camera setup with the Camera Preview in Unity.
A camera view in the game preview mode
A camera view in the game preview mode

 

Watch the video below to see how you can add cameras to your own game project.

Adding terrain, trees, grass and water to your game

This tutorial explains how to add terrain to your 3D game environment in Unity. You will also learn how to edit the terrain and add textures to it, as well as how to add trees, shrubs, grass and water to the terrain.

To add textures, trees, grass and water to your terrain, you will need to import assets into your Unity project – this is also covered in the video. Scroll down the page to watch the video.

A basic terrain with textures, trees and water
A basic terrain with textures, trees and water (in Scene view)
A basic terrain being navigated in Play mode (using lower quality preview settings)
A basic terrain being navigated in Game view (using lower quality preview settings)

After watching this video, you will see just how easy it is to add terrain to your game environment like in the examples above.

If you find that Unity is running very slow, then reduce the amount of trees and grass in the environment. Lots of grass and trees can make Unity run slower. Note that the environment will not be fully rendered in Scene or Game view so the quality will not appear as high as it will be in the fully rendered game.

The image below shows how grass is rendered in front of a player in first person view.

Grass rendered in first person view.
Grass rendered in first person view.

How to apply materials, shaders and textures to objects in Unity

This video tutorial explains how to create materials in Unity so that you can change the colour of 3D objects. The video also explains how to use shaders and image textures textures in Unity.

Before you watch the video, here is a brief rundown of the differences between materials, shaders and textures:

  • Materials contain properties and textures. Materials can be directly applied to a 3D object.
  • Shaders dictate which properties and which textures that a material can have. Shaders are not directly applied to models but are instead applied to materials.
  • Textures are also applied to materials. Textures are flat images that can be wrapped around 3D objects. These images often contain repeating patterns such as a brick wall.

The images below show three different materials. The first material has a standard shader applied to it. The second material has a specular shader applied to it for increased shininess. The third material has a diffuse shader and a brick wall texture applied to it.

Standard shader with red colour.
Standard shader with red colour.
Specular shader with red colour.
Specular shader with red colour.
Diffuse shader with brick wall image texture.
Diffuse shader with brick wall image texture.

 

Connecting joints in Maya

This video tutorial explains how to connect joints in Maya when working with skeletons, and also how to add bones between joints. The video also gives an introduction to the parent-child relationship in Maya. If you haven’t already watched the video on creating skeletons, then click here to watch it first.

After connecting one joint to another joint in Maya, you will notice the parent-child relationship (hierarchy) update when viewing the list of different joints in the Outliner (click on Windows > Outliner).

Joint parent-child relationship in Outliner view.
Joint parent-child relationship in Outliner view.

Creating and animating 3D text in Maya

This video explains how to add text to a scene and then animate it in Maya. You can manipulate text in the same way you manipulate many other 3D objects in Maya – you can move (translate), rotate, scale, set keyframes or even animate along a path.

Watch the video below to find out how to create and animate 3D text in Maya.