QR Code Reader Android App In Kotlin using ML Kit

In this tutorial article we will use ML Kit to build a QR Code Scanner Application .You can actually put any kind of information in a QR Code;

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.

What is QR code used for?

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.

Building a QR Code Reader Android App

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

Pre-requisites for making qr code reader app in kotlin

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.

Step 1 - Open app level build.gradle file and add the following dependencies.

    //ML Kit Barcode Scanning

    implementation 'com.google.mlkit:barcode-scanning:16.0.3'

    //CameraX Dependencies

    implementation "androidx.camera:camera-core:1.0.0-beta10"

    implementation "androidx.camera:camera-camera2:1.0.0-beta10"

    implementation "androidx.camera:camera-lifecycle:1.0.0-beta10"

    implementation "androidx.camera:camera-view:1.0.0-alpha10"

    implementation "androidx.camera:camera-extensions:1.0.0-alpha10"

    implementation 'com.google.android.material:material:1.3.0-alpha02'

    //Library to get URL Meta Data

    implementation 'org.jsoup:jsoup:1.13.1'

We also need to add Java8 compile Options; so add the following inside android block.

    compileOptions {

        sourceCompatibility JavaVersion.VERSION_1_8

        targetCompatibility JavaVersion.VERSION_1_8

}

and open manifest files and add permisions , I’ve also added the internet permission, because we need it to fetch URL content.

 <uses-permission android:name="android.permission.CAMERA" />

    <uses-permission android:name="android.permission.INTERNET" />

Step 2 - Now Designing App’s UI Scanner

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

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

 
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000">
 
        <androidx.camera.view.PreviewView
            android:id="@+id/previewView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
 
            <TextView
                android:id="@+id/text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="140dp"
                android:text="QR Code Reader Android\nusing ML Kit"
                android:textAlignment="center"
                android:textColor="#FAFAFA"
                android:textSize="24sp" />
 
            <ImageView
                android:layout_width="300dp"
                android:layout_height="350dp"
                android:layout_below="@id/text_view"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="34dp"
                android:background="@drawable/background_rect" />
 
        </RelativeLayout>
 
    </FrameLayout>
 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

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.

Step 3 - 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.

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

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/bottom_sheet"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:background="#ffffff"

    android:orientation="vertical"

    android:padding="16dp">

    <TextView

        android:id="@+id/text_view_title"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:layout_marginBottom="8dp"

        android:textAlignment="center"

        android:textAppearance="@style/TextAppearance.AppCompat.Title"

        android:textColor="#2B2B2B"

        tools:text="Simplified Coding - QR Code Reader" />

    <TextView

        android:id="@+id/text_view_desc"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:layout_marginBottom="8dp"

        android:textAlignment="center"

        android:textAppearance="@style/TextAppearance.AppCompat.Body1"

        android:textColor="#6C6C6C"

        android:textSize="10sp"

        tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed fermentum odio. Donec laoreet nisi nisl. Praesent at mauris enim. Suspendisse metus quam, congue eu nunc a, lacinia placerat orci" />

    <TextView

        android:id="@+id/text_view_link"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAlignment="center"

        android:textAppearance="@style/TextAppearance.AppCompat.Small"

        android:textColor="#002865"

        tools:text="https://www.youtube.com/SimplifiedCoding?sub_confirmation=1" />

    <TextView

        android:id="@+id/text_view_visit_link"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="12dp"

        android:background="#00A5E6"

        android:paddingLeft="12dp"

        android:paddingTop="4dp"

        android:paddingRight="12dp"

        android:paddingBottom="4dp"

        android:text="Visit Link"

        android:textColor="#ffffff" />

</LinearLayout>

all the required designs ready now.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
    private fun checkCameraPermission() {
        if (ContextCompat.checkSelfPermission(
                this,
                Manifest.permission.CAMERA
            ) != PackageManager.PERMISSION_GRANTED
        ) {
            Intent().also {
                it.action = Settings.ACTION_APPLICATION_DETAILS_SETTINGS
                it.data = Uri.fromParts("package", packageName, null)
                startActivity(it)
                finish()
            }
        }
    }
 

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.

1
2
3
4
 
    private lateinit var cameraProviderFuture: ListenableFuture<ProcessCameraProvider>
    private lateinit var cameraExecutor: ExecutorService
 

Then we will initialize these inside onCreate() function.

1
2
3
4
 
    cameraExecutor = Executors.newSingleThreadExecutor()
    cameraProviderFuture = ProcessCameraProvider.getInstance(this)
 

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

1
2
3
4
5
6
 
    cameraProviderFuture.addListener(Runnable {
        val cameraProvider = cameraProviderFuture.get()
        bindPreview(cameraProvider)
    }, ContextCompat.getMainExecutor(this))
 

Here is the bindPreview() function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
    @SuppressLint("UnsafeExperimentalUsageError")
    private fun bindPreview(cameraProvider: ProcessCameraProvider) {
        val preview: Preview = Preview.Builder()
            .build()
        val cameraSelector: CameraSelector = CameraSelector.Builder()
            .requireLensFacing(CameraSelector.LENS_FACING_BACK)
            .build()
        preview.setSurfaceProvider(previewView.createSurfaceProvider(null))
 
        cameraProvider.bindToLifecycle(
            this as LifecycleOwner,
            cameraSelector,
            preview
        )
    }
 

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 .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
class MyImageAnalyzer: ImageAnalysis.Analyzer {
 
    override fun analyze(imageProxy: ImageProxy) {
        scanBarcode(imageProxy)
    }
 
    @SuppressLint("UnsafeExperimentalUsageError")
    private fun scanBarcode(imageProxy: ImageProxy) {
        imageProxy.image?.let { image ->
            val inputImage = InputImage.fromMediaImage(image, imageProxy.imageInfo.rotationDegrees)
            val scanner = BarcodeScanning.getClient()
            scanner.process(inputImage)
                .addOnCompleteListener {
                    imageProxy.close()
                    if (it.isSuccessful) {
                        readBarcodeData(it.result as List<Barcode>)
                    } else {
                        it.exception?.printStackTrace()
                    }
                }
        }
    }
 
    private fun readBarcodeData(barcodes: List<Barcode>) {
        for (barcode in barcodes) {
            when (barcode.valueType) {
                //you can check if the barcode has other values 
                //For now I am using it just for URL
                Barcode.TYPE_URL -> {
                    //we have the URL here
                    val url = barcode.url?.url
                }
            }
        }
    }
}
 

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
        val imageAnalysis = ImageAnalysis.Builder()
            .setTargetResolution(Size(1280, 720))
            .setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST)
            .build()
        imageAnalysis.setAnalyzer(cameraExecutor, analyzer)
        
        cameraProvider.bindToLifecycle(
            this as LifecycleOwner,
            cameraSelector,
            imageAnalysis,
            preview
        )
 

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
class BarcodeResultBottomSheet : BottomSheetDialogFragment() {
 
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = inflater.inflate(R.layout.bottom_sheet_barcode_data, container, false)
 
    //We will call this function to update the URL displayed 
    fun updateURL(url: String) {
        fetchUrlMetaData(url) { title, desc ->
            view?.apply {
                findViewById<TextView>(R.id.text_view_title)?.text = title
                findViewById<TextView>(R.id.text_view_desc)?.text = desc
                findViewById<TextView>(R.id.text_view_link)?.text = url
                findViewById<TextView>(R.id.text_view_visit_link).setOnClickListener { _ ->
                    Intent(Intent.ACTION_VIEW).also {
                        it.data = Uri.parse(url)
                        startActivity(it)
                    }
                }
            }
        }
    }
 
    //this function will fetch URL data
    private fun fetchUrlMetaData(
        url: String,
        callback: (title: String, desc: String) -> Unit
    ) {
        val executor = Executors.newSingleThreadExecutor()
        val handler = Handler(Looper.getMainLooper())
        executor.execute {
            val doc = Jsoup.connect(url).get()
            val desc = doc.select("meta[name=description]")[0].attr("content")
            handler.post {
                callback(doc.title(), desc)
            }
        }
    }
}
 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
class MyImageAnalyzer(
    private val fragmentManager: FragmentManager
) : ImageAnalysis.Analyzer {
 
    private var bottomSheet = BarcodeResultBottomSheet()
 
    override fun analyze(imageProxy: ImageProxy) {
        scanBarcode(imageProxy)
    }
 
    @SuppressLint("UnsafeExperimentalUsageError")
    private fun scanBarcode(imageProxy: ImageProxy) {
        imageProxy.image?.let { image ->
            val inputImage = InputImage.fromMediaImage(image, imageProxy.imageInfo.rotationDegrees)
            val scanner = BarcodeScanning.getClient()
            scanner.process(inputImage)
                .addOnCompleteListener {
                    imageProxy.close()
                    if (it.isSuccessful) {
                        readBarcodeData(it.result as List<Barcode>)
                    } else {
                        it.exception?.printStackTrace()
                    }
                }
        }
    }
 
    private fun readBarcodeData(barcodes: List<Barcode>) {
        for (barcode in barcodes) {
            when (barcode.valueType) {
                Barcode.TYPE_URL -> {
                    if (!bottomSheet.isAdded)
                        bottomSheet.show(fragmentManager, "")
                    bottomSheet.updateURL(barcode.url?.url.toString())
                }
            }
        }
    }
}
 

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 App In Kotlin using ML Kit