Mobile Vision Barcode Scanner

QR codes have become ubiquitous in recent years. I am sure you’ve seen one in a newspaper advertisement or on a billboard. In layman’s terms, QR codes, like all other barcodes, are images that are designed to be read by machines. Usually, they represent a small string, such as a shortened URL or a phone number. The latest release of the Google Play services SDK includes the mobile vision API which, among other things, makes it very easy for Android developers to create apps capable of detecting and reading QR codes in real time. In this tutorial, I am going to help you get started with it, and introduce you to a library that harnesses these features and more for your usage.

Barcode Api - Overview

The Barcode API detects barcodes in real-time, on device, in any orientation. It can also detect multiple barcodes at once.

It reads the following barcode formats:

• 1D barcodes: EAN-13,
  EAN-8,
  UPC-A,
  UPC-E,
  Code-39,
  Code-93,
  Code-128,
  ITF,
  Codabar
• 2D barcodes: QR Code,
  Data Matrix,
  PDF-417,
  AZTEC

It automatically parses QR Codes, Data Matrix, PDF-417, and Aztec values, for the following supported formats:

• URL
• Contact information (VCARD, etc.)
• Calendar event
• Email
• Phone
• SMS
• ISBN
• WiFi
• Geo-location (latitude and longitude)
• AAMVA driver license/ID

Watch <a href="https://www.youtube.com/watch?v=kAoDW3gm8FM&feature=youtu.be" target="_blank">this video</a> for an introduction to the Barcode API.

You can also try out the <a href="https://codelabs.developers.google.com/codelabs/bar-codes" target="_blank">Barcode codelab</a> to learn how to integrate the Barcode API into your application.

A Practical Overview

If you did try out the <a href="https://codelabs.developers.google.com/codelabs/bar-codes" target="_blank">Barcode codelab</a> , you can also view the <a href="https://github.com/googlesamples/android-vision/tree/master/visionSamples/barcode-reader" target="_blank"> codebase </a> of a more advance example. Clone, import to your project and run to see the cool features this brings

CodeLab

Prerequisites

To follow this tutorial, you will need:

1. the latest version of <a href="https://developer.android.com/sdk/index.html" target="_blank">Android Studio</a>
2. an Android device with a camera

If reviewed the example shared, you probably know by now, the better promises of the mobile vision api. Well, when you build the second example, you would come up with something similar to :

<iframe width="100%" height="400" src="/img/mvb_barcode/example_vision.gif" frameborder="0" allowfullscreen></iframe>

With the MobileVisionBarcodeScanner , you can really play with these features and bundle that sample as a feature into your app.

What does the library support:

• Bitmap Scan
• Custom camera view powered by mobile vision api
• attributes to customise the custom camera view

Here's a demo :

<iframe width="100%" height="400" src="/img/mvb_barcode/lib_example.gif" frameborder="0" allowfullscreen></iframe>

including in your project :

add to root of build.gradle at the end of repositories

    allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

add the dependency

dependencies {
            compile 'com.github.KingsMentor:MobileVisionBarcodeScanner:v1.0'
    }

Library's Attributes.

To have more control over the custom view, the library provides these attibutes:

<attr name="gvb_show_text" format="boolean" />
        <attr name="gvb_draw" format="boolean" />
        <attr name="gvb_multiple" format="boolean" />
        <attr name="gvb_touch" format="boolean" />
        <attr name="gvb_auto_focus" format="boolean" />
        <attr name="gvb_flash" format="boolean" />
        <attr name="gvb_rect_colors" format="reference" />
        <attr name="gvb_code_format" format="enum">
            <enum name="all_format" value="0"></enum>
            <enum name="code_128" value="1"></enum>
            <enum name="code_39" value="2"></enum>
            <enum name="code_93" value="4"></enum>
            <enum name="code_bar" value="8"></enum>
            <enum name="data_matrix" value="16"></enum>
            <enum name="ean_13" value="32"></enum>
            <enum name="ean_8" value="64"></enum>
            <enum name="itf" value="128"></enum>
            <enum name="qr_code" value="256"></enum>
            <enum name="upc_a" value="512"></enum>
            <enum name="upc_e" value="1024"></enum>
            <enum name="pdf417" value="2028"></enum>
            <enum name="aztec" value="4029"></enum>

 </attr>

What are the attibutes for :

• gvb_draw - enable rect drawn around codes when scanning
• gvb_multiple - want the camera to return as many qr codes that was scanned. This works with gvb_touch attribute. it only returns result when the screen is clicked or touch
• gvb_touch - turn on touch listener for screen
• gvb_auto_focus - support auto focus
• gvb_flash - turn on flash
• gvb_rect_colors - arrays of colors to draw rect
• gvb_code_format - barcode format that should be support . Default is all_format

Note
these attributes can also be initialised from java code . We would look into that later

Using the Mobile Vision Powered Camera.

Step 1 - Add layout in xml:

<fragment
            android:id="@+id/barcode"
            android:name="com.google.android.gms.samples.vision.barcodereader.BarcodeCapture"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            app:gvb_auto_focus="true"
            app:gvb_code_format="all_format"
            app:gvb_flash="false"
            app:gvb_rect_colors="@array/rect_color" />

and this is rect_color in colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="color_green">#14808d</color>
    <color name="color_brown">#343838</color>
    <color name="color_orange">#f38a32</color>
    <color name="color_blue">#1479b7</color>
    <color name="divider_grey">#e4e4e5</color>

    <array name="rect_color">
        <item>@color/color_blue</item>
        <item>@color/color_brown</item>
        <item>@color/color_green</item>
        <item>@color/divider_grey</item>
        <item>@color/color_orange</item>
    </array>
</resources>

Step 2 - Initialise in java

BarcodeCapture barcodeCapture = (BarcodeCapture) getSupportFragmentManager().findFragmentById(barcode);
barcodeCapture.setRetrieval(this);

also make sure your java class implements BarcodeRetriever

public class MainActivity extends AppCompatActivity implements BarcodeRetriever {

...


    // for one time scan
  @Override
    public void onRetrieved(final Barcode barcode) {
        Log.d(TAG, "Barcode read: " + barcode.displayValue);
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this)
                        .setTitle("code retrieved")
                        .setMessage(barcode.displayValue);
                builder.show();
            }
        });


    }

    // for multiple callback
    @Override
    public void onRetrievedMultiple(final Barcode closetToClick, final List<BarcodeGraphic> barcodeGraphics) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                String message = "Code selected : " + closetToClick.displayValue + "\n\nother " +
                        "codes in frame include : \n";
                for (int index = 0; index < barcodeGraphics.size(); index++) {
                    Barcode barcode = barcodeGraphics.get(index).getBarcode();
                    message += (index + 1) + ". " + barcode.displayValue + "\n";
                }
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this)
                        .setTitle("code retrieved")
                        .setMessage(message);
                builder.show();
            }
        });

    }

    @Override
    public void onBitmapScanned(SparseArray<Barcode> sparseArray) {
        // when image is scanned and processed
    }

    @Override
    public void onRetrievedFailed(String reason) {
        // in case of failure
    }
}

as you can see, BarcodeRetriever interface handles the callback when a code is scanned successfully based on specified attributes.

Extras

• To scan a bitmap,

BarcodeBitmapScanner.scanBitmap(this, bitmap, Barcode.ALL_FORMATS, this);

• Set attributes from java - Use the BarcodeCapture instance to reference setter methods

barcodeCapture.setShowDrawRect(true);

Resources and Credits

• <a href="https://github.com/KingsMentor/MobileVisionBarcodeScanner" target="_blank"> MobileVisionBarcodeScanner Sample</a>
• <a href="https://codelabs.developers.google.com/codelabs/bar-codes" target="_blank">Barcode codelab</a>
• <a href="https://github.com/googlesamples/android-vision/tree/master/visionSamples/barcode-reader" target="_blank"> google mobile vision barcode sample</a>