Post
Ask Question

QrCode / BarCode Scanner And Generator For Xamarin.Forms Using Zxing Nuget

Introduction

A barcode is the representation of a numeric or alphanumeric data in the form of a symbol consisting of bars and spaces whose thickness varies according to the symbology used and the data thus encoded.

There are two general types of barcodes:
  • Unidimensional (1D)
    These codes are those represented by a series of parallel lines of variable thickness. Their reading is one-dimensional. Depending on the reading technology used, the decoding may be unidirectional or bi-directional to confirm the first decoding. 

    So, this is an example of BarCode which contains the information: http://www.c-sharpcorner.com

  • Two-dimensional (2D)
    These codes use a variety of symbols (rectangles, dots, hexagons, and other geometric shapes). This matrix form makes it possible to record more information which is also called QR codes And this is an example of a QR code which contains the same information of the previous BarCode.
This article will cover the following.
  • Create a BarCode / QrCode scanner.
  • Generate a QrCode / BarCode.
Prerequisites
  1. Basic programming knowledge of C#.
  2. Basic knowledge of Xamarin.
Implementation

After creating a cross-platform project, we should install the NuGet package in the solution

: ZXing.Net.Mobile.Forms  (Right-click on the solution / Manage NuGet Packages for Solution



On the "MainPage" we add two buttons: The first will open the BarCode / QrCode Scanner and the other button will generate a QrCode
  1. <Button Text="Scan with Custom Page" Clicked="ScanCustomPage"></Button>  
  2. <Button Text="Barcode Generator" Clicked="GenerateBarcode"></Button> 
We will back later to add button's click events.

After that, we add a new ContentPage element which named "ScannerPage" On the ScannerPage, you should add a xmlns attribute for the ContentPage Element to load missing assemblies from the installed NuGet.

So, we add this attribute line inside the ContentPage,

xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms" 

After adding the assembly, we create a Grid element inside our page which contains two elements: the ScannerView and the Overlay

  1. <Grid>  
  2.     <zxing:ZXingScannerView x:Name="zxing" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" OnScanResult="ZXingScannerView_OnOnScanResult" />  
  3.     <zxing:ZXingDefaultOverlay x:Name="overlay" TopText="Hold your phone up to the barcode" BottomText="Scanning will happen automatically" ShowFlashButton="True" FlashButtonClicked="Overlay_OnFlashButtonClicked" />   
  4. </Grid>  


Now, we move to the code behind of the "ScannerPage" and we add the actions of the scanner and the overlay,




  1. private async void ZXingScannerView_OnOnScanResult(Result result) {  
  2.     zxing.IsAnalyzing = false;  
  3.     await DisplayAlert("Scanned Barcode", result.Text, "OK");  
  4.     await Navigation.PopAsync();  
  5. }  
  6. private void Overlay_OnFlashButtonClicked(Button sender, EventArgs e) {  
  7.     zxing.IsTorchOn = !zxing.IsTorchOn;  
  8. }  




And we override OnAppearing and OnDisappearing methods to start and stop the scanner. Finally, we create the last page to generate a QrCode : this page will be named  "QrCodePage". 

On this page, we also load the Zxing assembly by adding the same xmlns element of the scanner page. Then, we add a "ZXingBarcodeImageView" inside a StackLayout element,




  1. <StackLayout HorizontalOptions="Center" VerticalOptions="Center">  
  2.     <zxing:ZXingBarcodeImageView BarcodeFormat="QR_CODE" BarcodeValue="http://www.c-sharpcorner.com" />  
  3. </StackLayout>  
Don't forget to add the button's events of the MainPage,




  1. private async void ScanCustomPage(object sender, EventArgs e) {  
  2.     await Navigation.PushAsync(new ScannerPage());  
  3. }  
  4. private async void GenerateBarcode(object sender, EventArgs e) {  
  5.     await Navigation.PushAsync(new QrCodePage());  
  6. }  


Now, we should enable Permission for Android application,

We open the AndroidManifest file and add the following permissions inside the manifest Tag,




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




 

The last step is opening MainActivity Class on the Android project and adding the following line on the OnCreate method (just before the LoadApplication call ),


  1. global::ZXing.Net.Mobile.Forms.Android.Platform.Init();  


In this way, you can create a BarCode / QrCode Scanner and generator using Xamarin Forms.