Tag Archives: element

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

Modify existing values in a PHP array

This tutorial explains how to modify existing values in a PHP array. It’s pretty simple – all you need to do is refer to the array and its index and then change that index’s value with another value.

Watch the video below and then scroll down to see the sample code.

Sample PHP code:

<?php
  // create a simple array with 12 elements inside it
  $months = array("January","February","March","April","May","June","July","August","September","October","November","December");
  
  // change the value of the second element in the array
  $months[1] = "Feb";

  // return the value of the second element in the arrray
  echo $months[1];
?>

Using colour gradients and patterns

The code below shows how to use linear and radial gradients to fill rectangle shapes.

The three shapes will look like this (linear gradient on top left, radial gradient on top right, image pattern on bottom left side):

Screen Shot 2015-05-08 at 6.53.39 pm

Watch the video below and then scroll down to see the sample code.

Here is the code:

<!DOCTYPE html>
<html>
<head>
 <title>Gradients and patterns</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
 <script>
 var patternImage = new Image();
 patternImage.src = "pattern.png";
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 var gradient = ctx.createLinearGradient(0,0,150,0); // x1, y1, x2, y2 
 gradient.addColorStop(0, "red");
 gradient.addColorStop(0.5, "yellow");
 gradient.addColorStop(1, "green");
 ctx.fillStyle = gradient;
 ctx.strokeStyle = "blue";
 ctx.fillRect(0,0,150,75);
 ctx.strokeRect(0,0,150,75);
 
 var gradient2 = ctx.createRadialGradient(350,100,0,350,100,200);
 // ctx.createRadialGradient parameters are x1, y1, r1, x2, y2, r2
 gradient2.addColorStop(0, "yellow");
 gradient2.addColorStop(1, "blue");
 ctx.fillStyle = gradient2;
 ctx.strokeStyle = "blue";
 ctx.fillRect(250,0,200,200);
 ctx.strokeRect(250,0,200,200);
 
 var pattern = ctx.createPattern(patternImage, "repeat");
 ctx.fillStyle = pattern;
 ctx.strokeStyle = gradient;
 ctx.lineWidth = 20;
 ctx.fillRect(20,150,200,200);
 ctx.strokeRect(20,150,200,200);
 }
 window.onload=draw;
 </script>
</head>
<body>
 <canvas id="myCanvas" width="500" height="400">
</body>
</html>

Next tutorial: Simple animations using JavaScript

Using the Get Element By Id method in JavaScript

The getElementById() method searches through an entire HTML document and looks for an element with whatever ID we specify as the parameter between the quotation marks. The syntax of the method looks like:

 document.getElementById('id goes here')

In the example below, the getElementById method looks for a paragraph that has the element ID of ‘paragraph’. If you’re not familiar with HTML elements (tags) and IDs such as <p>, <h1>, etc. then you will need to brush up on your HTML knowledge now. The paragraph example below contains an onclick event which runs the ‘change’ function to replace the paragraph text using the innerHTML method.

The innerHTML method is used to replace the content of an HTML element such as a paragraph by referring to the element’s ID.

Watch the video below and then scroll down to see the sample code.

This is what the code looks like. There are also some examples of HTML elements/tags being used to format a pagraph with bold/underlined/italic text and a large heading. Notice that when you click on these paragraphs and headings, the text does not change. Only the paragraph with the ID ‘paragraph’ will change its text when it is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Referencing elements</title>
 <script type="text/javascript">
 
 /* The getElementById() method searches through an entire HTML document and looks for an element with
 whatever ID we specify as the parameter between the quotation marks.
 The syntax is: document.getElementById('id goes here')
 In the example below, it looks for the paragraph element ID.
 If you're not familiar with HTML elements (tags) and IDs such as <p>, <h1>, etc. then you will need
 to brush up on your HTML knowledge now.
 The paragraph example below contains an onclick event which runs the 'change' function to replace the
 paragraph text.
 */ 
 
 function change(){
 var paragraph = document.getElementById('paragraph');
 paragraph.innerHTML = "You clicked here.";
 // innerHTML refers to what is inside the > < tags in the paragraph element which in this example
 // is the words "Click me".
 }
 
 
 </script>
 
</head>
<body>
<p>This is a regular paragraph.</p>
<p>This is another paragraph with <b>bold</b>, <u>underlined</u>, and <i>italic text</i>.</p>
<h1>This is a heading</h1>
 
<p id="paragraph" onclick="change();">Click me</p>
 
</body>
</html>

 

Next tutorial: Changing an image using the getElementById() method