How to create a QR code reader on Android with Android Studio

Legacy Approach with XML

In this entry we will see how to create a QR code reader in Android in our applications; to get a clearer idea of how a QR reader works, there are currently several QR readers in Android that you can find on Google Play and in this section, we are going to implement one, although, for readers, you can use the camera app.

Developing a QR reader in our Android application with the Play Service library

As you well know, Google offers a significant amount of functionalities that translate into several APIs developed by Google itself that it makes available to us developers through its libraries, as well as Play Services and support, among many others; to do the most common tasks such as creating an application to read a QR code, it is not necessary to use a third-party library or package; the one provided by Google, which does all the work for us, is enough.

Update Note: The `com.google.android.gms:play-services-vision` library has been deprecated. For new implementations, Google recommends using ML Kit Barcode Scanning (`com.google.mlkit:barcode-scanning` or `com.google.android.gms:play-services-mlkit-barcode-scanning` for additional Google Play Services capabilities) in combination with CameraX for camera integration.

Creating a custom QR reader (created by ourselves using Android Studio as a software development environment or IDE) is quite simple with Android and we only need to include an external library which corresponds to Google Play services: com.google.android.gms:play-services-vision, but before that let's see what it is, how a QR code works and how we can use it in our Android applications and websites:

QR Scanner: How to decipher a QR code?

With the help of a mobile phone we can retrieve this information just by pointing the camera at the QR code and that is the idea and what we will do in the next section of this entry where we will dedicate ourselves to detailing how to create a QR reader with Android.

Developing our own QR code reader in Android

Finally we come to the area of interest which is to create our QR code reader in Android; first we must add the necessary dependency in our build.gradle.

Adding the dependency in the build.gradle file in Android Studio

We open our build.gradle file and add the following dependency:

implementation 'com.google.android.gms:play-services:15.0.2'

Update Note: The play-services dependency is too broad. It is better to use only the necessary modules. Also, version 15.0.2 is very old. The Google Play Services Vision library is deprecated. If you insist on using a similar version of Vision API, you would look for a more recent and specific one like com.google.android.gms:play-services-vision:X.Y.Z (where X.Y.Z is a recent version before its total deprecation) or, even better, migrate to ML Kit Barcode Scanning and CameraX.

The previous dependency gives us access not only to the vision API but to the entire platform that Google Play offers us, as in our case of interest is only to read a QR code, we can use the following dependency in our build.gradle:

implementation 'com.google.android.gms:play-services-vision:15.0.2'

You must keep in mind that versions change from one day to the next; you can find the latest version in the official documentation at the following link:

Set Up Google Play Services

Update Note: Using 15.+ for dependency versions is not a recommended practice in production projects, as it can introduce unexpected compatibility and compilation issues. It is better to specify an exact version or use ranges with caution.

For the package to update automatically we could do something like implementation 'com.google.android.gms:play-services-vision:15.+'

Configuring the rest of the application for our QR reader

The manifest file to handle permissions

In our manifest we place the use of the camera:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.desarrollolibre.qr.qr">
    <uses-permission android:name="android.permission.CAMERA" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

The view of our QR code reader

With our dependency already configured, we can now go to our activity and/or fragment and create the necessary objects, events and configurations to have our own QR reader; but first we must configure the layout of the activity or fragment:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center_horizontal"
        android:padding="8dp">
        <SurfaceView
            android:id="@+id/camera_view"
            android:layout_width="640px"
            android:layout_height="480px"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true" />
    </LinearLayout>
</LinearLayout>

Configuring the code reader and camera in our activity

And in our activity or fragment we must create a BarcodeDetector object. This class allows recognizing barcodes and QR codes - which is our case of interest - through the device's camera and returning a SparseArray object with the decoded data of the analyzed QR. In addition to all this, we create the camera source and the associated resolution:

        // create the qr detector
        barcodeDetector =
                new BarcodeDetector.Builder(getContext())
                        .setBarcodeFormats(Barcode.QR_CODE)
                        .build();
        // create the camera source
        cameraSource = new CameraSource
                .Builder(getContext(), barcodeDetector)
                .setRequestedPreviewSize(640, 480)
                .build();

The CameraSource object to get camera frames

We specify the SurfaceView object of our layout; this object is responsible for mirroring or reflecting what we are seeing through the device's camera on our layout surface:

cameraView = (SurfaceView) v.findViewById(R.id.camera_view);

Now we specify the listeners that allow controlling the camera's life cycle:

        // camera life cycle listener
        cameraView.getHolder().addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                // verify if the user granted camera permissions
                if (ContextCompat.checkSelfPermission(getContext(), android.Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED) {
                    try {
                        cameraSource.start(cameraView.getHolder());
                    } catch (IOException ie) {
                        Log.e("CAMERA SOURCE", ie.getMessage());
                    }
                } else {
                    Toast.makeText(getContext(), getResources().getString(R.string.error_camara), Toast.LENGTH_SHORT).show();
                }
            }
            @Override
            public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
            }
            @Override
            public void surfaceDestroyed(SurfaceHolder holder) {
                cameraSource.stop();
            }
        });

An important point of the previous code is to start the camera once our surface is drawn with cameraSource.start(cameraView.getHolder());.

Finally, the event that will return the result provided by the QR detection and processing is prepared; when there is a response, barcodes.size() will return a value greater than zero:

 // prepare the QR detector
        barcodeDetector.setProcessor(new Detector.Processor<Barcode>() {
            @Override
            public void release() {
            }
            @Override
            public void receiveDetections(Detector.Detections<Barcode> detections) {
                final SparseArray<Barcode> barcodes = detections.getDetectedItems();
                if (barcodes.size() != 0) {
barcodes.valueAt(0).displayValue.toString();
                 // do something
            }
barcodeDetector.release();
        });

With barcodes.valueAt(0).displayValue.toString(); we obtain the data returned by the QR, which can be text, an integer or a URL depending on how we configure our QR code.

Permissions in Android 6 and above

Update Note: The ActivityCompat and AppCompatActivity classes in the original code are from the support libraries (android.support.*). In modern projects, these have been replaced by AndroidX (androidx.core.app.ActivityCompat and androidx.appcompat.app.AppCompatActivity, respectively). Permission handling follows a similar pattern, but it is always good to consult the latest AndroidX documentation.

As of Android 6, Google created a new permission scheme which is requested from the user when they need to use a function of said permission(s)...

...therefore, it is not enough to just include the dependency in our AndroidManifest, we must also request the permission itself from the Java code of our Android application.

So, when building our surface we place the following code:

// camera life cycle listener
cameraView.getHolder().addCallback(new SurfaceHolder.Callback() {
   @Override
   public void surfaceCreated(SurfaceHolder holder) {
       // verify if the user granted camera permissions
       if (ActivityCompat.checkSelfPermission(QRActiviy.this, Manifest.permission.CAMERA)
               != PackageManager.PERMISSION_GRANTED) {
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
               // we check the Android version to be at least M to show
               // the camera request dialog
               if (shouldShowRequestPermissionRationale(
                       Manifest.permission.CAMERA)) ;
               requestPermissions(new String[]{Manifest.permission.CAMERA},
                       MY_PERMISSIONS_REQUEST_CAMERA);
           }
           return;
       } else {
           try {
               cameraSource.start(cameraView.getHolder());
           } catch (IOException ie) {
               Log.e("CAMERA SOURCE", ie.getMessage());
           }
       }
   }
   @Override
   public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
   }
   @Override
   public void surfaceDestroyed(SurfaceHolder holder) {
       cameraSource.stop();
   }
});

The code is relatively simple, we verify if the permission was granted with checkSelfPermission and with shouldShowRequestPermissionRationale we show the dialog to request the permission.

Finally the code looks like this:

import android.Manifest;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.net.Uri;
import android.os.Build;
import android.support.v4.app.ActivityCompat; // Use androidx.core.app.ActivityCompat
import android.support.v7.app.AppCompatActivity; // Use androidx.appcompat.app.AppCompatActivity
import android.os.Bundle;
import android.util.Log;
import android.util.SparseArray;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.webkit.URLUtil;
import com.google.android.gms.vision.CameraSource; // Deprecated, use ML Kit Barcode Scanning
import com.google.android.gms.vision.Detector; // Deprecated, use ML Kit Barcode Scanning
import com.google.android.gms.vision.barcode.Barcode; // Deprecated, use ML Kit Barcode Scanning
import com.google.android.gms.vision.barcode.BarcodeDetector; // Deprecated, use ML Kit Barcode Scanning
import java.io.IOException;
public class MainActivity extends AppCompatActivity {
    private CameraSource cameraSource;
    private SurfaceView cameraView;
    private final int MY_PERMISSIONS_REQUEST_CAMERA = 1;
    private String token = "";
    private String tokenanterior = "";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        cameraView = (SurfaceView) findViewById(R.id.camera_view);
        initQR();
    }
    public void initQR() {
        // create the qr detector
        BarcodeDetector barcodeDetector =
                new BarcodeDetector.Builder(this)
                        .setBarcodeFormats(Barcode.ALL_FORMATS)
                        .build();
        // create the camera
        cameraSource = new CameraSource
                .Builder(this, barcodeDetector)
                .setRequestedPreviewSize(1600, 1024)
                .setAutoFocusEnabled(true) //you should add this feature
                .build();
        // camera life cycle listener
        cameraView.getHolder().addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                // verify if the user granted camera permissions
                if (ActivityCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA)
                        != PackageManager.PERMISSION_GRANTED) {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                        // we check the Android version to be at least M to show
                        // the camera request dialog
                        if (shouldShowRequestPermissionRationale(
                                Manifest.permission.CAMERA)) ;
                        requestPermissions(new String[]{Manifest.permission.CAMERA},
                                MY_PERMISSIONS_REQUEST_CAMERA);
                    }
                    return;
                } else {
                    try {
                        cameraSource.start(cameraView.getHolder());
                    } catch (IOException ie) {
                        Log.e("CAMERA SOURCE", ie.getMessage());
                    }
                }
            }
            @Override
            public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
            }
            @Override
            public void surfaceDestroyed(SurfaceHolder holder) {
                cameraSource.stop();
            }
        });
        // prepare the QR detector
        barcodeDetector.setProcessor(new Detector.Processor<Barcode>() {
            @Override
            public void release() {
            }
            @Override
            public void receiveDetections(Detector.Detections<Barcode> detections) {
                final SparseArray<Barcode> barcodes = detections.getDetectedItems();
                if (barcodes.size() > 0) {
                    // get the token
                    token = barcodes.valueAt(0).displayValue.toString();
                    // verify that the previous token is not equal to the current one
                    // this is useful to avoid multiple calls using the same token
                    if (!token.equals(tokenanterior)) {
                        // save the last processed token
                        tokenanterior = token;
                        Log.i("token", token);
                        if (URLUtil.isValidUrl(token)) {
                            // if it is a valid URL, open the browser
                            Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(token));
                            startActivity(browserIntent);
                        } else {
                            // share in other apps
                            Intent shareIntent = new Intent();
                            shareIntent.setAction(Intent.ACTION_SEND);
                            shareIntent.putExtra(Intent.EXTRA_TEXT, token);
                            shareIntent.setType("text/plain");
                            startActivity(shareIntent);
                        }
                        new Thread(new Runnable() {
                            public void run() {
                                try {
                                    synchronized (this) {
                                        wait(5000);
                                        // clear the token
                                        tokenanterior = "";
                                    }
                                } catch (InterruptedException e) {
                                    Log.e("Error", "Waiting didn't work!!"); // Corrected message
                                    e.printStackTrace();
                                }
                            }
                        }).start();
                    }
                }
            }
        });
    }
}

QR code reader for Kotlin

All the previous implementation but instead of Java it would be for Kotlin, all our code would look like this:

 private var cameraSource: CameraSource? = null // NULL corrected to null
    private var cameraView: SurfaceView? = null // NULL corrected to null
    private val MY_PERMISSIONS_REQUEST_CAMERA = 1
    private var token = ""
    private var tokenanterior = ""
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        cameraView = findViewById<View>(R.id.camera_view)
        initQR()
    }
    fun initQR() {
        // create the qr detector
        val barcodeDetector = BarcodeDetector.Builder(this)
                .setBarcodeFormats(Barcode.ALL_FORMATS)
                .build()
        // create the camera
        cameraSource = CameraSource.Builder(this, barcodeDetector)
                .setRequestedPreviewSize(1600, 1024)
                .setAutoFocusEnabled(true) //you should add this feature
                .build()
        // camera life cycle listener
        cameraView!!.holder.addCallback(object : SurfaceHolder.Callback {
            override fun surfaceCreated(holder: SurfaceHolder) {
                // verify if the user granted camera permissions
                if (ActivityCompat.checkSelfPermission(this@MainActivity, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                        // we check the Android version to be at least M to show
                        // the camera request dialog
                        if (shouldShowRequestPermissionRationale(
                                        Manifest.permission.CAMERA))
                        ;
                        requestPermissions(arrayOf(Manifest.permission.CAMERA),
                                MY_PERMISSIONS_REQUEST_CAMERA)
                    }
                    return
                } else {
                    try {
                        cameraSource!!.start(cameraView!!.holder)
                    } catch (ie: IOException) {
                        Log.e("CAMERA SOURCE", ie.message)
                    }
                }
            }
            override fun surfaceChanged(holder: SurfaceHolder, format: Int, width: Int, height: Int) {}
            override fun surfaceDestroyed(holder: SurfaceHolder) {
                cameraSource!!.stop()
            }
        })
        // prepare the QR detector
        barcodeDetector.setProcessor(object : Detector.Processor<Barcode> { // Añadido override
            override fun release() {} // Añadido override
            override fun receiveDetections(detections: Detector.Detections<Barcode>) { // Añadido override
                val barcodes = detections.getDetectedItems()
                if (barcodes.size() > 0) { // Movido el acceso a barcodes.valueAt(0) dentro del if
                    // get the token
                    token = barcodes.valueAt(0).displayValue.toString()
                    // verify that the previous token is not equal to the current one
                    // this is useful to avoid multiple calls using the same token
                    if (token != tokenanterior) {
                        // save the last processed token
                        tokenanterior = token
                        Log.i("token", token)
                        if (URLUtil.isValidUrl(token)) {
                            // if it is a valid URL, open the browser
                            val browserIntent = Intent(Intent.ACTION_VIEW, Uri.parse(token))
                            startActivity(browserIntent)
                        } else {
                            // share in other apps
                            val shareIntent = Intent()
                            shareIntent.action = Intent.ACTION_SEND
                            shareIntent.putExtra(Intent.EXTRA_TEXT, token)
                            shareIntent.type = "text/plain"
                            startActivity(shareIntent)
                        }
                        Thread(object : Runnable {
                            override fun run() {
                                try {
                                    synchronized(this) {
                                        wait(5000)
                                        // clear the token
                                        tokenanterior = ""
                                    }
                                } catch (e: InterruptedException) {
                                    Log.e("Error", "Waiting didn't work!!") // Corrected message
                                    e.printStackTrace()
                                }
                            }
                        }).start()
                    }
                }
            }
        })
    }

In the previous code, you can notice that when a QR code is detected by the mobile, a series of steps are performed, ranging from obtaining it using barcodes.valueAt(0).displayValue.toString();, validation (and release with the Thread) to avoid reading the same QR consecutively (the QR reader always continues running regardless of whether it has processed a QR or not) and then using URLUtil.isValidUrl(token) we verify if the obtained token is a URL, and in that case it opens the predefined browser of our phone, otherwise it simply shows the dialog to share content through the different applications we have on our phone.

When running the application, we will get a screen like the following:

It is worth remembering that once we obtain the code we can do whatever we want, generally if we are creating a custom application (See how to create QR codes in CodeIgniter), it is likely that we want to send it to our application to validate it or simply show it to the user through a dialog or open a browser as we specified above.

You can use the following QR that returns the URL of this Blog:

An important point is that you can use the same functionality to read barcodes in Android, the same app core is used and in this way you can create a very powerful app that serves as a reader or QR code reader through the implementation of the library and the device's camera.

Next step, learn how to use Room Database (SQLite) in Android Studio with Kotlin