{"id":4353,"date":"2020-08-04T14:17:30","date_gmt":"2020-08-04T04:17:30","guid":{"rendered":"https:\/\/learntodroid.com\/?p=4353"},"modified":"2021-01-13T09:40:52","modified_gmt":"2021-01-12T23:40:52","slug":"how-to-create-a-qr-code-scanner-app-in-android","status":"publish","type":"post","link":"http:\/\/10.0.0.14:32769\/how-to-create-a-qr-code-scanner-app-in-android\/","title":{"rendered":"How to Create a QR Code Scanner App in Android"},"content":{"rendered":"\n<p>CameraX is a powerful Android Jetpack library that can drastically simplify the development effort for creating apps that use the camera. As a part of the <a rel=\"noreferrer noopener\" href=\"http:\/\/10.0.0.14:32769\/category\/create-an-app-from-scratch\/\" target=\"_blank\">series of blog posts for creating apps from scratch<\/a>, I have created a tutorial walking you through how to create a QR code scanner app for Android using the CameraX and ZXing libraries.<\/p>\n\n\n\n<p>To create a QR code scanner app in Android using CameraX and ZXing perform the following steps.<\/p>\n\n\n\n<ol><li>Retrieve the Dependencies for CameraX and ZXing with Gradle<\/li><li>Request Permission to Use the Camera<\/li><li>Set up a Live Preview of the Camera With CameraX<\/li><li>Set up Image Analysis to Scan Frames From the Camera for QR Codes Using CameraX and ZXing<\/li><li>Test It Out on the Emulator or on Your Device<\/li><\/ol>\n\n\n\n<p>In this tutorial for creating a QR code scanner app in Android using the CameraX and ZXing libraries I have documented each of these steps and have included code samples written in Java to help you along the way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tutorial for Creating a QR Code Scanner Android App in Java<\/h2>\n\n\n\n<p>This tutorial for creating a QR code scanner Android app in Java will be broken down into five steps. All of the code shared in this tutorial for the QR code scanner app for Android is available in GitHub for free at the link below.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/learntodroid\/AndroidQRCodeScanner\" target=\"_blank\">https:\/\/github.com\/learntodroid\/AndroidQRCodeScanner<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Retrieve the Dependencies for CameraX and ZXing with Gradle<\/h3>\n\n\n\n<p>For the QR code scanner app we will be creating in Android will we require two dependencies CameraX from the Android Jetpack library and the ZXing library for bar code scanning.<\/p>\n\n\n\n<p>The <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.android.com\/training\/camerax\" target=\"_blank\">CameraX Android Jetpack library<\/a>, which is currently in beta at the time of writing (August 2020), is a support library that makes it easier to build Android apps that use the camera. CameraX reduces the complexity of having to factor in specifics of the device when designing an app that uses the camera.<\/p>\n\n\n\n<p>We will be using CameraX to show a live preview from the camera inside the app. In addition to this, we will use the image analysis capabilities from CameraX to retrieve the image frames retrieved from the device&#8217;s camera to process with a QR code scanning library.<\/p>\n\n\n\n<p>To learn more about what CameraX from the Android Jetpack library is all about check out this short video below from the Android Developers YouTube channel.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"container-lazyload preview-lazyload container-youtube js-lazyload--not-loaded\"><a class=\"lazy-load-youtube preview-lazyload preview-youtube\" href=\"https:\/\/www.youtube.com\/watch?v=HGSj-JRpuxo\" data-video-title=\"Android Jetpack: CameraX Beta\" title=\"Play video &quot;Android Jetpack: CameraX Beta&quot;\">https:\/\/www.youtube.com\/watch?v=HGSj-JRpuxo<\/a><noscript>Video can&#8217;t be loaded because JavaScript is disabled: <a href=\"https:\/\/www.youtube.com\/watch?v=HGSj-JRpuxo\" title=\"Android Jetpack: CameraX Beta\">Android Jetpack: CameraX Beta (https:\/\/www.youtube.com\/watch?v=HGSj-JRpuxo)<\/a><\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>To retrieve the CameraX dependencies using gradle, add the following dependencies to your app level build.gradle file.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/e5f40a721440ee7be37220070a51c3ed.js\"><\/script><\/p>\n\n\n<p>The CameraX library requires you to have Java 8 in your app, so you will need to include the Java 8 dependencies in your app level build.gradle file. This can be down by adding a compileOptions section inside android block after the buildTypes section as per the sample build.gradle file below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/622b9a70b664de4f238536a74ba34722.js\"><\/script><\/p>\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/zxing\/zxing\" target=\"_blank\">ZXing<\/a>, also known as Zebra Crossing, is an open-source free to use bar code scanning library for Java and Android. ZXing can process images for scanning different sorts of codes such as UPCs, EAN codes as well as QR codes.<\/p>\n\n\n\n<p>To retrieve the ZXing dependency using gradle, add the following dependency to your app level build.gradle file.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/a01fd0ba5346c59f3082ea61984a38c8.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Request Permission to Use the Camera<\/h3>\n\n\n\n<p>Because we will be using the camera in our Android app to scan for the QR code we will need to add the permission for the camera inside the app&#8217;s manifest file.<\/p>\n\n\n\n<p>See a sample app manifest below that requests the use of the camera permission with the &#8220;uses-permission&#8221; tag along with a request to use any camera available on the device with the &#8220;uses-feature&#8221; tag.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/86e836654d2623a1d6cdbdf3f174b53e.js\"><\/script><\/p>\n\n\n<p>In addition to this due to the fact that Android considers the camera permission to be a dangerous permission, we will need to request the user&#8217;s consent to use the camera permission at run time through a prompt started from our activity.<\/p>\n\n\n\n<p>To achieve this we will create the method &#8220;requestCamera()&#8221; to check that we have the consent from the user to use the camera and if we don&#8217;t to prompt them in the user interface. The method will be called inside the onCreate() method.<\/p>\n\n\n\n<p>If the user has already given us permission to use the camera we will call the &#8220;startCamera()&#8221; method we will implement later for starting the camera preview. If this permission has not already been granted by the user we will display a prompt to request permission to use the camera.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Requesting-Permission-to-Use-Camera-in-Android.png\" alt=\"\" class=\"wp-image-4373\" width=\"313\" height=\"641\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Requesting-Permission-to-Use-Camera-in-Android.png 417w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Requesting-Permission-to-Use-Camera-in-Android-146x300.png 146w\" sizes=\"(max-width: 313px) 100vw, 313px\" \/><\/figure><\/div>\n\n\n\n<p>In the activity class we will override the onRequestPermissionsResult(&#8230;) method to check if the user has provided consent to use the camera in the popup, if so we will then call the &#8220;startCamera()&#8221; method.<\/p>\n\n\n\n<p>See the code sample below for checking that the user has provided consent to use the camera in the activity.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/2a1e33a2431b2a0db5e6b1d053c72091.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Set up a Live Preview of the Camera With CameraX<\/h3>\n\n\n\n<p>Next, we will use the CameraX Jetpack support library to create a live preview from the camera inside the Android app after we have confirmed that the user has authorized us to use the camera.<\/p>\n\n\n\n<p>Creating a live preview from the camera is one of the three main use cases that have been simplified for developers using the CameraX library, the others being image analysis and image capture.<\/p>\n\n\n\n<p>First, we will need to update the layout resource file for our activity or fragment to include a PreviewView widget from CameraX. See a sample activity layout resource below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/f2d70aa1c84a384a164c4fc378b86c5f.js\"><\/script><\/p>\n\n\n<p>Next, we will implement the startCamera() method to initialize the preview from the camera using a ProcessCameraProvider.<\/p>\n\n\n\n<p>We will also create a new method bindCameraPreview(&#8230;) which will be invoked from the startCamera() method. The bindCameraPreview(&#8230;) method will be used to set up and initiate the camera preview to be displayed inside the PreviewView widget.<\/p>\n\n\n\n<p>In the bindCameraPreview(&#8230;) method we first, set up the PreviewView widget to use the surface view implementation mode using the setPreferredImplementationMode(&#8230;) method.<\/p>\n\n\n\n<p>Then we will create a new CameraX Preview object using the builder. We will then create a new CameraX CameraSelector object using the builder using the back lens of the camera.<\/p>\n\n\n\n<p>For the Preview object we will need to set the surface provider as a newly created surface provider from the PreviewView widget using the setSurfaceProvider(&#8230;) method.<\/p>\n\n\n\n<p>Then at the end of the bindCameraPreview(&#8230;) method, we will invoke the bindToLifecycle(&#8230;) method on the cameraProvider and pass the CameraSelector object and the Preview object as parameters.<\/p>\n\n\n\n<p>See the code sample below which shows the implementation of the startCamera() and bindCameraPreview(&#8230;) methods.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/e2b30a80bcbaf9b69d5fdb6112b48c8d.js\"><\/script><\/p>\n\n\n<p>Now if you run your Android app in the emulator, you should see a preview of a house that you can navigate around by holding the ALT key and using the WASD keys while using the mouse to look around.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-Camera.png\" alt=\"\" class=\"wp-image-4391\" width=\"310\" height=\"640\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-Camera.png 413w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-Camera-145x300.png 145w\" sizes=\"(max-width: 310px) 100vw, 310px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Set up Image Analysis to Scan Frames From the Camera for QR Codes Using CameraX and ZXing<\/h3>\n\n\n\n<p>In this step of the tutorial for creating a QR code scanner app in Android we will use the image analysis capabilities available in CameraX along with the ZXing library to scan image frames from the camera to locate QR codes.<\/p>\n\n\n\n<p>Before we create any code for image analysis we will first create a listner we will use in the custom image analyzer class we will create to inform the Activity when a QR code has been located in an image frame our when a QR code could not be located.<\/p>\n\n\n\n<p>See the code sample for the QRCodeFoundListener listener below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/259a736187bf35543c8f42f5fd100ec9.js\"><\/script><\/p>\n\n\n<p>Next, we will create our own custom image analyzer class that we will use to inspect individual frames from the camera retrieved using CameraX and analyse those frames using the ZXing library to attempt to locate a QR Code.<\/p>\n\n\n\n<p>To use this class for image analysis using CameraX it will need to implement the ImageAnalysis.Analyzer interface from CameraX and override the analyze(&#8230;) method.<\/p>\n\n\n\n<p>In the analyse(&#8230;) method we will first need to check the image frame from the camera is in a compatible format. If this is the case then we will retrieve the image from the CameraX buffer and convert it into a byte array.<\/p>\n\n\n\n<p>Once we have the byte array we will convert the byte array into a format usable by the ZXing library to scan for QR codes which will require us to create a PlanarYUVLuminanceSource object then pass it to a HybridBinarizer object to generate a BinaryBitmap.<\/p>\n\n\n\n<p>If a QR code can be located in the BinaryBitmap using the QR code reader library from ZXing library we will invoke the onQRCodeFound(&#8230;) method on the QRCodeFoundListener listener while passing the text from the QR code as a parameter.<\/p>\n\n\n\n<p>If no QR code be found we will invoke the qrCodeNotFound() method on the QRCodeFoundListener listener. <\/p>\n\n\n\n<p>See the code sample for the QRCodeImageAnalyzer class below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/8f839be0b29d0378f843af70607bd7f5.js\"><\/script><\/p>\n\n\n<p>Next, we will make the following changes the main activity class.<\/p>\n\n\n\n<ul><li>We will add a Button to the layout resource that will be shown only when a QR code has been located with the camera, which when selected will display the text that was read from the QR code<\/li><li>We will then update the bindCameraPreview(&#8230;) method to utilize the CameraX library to use the custom image analyzer class we created for image analysis<\/li><\/ul>\n\n\n\n<p>See the layout resource below for the activity that has been updated to include a Button.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/866bf8f5e34ba0ab21f1d2fa6c667e61.js\"><\/script><\/p>\n\n\n<p>In the onCreate() method we will initialize the button to start as invisible then add an OnClickListener(&#8230;) to create a toast message of the text from the QR code retrieved from a string variable on the class.<\/p>\n\n\n\n<p>Then, we will update the bindCameraPreview(&#8230;) method to create a new ImageAnalysis object from the CameraX library using the builder. Then we will use the setAnaylzer(&#8230;) method on the ImageAnalysis object and provide an object of the custom image analyzer class we created in a previous step.<\/p>\n\n\n\n<p>In the bindCameraPreview(&#8230;) method when creating an instance of the QRCodeImageAnalyzer class we will implement the onQRCodeFound(&#8230;) and qrCodeNotFound() methods from the QRCodeFoundListener listener. These methods will be responsible for storing the text retrieved from the QR code in the activity class along with updating the visibility status of the button depending on whether a code has been located or note.<\/p>\n\n\n\n<p>At the end of the bindCameraPreview(&#8230;) method, we will need to update the bindToLifecycle(&#8230;) method call on the cameraProvider object to include the ImageAnalysis object we created as a parameter.<\/p>\n\n\n\n<p>See the code sample for the MainActivity class below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/7356920bd0b2f6896f8d09ccc752a9b1.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Test It Out on the Emulator or on Your Device<\/h3>\n\n\n\n<p>Next, we will test that the QR code reader works on the emulator or on your device. Before we start, you will need to have some QR codes to test with. <\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.qr-code-generator.com\/\" target=\"_blank\">qr-code-generator.com<\/a> is a great free-to-use tool available in a web browser that allows you to generate QR codes with whatever text you enter.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/qrcode.png\" alt=\"\" class=\"wp-image-4394\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/qrcode.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/qrcode-150x150.png 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><figcaption>I created this QR code using <a rel=\"noreferrer noopener\" href=\"https:\/\/www.qr-code-generator.com\/\" target=\"_blank\">qr-code-generator.com<\/a> with the text <em>http:\/\/10.0.0.14:32769<\/em><\/figcaption><\/figure><\/div>\n\n\n\n<p>If you have your QR code scanner running on your mobile device, simply point the camera at the screen showing a QR code you have generated and it should display the &#8220;QR Code Found&#8221; button which when clicked will display the text in a toast message.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Screenshot_20200804-131027_Android-QR-Code-Scanner-498x1024.jpg\" alt=\"\" class=\"wp-image-4400\" width=\"374\" height=\"768\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Screenshot_20200804-131027_Android-QR-Code-Scanner-498x1024.jpg 498w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Screenshot_20200804-131027_Android-QR-Code-Scanner-146x300.jpg 146w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Screenshot_20200804-131027_Android-QR-Code-Scanner.jpg 584w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><\/figure><\/div>\n\n\n\n<p>If you want to use the Android emulator to test the QR code scanner works, you will first need to go into the emulator settings by selecting the icon on the emulator with three dots.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-Settings.png\" alt=\"\" class=\"wp-image-4387\" width=\"366\" height=\"644\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-Settings.png 488w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-Settings-171x300.png 171w\" sizes=\"(max-width: 366px) 100vw, 366px\" \/><\/figure><\/div>\n\n\n\n<p>Then you will need to go into the camera settings of the emulator and add an image of the QR code as the wall image by selecting the browse icon.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"835\" height=\"671\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-Camera-Enter-QR-Code-Image.png\" alt=\"\" class=\"wp-image-4396\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-Camera-Enter-QR-Code-Image.png 835w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-Camera-Enter-QR-Code-Image-300x241.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-Camera-Enter-QR-Code-Image-768x617.png 768w\" sizes=\"(max-width: 835px) 100vw, 835px\" \/><\/figure><\/div>\n\n\n\n<p>Then you will be able to run your QR code scanner app in the Android emulator and you will need to navigate into the dining room that contains the wall image with your QR code.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-View-QR-Code-on-Wall-1.png\" alt=\"\" class=\"wp-image-4398\" width=\"364\" height=\"640\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-View-QR-Code-on-Wall-1.png 485w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Android-Emulator-View-QR-Code-on-Wall-1-171x300.png 171w\" sizes=\"(max-width: 364px) 100vw, 364px\" \/><\/figure><\/div>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSe4aAItLWeIpKkTXMsbK3zMJFyWeY33iJeGDkrbcs8HXzlhoQ\/viewform?embedded=true\" width=\"640\" height=\"395\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading\u2026<\/iframe>\n","protected":false},"excerpt":{"rendered":"<p>CameraX is a powerful Android Jetpack library that can drastically simplify the development effort for creating apps that use the camera. As a part of the series of blog posts<\/p>\n","protected":false},"author":1,"featured_media":4460,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[22,24],"tags":[],"acf":[],"_links":{"self":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4353"}],"collection":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/comments?post=4353"}],"version-history":[{"count":4,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4353\/revisions"}],"predecessor-version":[{"id":4924,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4353\/revisions\/4924"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media\/4460"}],"wp:attachment":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media?parent=4353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/categories?post=4353"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/tags?post=4353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}