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:

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 this video for an introduction to the Barcode API.

You can also try out the Barcode codelab to learn how to integrate the Barcode API into your application.

A Practical Overview

If you did try out the Barcode codelab , you can also view the codebase 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 Android Studio
  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 :

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 :

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

Contributions

Contributions are welcome. Generally, contributions are managed by issues and pull requests.

  1. Submit an issue describing your proposed fix or feature.
  2. If your proposed fix or feature is accepted then, fork, implement your code change.
  3. Ensure your code change follows the accepted code style and structure.
  4. Ensure your code is properly tested.
  5. Ensure your commits follow the accepted commit message style
  6. Submit a pull request.

I’m glad you made it this far !

Wrapping Up

Check out the the library if you love to contribute or favorite it.
Contributions are welcome and I am looking forward to seeing interest on how best this can be.

I would love to know if this article helped anyone and I honestly want to see wonderful stuff it helped you churn out.
Thanks.
Belvi - I Beliv