QR Code Reader Android Kotlin Tutorial using ML Kit

QR Code has became very popular in India. Even small vendors accept digital payments, and we use any Payment App (Google Pay, PhonePe, PayTm) to scan a QR Code and pay them easily. And in your next android app project, you might want to add a QR Code Scanner. And that is why I am here with QR Code Reader Android Kotlin Tutorial.

In this tutorial we will use ML Kit to build a QR Code Scanner Application. If you want to know about what exactly we are going to build, then watch the video below.

You can actually put any kind of information in a QR Code; and for this example I’ve used URL.

What is QR Code?

As we already discussed, almost all digital app based payments in India uses QR Code; so I assume you’ve seen a QR Code already. It stands for Quick Response Code. QR Code is a type of Barcode; it is a two dimensional Bar Code. It contains black squares over a white background, and we can put some data in it that can be read by camera.

Below you can see a sample QR Code, and you can use this QR Code to test the application that you will build in this tutorial.

QR Code Reader Android Kotlin
QR Code Reader Android Kotlin

Building a QR Code Reader Android App

Now let’s build our application that can read information from a QR Code.

Pre-requisites

I will be using the following things, for this project.

  • ML-Kit Barcode Scanning – To scan the QR Code
  • Bottom Sheet – To display the information after reading from QR Code
  • CameraX – For creating camera that will read QR Code
  • Jsoup – To read URL Meta Data

Android Studio Project

Now let’s create our project. I have created a new project using an Empty Activity and the first step is adding required dependencies.

  • Open app level build.gradle file and add the following dependencies.

  • We also need to add Java8 compileOptions; so add the following inside android block.

  • Now you can sync the project.

Designing App’s UI

Scanner

We need camera that will scan the QR Code and I will create it inside MainActivity .

I’ve created the following UI Design.

QR Code Reader Android Kotlin
QR Code Reader Android Kotlin

To create the design like this, you can use the following XML code.

Everything is very simple and straightforward, you just need to see the <androidx.camera.view.PreviewView />  here, because I think this might be a new thing for you if you have not already used CameraX.

PreviewView  is for our Camera Preview.

Bottom Sheet

Once we have scanned the QR Code and got the information from it; we will show the information to a BottomSheet. And below is the design of my BottomSheet.

BottomSheet

For bottom sheet I’ve created a layout file named bottom_sheet_barcode_data.xml .

We have all the required designs ready now.

Building Camera

The first thing that we need in this app is the Camera. Because camera will read the QR Code. So let’s build the camera.

Camera Permission

  • Add Camera Permission in AndroidManifest.xml.

I’ve also added the internet permission, because we need it to fetch URL content.

  • To make things smaller, I am not asking Camera Permission in the code, but I will directly open the settings page, if the Camera Permission is not given.

  • It is not a good practice to do, so I would like you all to add the run time permission code in your project.
  • We will call the above checkCameraPermission()  function inside the onCreate()  of MainActivity .

Camera

Now let’s finally build our camera.

  • First we need to define these objects.

  • Then we will initialize these inside onCreate()  function.

  • Now we can get the cameraProvider, from cameraProviderFuture and then we can bind the camera preview to our PreviewView.

  • Here is the bindPreview()  function

Now you can run your application and you will see the camera preview. 

Scanning QR Code

We have the camera and now it is the time to check if our camera is pointed to a QR Code or not. Basically we want to read if there is a QR Code to read.

  • To achieve this thing, we need to create an ImageAnalysis.Analyzer .

  • Now, we have the URL that we read from the QR Code. We just need to show it. You can display it anywhere you want. I have used BottomSheet for it.
  • But before going to BottomSheet, we need to add this Analyzer to our Camera. We will do it inside bindPreview()  function.

  • First we have create an ImageAnalysis , using ImageAnalysis.Builder()  and then we set the analyzer  to it.
  • analyzer  is the instance of MyImageAnalyzer  that we just created.
  • Finally we passed the imageAnalysis  as the third parameter to bindToLifecycle()  function.

Displaying QR Code in BottomSheet

  • The bottom sheet design we have already created. And here is the class to display the URL in the bottom sheet.

  • Now we just need to use this BottomSheet in our Image Analyzer class.

  • You just need to pass fragmentManager  while creating analyzer in MainActivity .

And that’s it, you have successfully built your QR Code Reader Android Application using ML Kit.

QR Code Reader Android Kotlin Source Code

In case you are still confused or having some problem while building your QR Code Reader Android App, then here is my source code that is perfectly working.

So that is all for this QR Code Reader tutorial friends. I hope you enjoyed the tutorial and built your own QR Code Reader App. Feel free to leave your comments below if you have any query or question. Thank You ♥️

Leave a Comment