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.