Xamarin.Android - QR Code Reader App

Introduction and History

Today, I shall show you how to make a QR Code reader Android application in Xamarin. A QR Code consists of black squares arranged in a square grid on a white background, which can be read by imaging devices, such as a camera. The required data is extracted from the patterns that are present in both, horizontal and vertical components of the image.

Prerequisites
  • Google Play Services - Vision
  • QR Code image
Step 1

Open Visual Studio and go to New Project-> Templates-> Visual C#-> Android-> Blank app. Give your project a name like -QR_Code_Reader.
 
(ProjectName: QR_Code_Reader)

 

Step 2

First of all, we need to add a component that is required for text recognition.
 
Open Solution Explorer-> Components -> Get More Components.
 
This way, you can move on to Xamarin Components Store and search for Vision. Click "Add to App".

 

Step 3

Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open this main.axml file and add the following code.
 
The layout will have an ImageView in order to display the preview of the QR code. I have added a TextView also to display the content of the reconized QR code info.

(FileName: Main.axml)

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.       android:orientation="vertical" 
  4.       android:layout_width="match_parent" 
  5.       android:layout_height="match_parent">  
  6.     <ImageView android:id="@+id/imageView" 
  7.       android:layout_width="300dp" 
  8.       android:layout_height="300dp" 
  9.       android:layout_gravity="center_horizontal" 
  10.       android:paddingTop="10dp" />  
  11.     <Button android:id="@+id/btnScan" 
  12.       android:layout_width="wrap_content" 
  13.       android:layout_height="wrap_content" 
  14.       android:layout_gravity="center_horizontal" 
  15.       android:text="Scan" />  
  16.     <TextView android:id="@+id/txtResult" 
  17.       android:layout_width="wrap_content" 
  18.       android:layout_height="wrap_content" 
  19.       android:layout_gravity="center_horizontal" 
  20.       android:textSize="20sp" 
  21.       android:textColor="@color/abc_tint_btn_checkable" 
  22.       android:paddingTop="15dp" />   
  23.       </LinearLayout>  
Step 4

We need a permission from device. So, go to Solution Explorer-> Properties-> AndroidManifest and add this code inside application tags. 
  1. <meta-data android:name="com.google.android.gms.vision.DEPENDENCIES" android:value="barcode"/>  
Step 5

Open Solution Explorer-> Project Name-> Resources-> Drawable and add this image to the Drawable folder. I have created a QR code with the name C-Sharp Corner. If you want to create another one with your name, then you can create from https://www.qrcode-monkey.com.
Step 6

Next, open Solution Explorer-> Project Name-> MainActivity file and add the following code with appropriate namespaces.

Main Activity Complete Code 
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using Android.Support.V7.App;  
  5. using Android.Graphics;  
  6. using Android.Gms.Vision.Barcodes;  
  7. using Android.Util;  
  8. namespace QRCodeReader {  
  9.     [Activity(Label = "QRCodeReader", MainLauncher = true)]  
  10.     public class MainActivity: Activity {  
  11.         ImageView imageView;  
  12.         Button btnScan;  
  13.         TextView txtResult;  
  14.         protected override void OnCreate(Bundle savedInstanceState) {  
  15.             base.OnCreate(savedInstanceState);  
  16.             // Set our view from the "main" layout resource  
  17.             SetContentView(Resource.Layout.Main);  
  18.             imageView = FindViewById < ImageView > (Resource.Id.imageView);  
  19.             btnScan = FindViewById < Button > (Resource.Id.btnScan);  
  20.             txtResult = FindViewById < TextView > (Resource.Id.txtResult);  
  21.             Bitmap bitMap = BitmapFactory.DecodeResource(ApplicationContext.Resources, Resource.Drawable.qrcode);  
  22.             imageView.SetImageBitmap(bitMap);  
  23.             btnScan.Click += delegate {  
  24.                 BarcodeDetector detector = new BarcodeDetector.Builder(ApplicationContext).SetBarcodeFormats(BarcodeFormat.QrCode).Build();  
  25.                 Android.Gms.Vision.Frame fram = new Android.Gms.Vision.Frame.Builder().SetBitmap(bitMap).Build();  
  26.                 SparseArray barsCode = detector.Detect(fram);  
  27.                 Barcode result = (Barcode) barsCode.ValueAt(0);  
  28.                 txtResult.Text = result.RawValue;  
  29.             };  
  30.         }  
  31.     }  
  32. }  
Output
 
Running this project, and scanning a QR code, you will have the result like below.