Implementing Android Status bar notification in phonegap/cordova app.

This is a quick write up to demonstrate phonegap statusbar notification plugin in a cordova (formally phonegap) app.
I am going to run through steps for creating an android application utilizing phonegap.

Creating a Project
I am going to assume that you already have android SDK and Eclipse plugin installed. If not, please follow the developer guide to do so.
We will create an sample application, we are going to name it “phonegapstatusnotificationdemo”.

Importing Cordova
At this point we should have a sample android application. Now, we are going to import the cordova(phonegap) libraries in our application. At the time of this writing Cordova 2.2.0 is the latest version. You can download the library form their website.

After you download the zip file, open and locate “lib/android”, and extract the cordova-2.2.0.jar.

  • Place the jar file into “lib” folder in your Android project. This folder should already be in your class path. If not you may need to do it manually via project properties.
  • Also, find the “xml” folder in the zip file and place it under “res” folder in the android project. The xml folder contains the config.xml that has the phonegap configuration.
  • Create a folder named “www” inside “assets” folder in the android project as well.
  • Place the cordova-2.2.0.js file from the zip into the www folder you just created.

You are now set to use phonegap.

Updating the Activity
Since phonegap places the html as the view in the application, we have to do 2 things.
1. create the html file
2. Update the Activity to extend DroidGap and local the html from step 1.

We are going to do just that. Lets create a html file and place it in the “www” folder inside the “assets” folder in the android project.

  <html>
	<head>
		<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
	</head>

	<body>
		Hello World!
	</body>

</html> 

In your main activity, update it to extend the DroidGap.

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class MainActivity extends DroidGap {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.loadUrl("file:///android_asset/www/index.html");
	}

}

Now you can run your phonegap application on your device or emulator. You should see the “Hello World” text on a blank screen.

Using Statusbar Notification plugin
Now, lets use a Status notification plugin. These steps will be same for implementing other phonegap plugins also.
Phonegap plugin work in 2 parts.
1. Javascript: Plugin will have a javascript code that your application can call form your html or js.
The provided js will invoke the back end java code. You shouldn’t need to worry much about the inner workings of the plugin js code. But it is import to understand the framework so you can debug issues.

2. Java code: This is the code that phonegap plugin framework will call when this method is called from the javascript library code.

Today we are going to use the statusbar notificaiton plugin.
Lets grab the plug in code from github.
https://github.com/phonegap/phonegap-plugins/tree/master/Android/StatusBarNotification

README provides steps to import this plugin in your application. We are going to do just that.

Importing Plugin files
place the “.java” files into your android project src package. At the time of this writing there are two files (StatusBarNotification.java and StatusNotificationIntent.java). Make sure you update the package appropriately. I would encourage to use the package name used in these java files for simplicity.

Now, place the statusbarnotification.js into your “www” folder. At this time you can include this script in your index.html by placing the html below in the portion of the html

<script type="text/javascript" charset="utf-8" src="statusbarnotification.js"></script> 

In your res/xml/config.xml file, place the following script inside the section.

<plugin name="StatusBarNotification" value="com.phonegap.plugins.statusBarNotification.StatusBarNotification"/>

If you had placed the java files above in different package structure, be sure to change the value filed to appropriate location.
Since phonegap provides a default icons for notification, which is used in the java code, you will have to copy the png files from the plugin into your res/drawable folder. If you want different icon, just be sure to have those icons in the folder and change the reference in the java file. (Watch for “int icon = R.drawable.notification;” references, in StatusNotificationIntent.java)

So in your html file, whenever you want to show a notification, you can call the following javascript function.

window.plugins.statusBarNotification.notify("Put your title here", "Put your sticky message here");

.

You can checkout out my sample application on github (https://github.com/manijshrestha/PhonegapStatusNotificationDemo) that uses this plugin. If you have any questions/ enhancement request to this plugin feel free to PM me.

Thank you,

Advertisements

20 thoughts on “Implementing Android Status bar notification in phonegap/cordova app.

  1. Thanks for a great plugin. I am using the notification to inform the user of a file download be completed. Is there a way to open\launch that download file when the notification is clicked? Scott

  2. Hi Manij, Thanks a lot for this awesome tutorial.
    I tried your plugin and it works perfectly, but I want to remind the user on specific Dates, so I tried the Cordova’s LocalNotification plugin.
    I don’t know whether you tried it or not, but in case you did, I have a question…

    At your plugin, when we click on the notification, the app opens and the plugin is removed from the statusbar, unlike the other plugin … When i click on the notification, nothing happes! Neither the application opens, nor the notification is cleared from the bar.

    So, do you know how can the LocalNotification Plugin be modified to do this too ?

    Thanks a lot.

    1. Hi Rana, Thank you for your comment. I have not yet personally used the LocalNotification plugin. Since you mentioned, I would check it out soon and see if there is anything I can contribute to.
      Thank you,

  3. Dear Manij,

    I tried your demo, it worked fine. But I had a little problem in it. The notification was only being generated when I clicked the button. when I try to initiate the call by writing

    window.plugins.statusBarNotification.notify(“Sample Notification”, “something”);

    It doesn’t work. Please help.

    Thank you in advance.

  4. Dear Manij,
    I am using your plugin and it work great, but i wonder if it possible to redirect to a url when click on the notification rather than launch the apps?
    Thanks for you great plugin.

  5. Hi, I am quite new with phonegap..

    I really appreciate your contribution but I have tried to set up to my android deviced and I cant not get it working..

    I am using https://build.phonegap.com service. What are exactly the files that I have to upload? the www ziped folder? I have tried several ways and i can’t not get it to work.. please help!

  6. Sir so many error is coming…i am using cordova 3.5 and there r so many error like there is no plugin class….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s