Apache Cordova Hello World example for Android platform in Eclipse.

This tutorial explains about how to create, build, and run Apache Cordova Hello World program for Android platform in Eclipse. Building mobile application that runs on more than one platform (ie. Android, iOs, Windows, etc,…) is made simplified using Apache Cordova framework that too just using HTML, CSS and JavaScript. When using Cordova, you don’t need to implement the application on each platform’s language.

Requirement :

1) Cordova CLI

            i) 1.9.5 of Git for the Windows platform

            ii) Node.js

2) Latest Android SDK. For installing SDK, you can go through my earlier tutorial.
In this example, Installed Android 5.11 (API 22), Android SDK Platform (API 22), Latest Android SDK Tools, Android SDK Platform Tools, Android SDK Build Tools

android sdk

3. Eclipse

4. Java 1.7 or latest (Java 1.8 is used in this example)

 

You can develop Cordova android application with any of the following tools.

a) Platform-centered shell tools (Each platform will have a separate Cordova distribution)

b) Cordova CLI ( cross-platform)

c) CLI and Eclipse

In this tutorial, we will develop Hello World app with the help of both Cordova CLI & Eclipse. It is more comfortable when using both CLI and Eclipse for developing cordova android applications.

Steps to Develop Cordova Hello World app:

1) Install Cordova CLI

To install CLI, follow the below steps:

         i) Get npm utility at https://nodejs.org/download/ and install

         ii) Download git client at  http://git-scm.com/download/win and install

         iii) Install cordova using npm using the command

                               npm install -g cordova

         iv)  Include Android SDK tools and Platform tools directories in windows path.

For more details on  how to install Cordova CLI, please visit  earlier tutorial 

Now let us start  to create Hello World app for Android Platform using cordova.

2) Creating CordovaHelloWorldApp

To create CordovaHelloWorldApp, issue the following command, inside any directory (for eg.  f:\Cordova\Demo>) where you want to create app structure

cordova create helloworldapp net.javaonline.cordova.example.helloworldapp CordovaHelloWorld
Creating a new cordova project.

now helloworldapp folder is created inside f:\Cordova\Demo

Directory  contents  of    F:\Cordova\Demo\helloworldapp:

 1,021 config.xml
 <DIR> hooks
 <DIR> platforms
 <DIR> plugins
 <DIR> www  

You can see config.xml under helloworldapp directory and index.xml under www folder. Both files can be modified according to your need. Initially platforms directory will be empty.

3) Adding Platform to HelloWorld App

As we said earlier, cordova allows to create apps and  build  them on multiple platforms without any code change for each platform. Just running a single line command will add platform. You need to specify atleast on target platform to implement the application.

To add android platform, please issue the below command in the command prompt.

F:\Cordova\Demo\helloworldapp>cordova platform add android

Output of the above command

<p style="text-align: justify;">Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: net.javaonline.cordova.example.helloworldapp
Name: CordovaHelloWorld
Activity: MainActivity
Android target: android-22
Copying template files...
Android project created with cordova-android@4.0.0
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
npm http GET https://registry.npmjs.org/cordova-plugin-whitelist
npm http 304 https://registry.npmjs.org/cordova-plugin-whitelist
Installing "cordova-plugin-whitelist" for android</p>
When issue the above command, Cordova project for Android platform is created in the path <strong>F:\Cordova\Demo\helloworldapp\platforms\android</strong>  

4) Importing the Project in Eclipse:

Now let us import the above project (CordovaHelloWorld) in Eclipse using File->New->Others->Android->Android Project from Existing code OR Import->Android->Existing Android Code Into Workspace

Select the folder F:\Cordova\Demo\helloworldapp\platforms\android

Two projects CordovaHelloWorld, MainActivity-CordovaLib are displayed that are to be imported. Check on both project as shown in the image then Finish

import cordova helloworld app and cordova lib

Now the below two projects are imported

1. CordovaHelloWorld

2. MainActivity-CordovaLib

The Project Structure for the CordovaHelloWorld project will be

Cordova Helloworld Project Structure
Open the MainActivity.java

You may get get the error, CordovaActivity cannot be resolved to a type
The above error occurs because of non-availability of mainactivity-cordovalib.jar in the project MainActivity-CordovaLib

Please check the jar inside the project MainActivity-CordovaLib  under bin folder

If not found, please compile the project. Now the jar  will be created and the error will go.

MainActivity-CordovaLib jar

 

5) Creating HelloWorld.html and modifying  config.xml of CordovaHelloWorld project

In this example, i have created HelloWorld.html by copying the existing index.html and modified as given below.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Cordova Hello World App</title>
        <style>
        /* Div at Center of the screen */
        #myDiv{
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    margin-top: -50px;
		    margin-left: -50px;
		    width: 100px;
		    height: 100px;
			}

        </style>

    </head>
    <body>
        <div>
            <h1>Apache Cordova Hello World</h1>
            <div id="myDiv">
                <p> Hello World at Center of the Mobile Screen</p>
            </div>
        </div>
    </body>
</html>

Open config.xml and change the line <content src=”index.html” /> to <content src=”HelloWorld.html” /> so that HelloWorld.html is opened when running the project.

<?xml version='1.0' encoding='utf-8'?>
<widget id="net.javaonline.cordova.example.helloworldapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>CordovaHelloWorld</name>
    <description>
        An Apache Cordova Hello World application
    </description>
    <author>
        VKJ
    </author>
    <content src="HelloWorld.html" />
    <plugin name="cordova-plugin-whitelist" version="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

5) Compiling the Project with CLI:

Complile the project using cordova CLI

f:\Cordova\Demo\helloworldapp>cordova build

output of the above command :

Running command: f:\Cordova\Demo\helloworldapp\platforms\android\cordova\build.bat
ANDROID_HOME=F:\Software\Android\android-sdk
JAVA_HOME=C:\Java\jdk1.8.0_05
Running: f:\Cordova\Demo\helloworldapp\platforms\android\gradlew cdvBuildDebug -b f:\Cordova\Demo\helloworldapp\platforms\android\build.gradle -Dorg.gradle.daemon=true
...........
...........

BUILD SUCCESSFUL

Total time: 1 mins 2.004 secs
Built the following apk(s):
f:\Cordova\Demo\helloworldapp\platforms\android\build\outputs\apk\android-debug.apk

6) Running the Project with Emulator:

For running the above project,  you need to have an Android device or Android Virtual Device (Emulator).

Configure Emulator :

As you have installed Android SDK,  Android SDK manager will be available in the Eclipse tool bar. If not available in the tool bar, open Windows->Customs perspective-> Command Groups Availability-> Select Android SDK and AVD Manager from the available command groups.

              AVD Manager

    Create an Android Virtual Device (AVD) an Emulator using AVD manager
i) Select Android Virtual Device Manager in the tool bar.
ii) Click on Create

iii) Enter AVD Name (here testavd2),  select any available device and other details like target, CPU/ABI , etc..   then ok and start emulator.

emulator start

create avd

 

 

Now run the CordovaHelloWorld project in Eclipse with Emulator

Run the project

Output :

Output HelloWorld1

 

 

Reference :  Apache Cordova Android Platform Guide

 

You may also like

Leave a Reply

Be the First to Comment!