Make Barcode Scanner App Using Firebase ML Kit In Android Studio 2020(Complete Guide) With Source Code | Step By Step Tutorial

In this post, we're going to develop an android app that scans the barcode from the image and produce the required output.

This is the output after doing all the steps:

You can create your own QR Code from a barcode generator with custom data like putting a URL or a mail message etc.

The above one is a simple text QR Code.

The highlighted text in the above screenshot is the same output you get if you scan the above QR Code with Google Lens.

As I show it below:

So, Now let's make it.

Step 1: Add Firebase to your android project:

I recommend you to see how to add firebase to the android project in 5minutes to know how to add it or if you already add it then you can move on to 2nd Step.   

Step 2: Add this dependency for the ml kit android libraries to your app-level build.gradle file:

implementation 'com.google.firebase:firebase-ml-vision:24.0.1'implementation 'com.google.firebase:firebase-ml-vision-barcode-model:16.0.2'

and then click on Sync Now.

Step 3: Design the layout of the activity:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">
    <ImageView        android:id="@+id/image"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_above="@+id/selectImage"        android:layout_margin="30dp" />
    <Button        android:id="@+id/selectImage"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:text="Select Image !" />    <TextView        android:id="@+id/text"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/selectImage"        android:layout_margin="30dp"        android:textColor="@android:color/black"        android:textSize="16sp" /></RelativeLayout>

as shown below:

Step 4: Select Image from the device:

I recommend you to first go through the post on how to select or capture an image from the device before going further.

So now, let's open the image cropping activity to select the image on button click:

and now get the image by overriding onActivityResult method:

Step 5: Run the barcode detector and get the information:

There are 5 ways of getting a firebase vision image object:
(i)By Bitmap,
(ii)By media.image,
(iii)By ByteBuffer,
(iv)By ByteArray,
(v)By File on device

We're creating using file path(last option) if u want to know how to create from other option then comment down below:

private void scanBarCodeFromImage(Uri uri) {
    try {
        image = FirebaseVisionImage.fromFilePath(MainActivity.this, uri);        //If you know which barcode formats you expect to read,        // you can improve the speed of the barcode detector by configuring it to only detect those formats.

        //you can check all types of barcode from here http://www.barcode-generator.org/,

        FirebaseVisionBarcodeDetectorOptions options = new FirebaseVisionBarcodeDetectorOptions.Builder()
                .setBarcodeFormats(
                        FirebaseVisionBarcode.FORMAT_QR_CODE,                        FirebaseVisionBarcode.FORMAT_AZTEC)
                .build();        //pass the option to .getVisionBarcodeDetector(options); method        FirebaseVisionBarcodeDetector detector = FirebaseVision.getInstance()
                .getVisionBarcodeDetector();

       //run the detector on the vision image object

        detector.detectInImage(image)
                .addOnSuccessListener(new OnSuccessListener<List<FirebaseVisionBarcode>>() {
                    @Override                    public void onSuccess(List<FirebaseVisionBarcode> barcodes) {
                        for (FirebaseVisionBarcode barcode : barcodes) {
                            Rect bounds = barcode.getBoundingBox();                            textView.append("Bounds: " + bounds + "\n\n");
                            Point[] corners = barcode.getCornerPoints();                            textView.append("Corners: " + Arrays.toString(corners) + "\n\n");
                            String rawValue = barcode.getRawValue();                            textView.append("RawValue: " + rawValue + "\n\n");
                            int valueType = barcode.getValueType();                            textView.append("ValueType: " + valueType + "\n\n");                            //check all types of barcode from here http://www.barcode-generator.org/,

                            switch (valueType) {
                                case FirebaseVisionBarcode.TYPE_WIFI:
                                    String ssid = barcode.getWifi().getSsid();                                    String password = barcode.getWifi().getPassword();                                    int type = barcode.getWifi().getEncryptionType();                                    textView.append("Ssid: " + ssid + " ");                                    textView.append("Password: " + password + " ");                                    textView.append("Type: " + type + " " + "\n\n");                                    break;                                case FirebaseVisionBarcode.TYPE_URL:
                                    String title = barcode.getUrl().getTitle();                                    String url = barcode.getUrl().getUrl();                                    textView.append("Title: " + title + " ");                                    textView.append("Url: " + url + " " + "\n\n");                                    break;                            }
                        }
                    }
                })
                .addOnFailureListener(new OnFailureListener() {
                    @Override                    public void onFailure(@NonNull Exception e) {
                        // Task failed with an exception                        // ...                    }
                });
    } catch (IOException e) {
        e.printStackTrace();    }

}

Now run the app :)

If everything is done correctly then you see the excepted output.

You can see the full source code at GitHub.

If you face any problem or have any suggestion please comment it down we love to answer it.

Comment down what next topic you need a guide on? or Drop a message on our social media handle

 Happy coding and designing : )