Barcode/QR Code Scanner And Encoder using PhoneGap, Android and Eclipse

How to use phonegap-plugins?

Hi all, in this tutorial I'll show you how to use android phonegap plugins with eclipse.
First create an android project using eclipse and phonegap. If you are unable to do this please go through Hello World! with PhoneGap, Android and Eclipse tutorial.
Here I have created a project called 'MyBarcodeScanner'.


So to use phonegap-plugins first you have to download it. Go to the following link given below and download the zip.
https://github.com/phonegap/phonegap-plugins
Now extract the phonegap-plugins-master.zip folder and open the it, go to the android directory, here you will find all the plugings which you can use in your application. For this application I have used BarcodeScanner plugin, so go to BarcodeScanner directory and the version I have used is 2.2.0 as I am using Cordova 2.7.0 (If you are using Cordova 2.2.0 or greater please use the 2.2.0 directory).
Now I will slow you how to add phonegap plugin to your project. 1. First you have to add a 'LibraryProject' into Eclipse. So go to File -> New -> Project -> Android -> Android Projects From Existing Code -> Next.

2. Now you have to browse the LibraryProject's location (i.e. /phonegap-plugins-master/Android-Sw/phonegap-plugins-master/Android/BarcodeScanner/2.2.0/LibraryProject). also I have checked copy projects into workspace.

3. Now right click on MyBarcodeScanner project go to properties. In the Android section under Library click the Add button and select the library i.e. CaptureActivity.


4. To use the plugin, move barcodescanner.js (/phonegap-plugins-master/Android/BarcodeScanner/2.2.0/assets/barcodescanner.js) to your project's www folder and include a reference to it in your html files.

5. Create a folder called 'com/phonegap/plugins/barcodescanner' within your project's src folder i.e. MyBarcodeScanner/src.


6. And copy the BarcodeScanner.java(/phonegap-plugins-master/Android/BarcodeScanner/2.2.0/src/com/phonegap/plugins/BarcodeScanner.java) file into that new folder (MyBarcodeScanner/src/com/phonegap/plugins/barcodescanner/BarcodeScanner.java).


7. In your MyBarcodeScanner/res/xml/config.xml file add the following lines inside the tag. <plugin name="Device" value="org.apache.cordova.Device"/> <!-- Used to initialize cordova class --> <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/> <plugin name="BarcodeScanner" value="com.phonegap.plugins.barcodescanner.BarcodeScanner"/>

8. Add the following activity to your AndroidManifest.xml file. It should be added inside the tag. <activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter></intent-filter> </activity> <!-- ZXing activities --> <activity android:name="com.google.zxing.client.android.CaptureActivity" android:screenOrientation="landscape" android:clearTaskOnLaunch="true" android:configChanges="orientation|keyboardHidden" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" android:windowSoftInputMode="stateAlwaysHidden" android:exported="false"> <intent-filter> <action android:name="com.phonegap.plugins.barcodescanner.SCAN"/> <category android:name="android.intent.category.DEFAULT"/> </intent-filter> </activity> <activity android:name="com.google.zxing.client.android.encode.EncodeActivity" android:label="@string/share_name"> <intent-filter> <action android:name="com.phonegap.plugins.barcodescanner.ENCODE"/> <category android:name="android.intent.category.DEFAULT"/> </intent-filter> </activity> <activity android:name="com.google.zxing.client.android.HelpActivity" android:label="@string/share_name"> <intent-filter> <action android:name="android.intent.action.VIEW"/> <category android:name="android.intent.category.DEFAULT"/> </intent-filter> </activity>

9. Also you need to add the following permission in your AndroidManifest.xml file. <uses-permission android:name="android.permission.CAMERA" />

Now create a file called index.html into yor www folder and add the following code inside it. <!--DOCTYPE HTML--> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"> <title>My Barcode/QR Code Scanner</title> <style> body{ background:#888888 none repeat scroll 0 0; } input[type='text']{ width:18em; border:1px solid black; } input[type='button']{ width:20em; border:1px solid black; color:#ffffff; font-family:"Times New Roman",Times,serif; font-size:0.9em; font-weight:bold; background:#737CA1; } </style> <script type="text/javascript" src="cordova-2.7.0.js"></script> <script type="text/javascript" src="barcodescanner.js"></script> <script type="text/javascript"> function scanCode(){ window.plugins.barcodeScanner.scan( function(result){ alert("Scanned Code: " + result.text + ". Format: " + result.format + ". Cancelled: " + result.cancelled); }, function(error){ alert("Scan failed: " + error); } ); } function encodeData(){ var data = document.getElementById("data").value; if (data != ''){ window.plugins.barcodeScanner.encode( BarcodeScanner.Encode.TEXT_TYPE, data, function(success){ alert("Encode success: " + success); }, function(fail){ alert("Encoding failed: " + fail); } ); } else{ alert("Please enter some data."); return false; } } </script> </head> <body> <h3>Barcode/QR Code Scanner And Encoder</h3> <input type="button" value="Scan Code" onclick="scanCode();"/><br/><br/> Data : <br/> <input type="text" name="data" id="data" /><br/><br/> <input type="button" value="Encode Data" onclick="encodeData();"/> </body> </html>

Now run the android project and you will get the following output given below.