Skip to main content

Start an android activity from cordova plugin


We all need to start an android activity from a cordova plugin. Here is a small and complete code to start an activity from cordova plugin

1. Install plugman to create cordova plugin
npm install -g plugman
2. Create cordova plugin using plugman
plugman create --name PluginName --plugin_id com.example.sample.plugin --plugin_version 0.0.1

N.B : plugin id never start with Uppercase
Now PluginName directory will be created. Plugin structure will be

> PluginName/

> |- plugin.xml

> |- src/

> |- www/PluginName.js

3. Add android platform to plugin
plugman platform add --platform_name android
Now plugin structure will be

> PluginName/

> |- plugin.xml

> |- src/android/PluginName.java

> |- www/PluginName.js

4. Now create a java file named NewActivity.java in src/android diretory

This activity will be shown using our plugin. Write sample activity in NewActivity.java

package com.example.sample.plugin;
   
import android.app.Activity;
import android.os.Bundle;
   
public class NewActivity extends Activity {
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        String package_name = getApplication().getPackageName();
setContentView(getApplication().getResources().getIdentifier("activity_new", "layout", package_name));
    }
}
5. Now create layout file activity_new.xml in src/android diretory 

This is the layout file for our new activity

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingBottom="16dp"
     android:paddingLeft="16dp"
     android:paddingRight="16dp"
     android:paddingTop="16dp"
     tools:context="com.example.sample.plugin.NewActivity">
   
     <TextView
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:textAppearance="?android:attr/textAppearanceLarge"
         android:text="New Activity"
         android:id="@+id/textView"
         android:layout_alignParentTop="true"
         android:layout_alignParentLeft="true"
         android:layout_alignParentStart="true"
         android:layout_marginTop="77dp" />
 </RelativeLayout>

6. Now edit PluginName.java in src/android 

Now we need to handle the request and start our new activity.

package com.example.sample.plugin;
   
import android.content.Context;
import android.content.Intent;
   
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaWebView;
import org.apache.cordova.CordovaInterface;
   
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
   
public class PluginName extends CordovaPlugin {
   
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {
        super.initialize(cordova, webView);
    }
   
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        Context context = cordova.getActivity().getApplicationContext();
        if(action.equals("new_activity")) {
            this.openNewActivity(context);
            return true;
        }
        return false;
    }
   
    private void openNewActivity(Context context) {
        Intent intent = new Intent(context, NewActivity.class);
        this.cordova.getActivity().startActivity(intent);
    }
}

7. Now edit PluginName.js in www directory 

Now create new method to call to start our new activity.

var exec = require('cordova/exec');
   
function plugin() {
   
}
   
plugin.prototype.new_activity = function() {
exec(function(res){}, function(err){}, "PluginName", "new_activity", []);
}
   
module.exports = new plugin();

8. Now edit plugin.xml

Now we need to specify our files to plugin and make necessary changes in cordova AndroidManifest.xml file

<?xml version='1.0' encoding='utf-8'?>
<plugin id="com.example.sample.plugin" version="0.0.1"
   xmlns="http://apache.org/cordova/ns/plugins/1.0"
   xmlns:android="http://schemas.android.com/apk/res/android">
<name>PluginName</name>
    <js-module name="PluginName" src="www/PluginName.js">
    <clobbers target="PluginName" />
    </js-module>
    <platform name="android">
    <config-file parent="/*" target="res/xml/config.xml">
    <feature name="PluginName">
    <param name="android-package" value="com.example.sample.plugin.PluginName" />
    </feature>
    </config-file>
    <config-file target="AndroidManifest.xml" parent="/manifest/application">
       <activity android:label="New Activity" android:name="com.example.sample.plugin.NewActivity"></activity>
    </config-file>
    <config-file parent="/*" target="AndroidManifest.xml"></config-file>
    <source-file src="src/android/PluginName.java" target-dir="src/com/example/sample/plugin" />
    <source-file src="src/android/NewActivity.java" target-dir="src/com/example/sample/plugin" />
    <source-file src="src/android/activity_new.xml" target-dir="res/layout"/>
    </platform>
</plugin>

9. Now create a cordova project
cordova create CordovaProject com.example.sample.cordovaproject "Cordova App" 

10. Add android platform to your cordova project
cordova platform add android

11. Now add your plugin
cordova plugin add your-plugin-local-path
eg: cordova plugin add "C:\PluginName"

12. Add a button to index.html in www directory
<!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">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
            <button id = "new_activity">New Activity</button>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
 </html>

13. Add click handler for new button in index.js in www/js directory 

When our button is clicked, we will call our plugin method to start our new activity
var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');
        console.log('Received Event: ' + id);
        document.getElementById("new_activity").addEventListener("click", new_activity);
    }
};
   
app.initialize();
   
function new_activity() {
    SmartHomePlugin.new_activity();
}

14. Now run this app in android phone
cordova run android
If all these steps are success and when we click New Activity button, our new activity will show up. 

Popular posts from this blog

Implementing Client Side WebRTC using Sipml5 javascript

Step 1:

Download and require Sipml5 library function.

Step 2:

Initialize sipml5 Engine in your web page :

var readyCallback = function(e) {
// function called when sipml is successfully initialised.
createSipStack(); // calling this function to create sip stack(see below)
};

var errorCallback = function(e) {
// function called when error occured during sipml initialisation.
};

SIPml.init(readyCallback, errorCallback);

Step 3:

Create Sip Stack :-
Sip Stack is an object that must be created before making/receiving call and sms. Creating Sip stack is an asynchronous process, so you need to create an event listener function to get state change notification.

var sipStack;

function EventListener(e) {

/*
* e.type ;type of event listener
* e.session ; current event session
* e.getSipResponseCode() ; event response code
* e.description ; event description
*/

if(e.type == 'started'){
// successfully started the stack.
register();
} else if(e.type == 'i_new_call'){
// when new incoming call comes.
      …

Setup Asterisk 13 with FreePBX 13 in CentOS 7

Launch CentOS 7 AWS Ec2 InstanceLog in to your aws consoleGo to ec2 management page and click Launch Instance on Instance pageIn Choose AMI step, go to AWS MarketPlace tab and search CentOS 7 on search field. List of centos 7 ami's will be available.Select CentOS 7 (x86_64) ami which is free tier eligible. Select your instance type and click configure instance. Keep default values from Configure Instance to Add Tags stepsIn configure security group, create a security group which allow minimum ports openSSH : port 22HTTP : port 80Custom UDP Rule : 10000-20000 (if you are giving RTP ports 10000-20000)Custom UDP Rule : 5060 (ChanSIP port)Custom TCP Rule : 5060 (ChanSIP Port)Click Launch Instance. Select your key file and accept terms to launch instance.
Setup CentOS Server SSH into newly created CentOS server with username centos and your key file.Update all existing packagessudo yum update -yNow start http service(you can access your server via browser by going to your server ip addres…

MULTIPLE FILE UPLOAD USING AJAX WITH PROGRESS BAR

Uploading multiple files using ajax makes a pleasant feeling to the user. It makes even more happier if upload progress status is printed with percentage.

            In this blog, you will make a file upload form using ajax with file upload progress bar.

Prerequisites :

1) Javascript supported browser
2) LAMP Server / XAMPP Server

Code :

index.html

<!DOCTYPE html>
<html> <head><title>Multiple File Upload using Ajax</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body><div><form action="action.php" method="post" enctype="multipart/form-data" id="multiple-upload-form"><input type="button" id="select-file-btn" value="Select Files" onclick="document.getElementById('files').click(); return false;&qu…