Installing the Barcode Plugin for PhoneGap Android

Some folks are having problems getting the Barcode Scanner plugin up and running for PhoneGap Android so I figured I'd write a more detailed explanation on how to get it up and running.

First you'll want to go download the Library Project part from GitHub. You'll want to use the code from github as I've modified it slightly so that it is responds to the correct intent.

Once downloaded you'll want to create a new Android project from existing source in Eclipse. The project name shows up as CaptureActivity but I'm going to change it to BarcodeLibrary which is more descriptive.

but don't click on Finish yet. Click the Next button...

and select the highest level of Android SDK you have installed before clicking Finish.

Now that you've created the library project which contains the barcode scanning code you'll want to right mouse click on the BarcodeLibrary project and select Properties. In the Properties dialog, select the Android tab and ensure the Is Library checkbox is click. The benefit of doing things this way is you can link this library into multiple Android projects without needing to copy a bunch of source around.

Now that we've got our library setup let's add it to our project. Right click on your PhoneGap project, in my case it is called BarTest, and select Properties.

In the Android tab under the library section click the Add button.

In the Project Selection dialog select BarcodeLibrary.

Now our application can use the BarcodeLibrary project so we can click OK.

Let's now add in the BarcodeScanning plugin code. Under the assets/www directory copy in the barcodescanner.js file from github. Under src, right click and create a new package com.phonegap.plugins.barcodescanner then copy in the BarcodeScanner.java file from github.

So were all set now right? Well know we forgot one thing. We need to add a line for our plugin under the res/xml/plugins.xml file so let's open that up now and add this line after the last <plugin/> tag but before the </plugins> line.

<plugin name="BarcodeScanner" value="com.phonegap.plugins.barcodescanner.BarcodeScanner"/>

Okay, so were good now. Well no, there is one more bit to take care of. Open up your AndroidManifest.xml file so we can add some new activities that will take care of the scanning and encoding. You'll need to paste these activity lines inside the <application/> tag.

<activity android:name="com.google.zxing.client.android.CaptureActivity"

    android:screenOrientation="landscape"

    android:configChanges="orientation|keyboardHidden"

    android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

    android:windowSoftInputMode="stateAlwaysHidden">

  <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>

Update: With later versions of PhoneGap the CAMERA permission was removed as it was not required. However, for the barcode scanner it is. So add the following permissions line:

<uses-permission android:name="android.permission.CAMERA" />

Alright, finally we are all setup. But how does one call the BarcodeScanner? Well we provide two main piece of functionality.

Scan

window.plugins.barcodeScanner.scan( function(result) {
        alert("We got a barcode\n" +
                  "Result: " + result.text + "\n" +
                  "Format: " + result.format + "\n" +
                  "Cancelled: " + result.cancelled);
    }, function(error) {
        alert("Scanning failed: " + error);
    }
);

Encode

window.plugins.barcodeScanner.encode(BarcodeScanner.Encode.TEXT_TYPE, "http://www.nytimes.com", function(success) {
        alert("encode success: " + success);
      }, function(fail) {
        alert("encoding failed: " + fail);
      }
    );

I've put together a small example html (and css) page which will be listed below that you can use to test the BarcodeScanner.



If you have problems with the Barcode Scanner the best place to ask questions is over on the PhoneGap Google Group where I check multiple times per day for questions I can answer.