Tag Archives: view

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

PIP Map Effect in Unity

In this tutorial we will look at how to use a picture-in-picture (PIP) effect to display a map in the top corner of the screen. The map allows a player to see where they are located in the game world and where nearby landmarks, objects or other players are.

The image below shows a game with a first person view as the main camera, and a PIP effect showing the player’s location on the game map in the top right corner of the screen.

A picture-in-picture (PIP) map in a first-person view game.
A picture-in-picture (PIP) map in a first-person view game.

Watch the video below to see how you can add a PIP map effect to your game in Unity.

In this scene you can’t actually see the red sphere in the first person view because the character is inside the sphere. However, if you were using a third person view, you would probably see the sphere. In this case, you would want to hide the sphere on the first person camera and only show it on the map camera. This is possible to achieve with the use of layers which is what we will look at in the next tutorial.

Tip: You might want to have the object that represents a blip on the map to be higher so that it is still visible if a character goes inside a building or cave or under another object.

Go further

See if you can work out how to have the map camera follow the player around so that their blip doesn’t disappear off the map. This is something you will need to know if you have large scenes where the camera does not cover the entire scene.

Character Controllers in Unity

Unity has built-in character controllers that allow you to jump right into your game so that you can see what it will look like when the user is playing it. Unity includes a first person and third person controller. In this tutorial, you will learn how to add a first person controller to your scene.

You can easily add a first person character controller to your game scene using the Characters asset package. Adding a first person character controller to your game is a great way of seeing what your world looks like up close as a character.

First person character controller in Unity.
First person character controller in Unity.

It is not until you see the world from a character’s perspective that you might realise that some hills are too steep, or there are too many trees, or the grass is too thick. You can then go and make any necessary changes to your project.

Note: The frame rate of this video is very low. The actual quality of the game is much better than it looks!

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.