Add plugin to the Android app

You cannot directly access the system feature in your PhoneGap app to extend its functionality.

PhoneGap provide various plugins that allow accessing features like – camera, geolocation, contacts, battery status etc.

The plugins are written in native language for each platform e.g. Java for Android, Objective-C for IOS, etc. It is accessed by JavaScript in PhoneGap project.

You can easily add plugin using NodeJS.

Plugin implementation is different for each platform.

In this tutorial, I am adding the battery-status plugin to PhoneGap android app. That gives battery level status of the device.

To deploy the application I am using PhoneGap Build.

Demo App Download

Create App
Add plugin
Plugin Implementation
Deploy
Conclusion

1. Create App

Download and install Nodejs. Open Nodejs console.
Navigate to the directory where you want to create an application.

F:\phonegap>

Execute following command in Nodejs console.

F:\phonegap>cordova create myapp

Here, myapp is the name of the project.

Add Platform

Navigate to project directory myapp and execute the command cordova platform add android --save to add Android platform.

F:\phonegap>cd myapp
F:\phonegap\myapp>cordova platform add android --save

Add files

Copy config.xml from project root to www/ directory and copy cordova.js from platforms\android\platform_www\cordova.js to www/ directory.

You can learn PhoneGap application setup in more details from here.

2. Add plugin

For the demonstration purpose, I am adding the battery-status plugin.

Navigate to project root directory and execute cordova plugin add cordova-plugin-battery-status command from Nodejs console.

F:\phonegap\myapp>cordova plugin add cordova-plugin-battery-status

You can find the added plugin in platforms/android/platform_www/plugins/ directory.

Copy the plugins directory from platforms/android/platform_www/plugins/ to www/ directory.

Configure

Open www/config.xml and define the added plugin with <plugin name="cordova-plugin-battery-status" spec="1" />

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.phonegapapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 <name>PhoneGap App</name>
 <description>
 A sample application to demonstrate plugin in PhoneGap. 
 </description>
 <author email="yssyogesh@makitweb.com" href="https://makitweb.com">
 Makitweb
 </author>
 <content src="index.html" />

 <plugin name="cordova-plugin-battery-status" spec="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>

From here you can find other plugins details.

3. Plugin Implementation

Access the plugin from the JavaScript.

www/index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />
 <title>PhoneGap App</title>
</head>
<body>
 
 <button onclick='getBatterystatus()' >Get Battery status</button><br>
 <span id='status'></span>

 <!-- Script -->
 <script type="text/javascript" src="cordova.js"></script>
 <script type="text/javascript">
 window.addEventListener("deviceready", onDeviceReady, false);

 function onDeviceReady() {
 
  // Trigger when battery charge percentage reaches critical charge threshold
  window.addEventListener("batterycritical", onBatteryCritical, false);

  // Trigger when battery charge percentage reaches the low charge threshold
  window.addEventListener("batterylow", onBatteryLow, false);
 }

 function onBatteryCritical(status) {
  alert("Battery Level Critical " + status.level + "%\nRecharge Soon!");
 }

 function onBatteryLow(status) {
  alert("Battery Level Low " + status.level + "%");
 }

 // Get Battery charge percentage
 function getBatterystatus(){
  window.addEventListener("batterystatus", onBatteryStatus, false);
 }
 function onBatteryStatus(status) {
  alert("Level: " + status.level + " isPlugged: " + status.isPlugged);
  document.getElementById("status").textContent = "Level: " + status.level + " isPlugged: " + status.isPlugged;
 }

 </script>
</body>
</html>

Find more detail about this plugin implementation here.

4. Deploy

Open PhoneGap build in your web browser and log in to your account.
Create a zip of www/ files and upload it.

Click on Ready to Build button.
Now download the Android app either by clicking Android icon or by QR code.

Demo App

5. Conclusion

Plugins are written in native language and access by JavaScript in PhoneGap project.

Add plugin to your PhoneGap project to extend the functionality of your Apps.

Add plugin to the Android app – PhoneGap

Contents

1. Create App

2. Add plugin

3. Plugin Implementation

4. Deploy

5. Conclusion