Click here to Skip to main content
13,146,742 members (79,682 online)
Click here to Skip to main content
Add your own
alternative version

Stats

8.4K views
3 bookmarked
Posted 20 May 2016

Create "Counter Tap", A Simple Android Application using PhoneGap Build

, 14 Dec 2016
Rate this:
Please Sign up or sign in to vote.
Create a simple android application "Counter Tap" using PhoneGap Build with pure HTML, CSS, and Javascript, and also Dialog and Vibration plugins. Very simple application to count stuff. Step by step.

Introduction

In this article, we will create an Android application using PhoneGap Build. What we want to build is a simple counter application, with basic knowledge of HTML, CSS, and Javascript. Here, we also use basic PhoneGap plugins like dialog and vibration. This is what we want to build:

This article is for beginner audience.

In next section, we will create the application step by step from scratch. You can also download the source code here.

Background

Thanks to PhoneGap, we can create Android application using pure HTML, CSS, and Javascript easily. You can read more about PhoneGap at the official site.

We can test the code in our web browser (in device mode) or in our Android device using PhoneGap Developer. After we write the source code, and the source code is ready, we can build the application online using PhoneGap Build, and then we can download the APK and install it in our Android device.

Using the code

First of all, we create a folder, name it Counter Tap. In the folder, create three folders, imgcss, js, those are for image, css, and javascript files respectively. Then, create an XML file, name it config.xml. Then create an HTML file, name it index.html, this is first page of our application. In your code, you can use your own icon for the application, and your own background image.  

config.xml

Okay we go to the config.xml file. We can say this is the main file of our source code, we can declare the name of the application, icon of the application, the orientation (portrait or landscape) of the application, fullscreen mode, some plugins, and other stuff here. Now copy this code to your config.xml file.

<widget xmlns		    = "http://www.w3.org/ns/widgets" 

		xmlns:gap		= "http://phonegap.com/ns/1.0" 

		xmlns:android   = "http://schemas.android.com/apk/res/android"

		id				= "com.simpleappsagain.countertap" 

		version			= "1.0.0">
		
	<name>Counter Tap</name>
	
	<description>Simple application to count stuff.</description>

	<icon src="icon.png"/>
	
	<platform name="android">
		<preference name="fullscreen" value="true" />
		<preference name="orientation" value="portrait" />
		<preference name="phonegap-version" value="cli-5.1.1" />
	</platform>
	
	<gap:plugin name="org.apache.cordova.dialogs" />
	<gap:plugin name="org.apache.cordova.vibration" />
  
</widget>

In widget, you can see the id and version of application, you can use your own id and version of application.

Look at the name tag, we define the display name of our application. description tag is for the description of the application. the icon tag is for icon of our application. From this, the icon and display name of our application will look like this (after we build it online using PhoneGap Build and install it in our device).

Then we go to platform tag. We only need Android application for the target build, and we use three preferences in it. We want to make this application fullscreen and portrait. For the third preference, I prefer to use phonegap cli version 5.1.1, if we don't specify or write it, PhoneGap Build will automatically use the recent version of cli to build the application.

The last two, we want to use Dialog and Vibration plugins to our application here, so we write it. We use these plugins in Reset button, when we tap (or simply click) the Reset Button, the device will vibrate and show confirmation dialog. We will write the code to use it later. That's for the config.xml.

index.html and index.css

In index.html, we will put the background image, buttons, and the number, but before we do it, we have to make the page fit the device's screen size, so it's not possible to zoom the page, that's what we want. The template of index.html looks like this.

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" 

          content="user-scalable=no, 
          initial-scale=1, 
          maximum-scale=1, minimum-scale=1, 
          width=device-width" />
    <script type="text/javascript" src="phonegap.js"></script>
	
    <title>Counter Tap</title>
</head>

<body align="center">
    

	<script type="text/javascript">
		document.addEventListener('deviceready', onDeviceReady, false);
		function onDeviceReady() {

		}
	</script>
</body>

</html>

Look at the meta tag, I think it is clear about what it does.

Then, look at the phonegap.js over there. We don't have to include the file in our Counter Tap folder, we just write it there and initiate it using the javascript in body tag. When we build it, the file phonegap.js will be included automatically by PhoneGap Build. We have to write it if we want to use PhoneGap plugins in our application.

Next, we want to create the background image fix the screen size. Create file index.css in folder css, and copy this code. We actually create a css class.

.background-full {
	background: url('../img/background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	background-size: cover;
	min-height: 100%;
}

please note that, you must have a background image (background.jpg) in img folder. Then use this class in html tag like this.

<!DOCTYPE html>
<html class="background-full">

<head>
    <meta name="viewport" 

		  content="user-scalable=no, 
		  initial-scale=1, 
		  maximum-scale=1, minimum-scale=1, 
		  width=device-width" />
    <script type="text/javascript" src="phonegap.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	
    <title>Counter Tap</title>
</head>

<body align="center">

...

It will look like this (you can download this image and put it in your img folder).

Still nothing there but the background image. Now we will create the other elements. The index.html will look like this.

<!DOCTYPE html>
<html class="background-full">

<head>
    <meta name="viewport" 

		  content="user-scalable=no, 
		  initial-scale=1, 
		  maximum-scale=1, minimum-scale=1, 
		  width=device-width" />
    <script type="text/javascript" src="phonegap.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	
    <title>Counter Tap</title>
</head>

<body align="center">
	<div class="div-decount-reset-button">
		<input type="button" 

			   class="border-counter-button counter-button-decount teal" 

			   value='-1' 

			   onClick='decount()'>
			   
		<input type="button" 

		       class="border-counter-button counter-button-reset teal" 

			   value='RESET' 

			   onClick='reset()'>
	</div>
	
	<span class="running-number" id="running-number">
		0
	</span>
	
	<div class="div-counter-button">
		<input type="button" 

			   class="border-counter-button counter-button-count teal" 

			   value="COUNT" 

			   onClick="count()" >
	</div>
	
	<footer style="color: white; font-weight: bold;">
		Counter Tap
	</footer>
    
	<script type="text/javascript">
		document.addEventListener('deviceready', onDeviceReady, false);
		function onDeviceReady() {

		}
	</script>
	<script type="text/javascript" src="js/counter.js"></script>
</body>

</html>

Add extra style for the buttons and the counter number in index.css. We create and define pressed-button style, the color, the border, and shadow of the buttons here. Note that we use viewport size unit, viewport height (or vh) and viewport width (or vw) for sizing (100vh means 100% of viewport height), so the elements will automatically follow the defined size in index.css relative to your device viewport. 

.background-full {
	background: url('../img/background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	background-size: cover;
	min-height: 100%;
}

.running-number {
	font-family: 'Raleway', sans-serif;
	font-size: 30vh;
	font-weight: bold;
	text-align: center;
	color: white;
}

.div-decount-reset-button {
	margin: 5vh;
}
.div-counter-button {
	font-family: 'Raleway', sans-serif;
	font-size: 12vh;
	font-weight: bold;
	color: #08BBB7;
	text-align: center;
}

.counter-button-count {
	font-size: 5vh;
	position: relative;
	top: 0;
	margin: 2vh;
	padding: 15vh 30vw;
}
.counter-button-decount {
	position: relative;
	top: 0;
	font-size: 3vh;
	padding: 2vh 8vw;
}
.counter-button-reset {
	position: relative;
	top: 0;
	font-size: 3vh;
	padding: 2vh 15vw;
}

.border-counter-button {
	text-decoration: none;
	border: 0vh solid;
	border-bottom-width: 1vh;
	border-radius: 1vh;
	cursor: pointer;
	outline: none;
}

.counter-button-count.teal,
.counter-button-decount.teal {
	color: #fff;
	border-color: #04A5A1;
	background-color: #08BBB7;
}
.counter-button-reset.teal {
	color: #fff;
	border-color: darkred;
	background-color: red;
}

.counter-button-count:active,
.counter-button-decount:active,
.counter-button-reset:active {
	position: relative;
	top: 0.5vh;
}

That's it for the elements. Now, we can go further. We will write the logic of our application in js/counter.js.

Javascript

The logic of the application is in counter.js file, it's pretty simple. 

  1. Tap COUNT button, the number will be added by one.
  2. If the number is divisible by 10, change the number color to blue (color hex. #23126E), else white.
  3. Tap "-1" button, the number will be substracted by one (if the number is not 0).
  4. Tap RESET button, vibrate the device, show the (confirmation) dialog to reset the counter or not. If OK, reset the number to 0.

Create a javascript file in js folder, name it counter.js, and add this code.

var runningNumberElementId = 'running-number';
var counted = document.getElementById(runningNumberElementId).innerText;

// Tap COUNT button
function count() {
	counted = parseInt(counted) + 1;
	counterWithStyle(counted);
}

// Tap -1 button
function decount() {
	if(counted >= 1) {
		counted = parseInt(counted) - 1;
		counterWithStyle(counted);
	}
	else {
		counted = 0;
	}
}

// Tap RESET button
function reset() {
	// Vibrate for 100 ms
	navigator.notification.vibrate(100);
	navigator.notification.confirm('Reset counter?', 
                                   onConfirmReset, 
                                   'Reset', 
                                   'No,OK');
}
function onConfirmReset(button) {
	// Use the button index: No (1), OK (2)
	if(button === 2) {
		resetCounter();
	}
}

// Reset counter
function resetCounter() {
	counted = 0;
	document.getElementById(runningNumberElementId).innerHTML = counted;
}

// Change color
function counterWithStyle(counting) {
	if (counting % 10 == 0 && counting != 0) {
		document.getElementById(runningNumberElementId).innerHTML = "<font color='#23126E'>" + 
                                                                       counting + 
                                                                    "</font>";
	}
	else {
		document.getElementById(runningNumberElementId).innerHTML = counting;
	}
}

That's all. The source code is ready. Now we can build our application using PhoneGap Build. First, login to PhoneGap Build. There are two options to build the application, using a .zip file or .git repository. A .zip file is only available for private application. If you create a new account, you can try to upload .zip file; zip the source code, upload it, and PhoneGap will build the application for you, after that, you can download the APK and install it to your device.

 

You can also use this .git repository to build it (in open source tab), and click Pull from .git repository button. click Ready to build button and wait until you can donwload the APK, click Android icon.

 

Points of Interest

This article describes how to create a simple application using PhoneGap Build for beginners, step by step. Sometimes, beginners don't know how to start, even the official documentation is not so clear enough for beginners, because there is no complete practical example to try. I hope this simple article can help those who want to learn to create application using PhoneGap.

Remember, there are so many discussion about PhoneGap vs native development out there, but as a hobby, PhoneGap Build is a fun tool for mobile application development, especially for those who love Javascript, we can use Javascript framework like AngularJS, we can also use Bootstrap to create responsive application.

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Garbel Nervadof
Engineer
Indonesia Indonesia
-

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionTest in Browser Pin
Viadi20-May-16 18:14
memberViadi20-May-16 18:14 
AnswerRe: Test in Browser Pin
Garbel Nervadof20-May-16 18:50
professionalGarbel Nervadof20-May-16 18:50 
GeneralThanks Pin
Viadi20-May-16 16:05
memberViadi20-May-16 16:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170915.1 | Last Updated 15 Dec 2016
Article Copyright 2016 by Garbel Nervadof
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid