Saturday, May 21, 2022

QR-Code & Barcode Reader Android App

Nowadays Barcodes and QR Codes are widely used in a lot of mobile apps. In a QR Code, you can store information like text, SMS, email, URL, image, audio and a few other formats. In Android, you can extract the information stored in barcodes by using Google Vision Library. Even though there are a lot of other libraries available, google vision library is best to consider as it does not only provide barcode reading but also have other features like face detection, text detection.

In this article, we are going to learn how to use the google vision library by creating a simple movie ticket scanning app.

  1. Google Mobile Vision API
    Google Mobile Vision api helps in finding objects in an image or video. It provides functionalities like face detection, text detection and barcode detection. All these functionalities can be used separately or combined together.
- Advertisement -

This article aims to explain barcode detection with a real-time use case scenario. We can see a lot of barcode scanning apps used in supermarkets, theatres and hotels which scans a barcode and provides the user with the desired information. In this article, we’ll try to build a simple movie ticket scanner app that scans a barcode / QR code and displays the movie information to book a ticket.

The google vision library is a part of play services and can be added to your project’s build. gradle.

compile ‘com.google.android.gms:play-services-vision:11.0.2’

  1. Barcode Scanner Library
    Google provided a simple tutorial to tryout the barcode scanning library with a simple bitmap image. But when it comes to scanning a realtime camera feed for a barcode, things become difficult to implement as we need to perform barcode detection on camera video.

I have developed a simple barcode scanner library by forking the google vision sample. In this library, a few bugs were fixed and added other functionalities like callbacks when the barcode is scanned and an overlay scanning line indicator that can be used in your apps.

  1. How to Use the Barcode library
    Follow the below simple steps to include the barcode / qrcode library in your project.
  2. Add the androidhive barcode reader and google vision library to your app’s build.gradle file.

This article was written using Android Studio 3.0 Canary 9. The command compile is deprecated and replaced with implementation

build.gradle
dependencies {
// barcode reader library
implementation ‘info.androidhive:barcode-reader:1.1.5’

// google vision library
implementation 'com.google.android.gms:play-services-vision:11.0.2'

}

  1. Add the barcode camera fragment to your activity or fragment.
  1. Implement your Activity from BarcodeReader.BarcodeReaderListener and override the necessary methods.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.SparseArray;
import com.google.android.gms.vision.barcode.Barcode;
import java.util.List;

import info.androidhive.barcode.BarcodeReader;

public class MainActivity extends AppCompatActivity implements BarcodeReader.BarcodeReaderListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scan);
}

@Override
public void onScanned(Barcode barcode) {
    // single barcode scanned
}

@Override
public void onScannedMultiple(List<Barcode> list) {
    // multiple barcodes scanned
}

@Override
public void onBitmapScanned(SparseArray<Barcode> sparseArray) {
    // barcode scanned from bitmap image
}

@Override
public void onScanError(String s) {
    // scan error
}

@Override
public void onCameraPermissionDenied() {
    // camera permission denied
}

}

  1. Run your project and try to scan barcode or qrcode. The scanned result will be returned in onScanned() or onScannedMultiple() method.

3.1 Adding Scanning Overlay Indicator Line
We can see all the scanning apps generally adds an indicator line on the camera overlay to indicate the scanning progress is going on. To achieve this, I have added a reusable class in the same library which can be added to the camera screen.

To add the animating scanning line, add the info.syncsas.barcode.ScannerOverlay to same activity overlapping the camera fragment.


The library also contains a few other useful functionalities like auto flash, beep sound etc., Detailed information about the library can be found on its Github page.

  1. Creating New Project – Building Simple Ticket Scanning App
    As the barcode scanning library is already available, we’ll see how to use the library considering a real use case scenario. The app we are going to build not only explains the barcode scanning, but it also covers building the complex UI, making REST api calls to fetch the movie json and writing custom view classes.

Overall the app contains three screens. The first is a splash screen, the second is barcode scanning and the last one is to display the movie ticket information.

Below are the screenshots of the app.

Aasim Sheikh
Aasim Sheikhhttps://syncsas.com/
CTO at SyncSaS Technologies

Stay in Touch

To follow the best weight loss journeys, success stories and inspirational interviews with the industry's top coaches and specialists. Start changing your life today!

Related Articles