Android Barcode Reader and Qr Code Scanner using Google Mobile Vision

Avaneesh Kumar
Cashify Engineering
3 min readJul 28, 2018

Google’s Vision API has replaced the ZXING QR Scanner that we were using earlier. Apart from barcode scanning, it serves multiple purposes including face detection.

Advantage over legacy ZXING scanner

Google vision API is faster. It can scan calendars and business cards.
I am attaching a QR code with a calendar event.

Calendar event QrCode

When we scan above QR code with vision API, we get the following:

BEGIN:VEVENT
SUMMARY:Cashify meet up
LOCATION:Gurgaon, India
URL:www.cashify.in
DESCRIPTION:Hello,We are live on the given date.
DTSTART:20180701T090000
DTEND:20180701T210000
END:VEVENT

Besides calendars, we can also scan contacts, driving licenses and more.

I have created a sample of the above mentioned facility.

How to use Barcode Reader Using Google Mobile Vision

1. Click the above link, download the project and import barcode-reader as module

2. Include the barcode reader dependency in app’s build.gradle

dependencies {
// google vision gradle
implementation 'com.google.android.gms:play-services-vision:15.0.2'
}

3. You can just launch the scanner activity by calling this method

Intent launchIntent = BarcodeReaderActivity.getLaunchIntent(this, true, false);
startActivityForResult(launchIntent, BARCODE_READER_ACTIVITY_REQUEST);

and get the result into onActivityResult:

protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);

if (resultCode != Activity.RESULT_OK) {
Toast.makeText(this, "error in scanning", Toast.LENGTH_SHORT).show();
return;
}

if (requestCode == BARCODE_READER_ACTIVITY_REQUEST && data != null) {
Barcode barcode = data.getParcelableExtra(BarcodeReaderActivity.KEY_CAPTURED_BARCODE);
Toast.makeText(this, barcode.rawValue, Toast.LENGTH_SHORT).show();
}

}

4. If you want to make your own activity, implement the activity from BarcodeReader.BarcodeReaderListener and override the necessary methods.

public class BarcodeReaderActivity extends AppCompatActivity implements BarcodeReaderFragment.BarcodeReaderListener {
private BarcodeReaderFragment mBarcodeReaderFragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_barcode_reader);
mBarcodeReaderFragment = attachBarcodeReaderFragment();
}

private BarcodeReaderFragment attachBarcodeReaderFragment() {
final FragmentManager supportFragmentManager = getSupportFragmentManager();
final FragmentTransaction fragmentTransaction = supportFragmentManager.beginTransaction();
BarcodeReaderFragment fragment = BarcodeReaderFragment.newInstance(true, false);
fragment.setListener(this);
fragmentTransaction.replace(R.id.fm_container, fragment);
fragmentTransaction.commitAllowingStateLoss();
return fragment;
}



@Override
public void onScanned(Barcode barcode) {
}

@Override
public void onScannedMultiple(List<Barcode> barcodes) {

}

@Override
public void onBitmapScanned(SparseArray<Barcode> sparseArray) {

}

@Override
public void onScanError(String errorMessage) {

}

@Override
public void onCameraPermissionDenied() {

}
}

Adding Barcode Reader in Fragment

In fragment the barcode reader can be added easily but the scanner listener barcodeReader.setListener() has to be set manually.

Check the example fragment code in BarcodeFragment.java and MainActivity.java

https://github.com/avaneeshkumarmaurya/Barcode-Reader/blob/master/app/src/main/java/com/notbytes/barcodereader/BarcodeFragment.java

Adding Scanner Overlay Scanning Indicator

The overlay animation indicator displays a horizontal line animating from top to bottom. This can be useful in showing cool animations to indicate scanning progress.

To use it, add the com.notbytes.barcode_reader.ScannerOverlay on top of barcode reader fragment using Relative or Frame layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout ...>
<fragment
android:id="@+id/barcode_fragment"
android:name="com.notbytes.barcode_reader.BarcodeReaderFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:auto_focus="true"
app:use_flash="false" />
<com.notbytes.barcode_reader.ScannerOverlay
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#44000000"
app:line_color="#7323DC"
app:line_speed="6"
app:line_width="5"
app:square_height="250"
app:square_width="250" />
</RelativeLayout>

Additional Options

XML attribute for Barcode Reader

auto_focus - boolean, turn on/off auto focus. Default is true

use_flash - boolean, turn on/off flash. Default is false

XML attribute for Scanner Overlay Indicator

square_width - Width of transparent square

square_height - Height of transparent square

line_color - Horizontal line color

line_speed - Horizontal line animation speed

JAVA Methods

  • Play beep sound

You can play the beep sound when a barcode is scanned. This code is usually called in onScanned() callback.

    @Override
public void onScanned(final Barcode barcode) {
Log.e(TAG, "onScanned: " + barcode.displayValue);
barcodeReader.playBeep();
});
}
  • Change beep sound

You can change the default beep sound by passing the file name. Your beep file should be in the project’s assets folder.

barcodeReader.setBeepSoundFile("shutter.mp3");
  • Pause scanning

The scanning can be paused by calling pauseScanning() method.

barcodeReader.pauseScanning();
  • Resume Scanning

The scanning can be resumed by calling resumeScanning() method.

barcodeReader.resumeScanning();

--

--