Embedding QR Code Scanner in Xamarin.Forms

Introduction

In this article, we will learn how to embed and use the barcode scanner inside the screen/page using the Xamarin.Forms Framework. For achieving this, we are going to use “ZXing.Net.Mobile” plugin.

Dropdown in Xamarin.Forms

ZXing.Net.Mobile plugin is a useful plugin to facilitate scanning barcodes as effortless and painless as possible in our own applications works Xamarin.iOS, Xamarin.Android, Tizen, and UWP.

Library Link: https://github.com/Redth/ZXing.Net.Mobile

Without much introduction, we will skip into the coding part of this article.

Coding Part

Steps

Step 1: Creating new Xamarin.Forms Projects.

Step 2: Setting up the scanner in Xamarin.Forms .Net Standard Project

Step 3: Implementation of QR Code Scanner inside the screen/page

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New à Project à Select Xamarin Cross Platform App and Click OK.

Note: Xamarin.Forms version should be greater than 4.5.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the scanner in Xamarin.Forms .Net Standard Project

In this step, we will see how to setup the plugin.

• Open the Nuget Manager in the Visual Studio Solution by right click the solution and select “Manage Nuget Packages”.
  
• Then “ZXing.Net.Mobile” and check all the projects in the solution, install the plugin
• After the installation, we need to do some additional setup in the platform wise projects.
• In Android, update the below code blocks in the MainActivity to initialize the plugin.

// In OnCreate method
Xamarin.Essentials.Platform.Init(Application);
ZXing.Net.Mobile.Forms.Android.Platform.Init();

// In Activity to handle the camera permission from the plugin it self.

public override void OnRequestPermissionsResult(int requestCode, string[] permissions, Permission[] grantResults)
{
    Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
    base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
}

Step 3: Implementation of QR Code Scanner inside the screen/page

In this step, we will see how to use the view in Xamarin.Forms.

• Open your designer file and in my case MainPage.xaml and add the ZxingSannerView as shown below.

  <zxing:ZXingScannerView x:Name="zxing"
                          VerticalOptions="FillAndExpand"/>

• Add Label below the ZxingSannerView to see the results when the bar/QR code scanned.
• Then add the below event to know the successful scan from the control.

  zxing.OnScanResult += (result) =>
        Device.BeginInvokeOnMainThread(() =>
        {
              lblResult.Text = result.Text;
        });

Full Code implementation of ZXing Scanner View in MainPage

Here, we will see the full code for Main Page.

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        zxing.OnScanResult += (result) =>
            Device.BeginInvokeOnMainThread(() =>
            {
                lblResult.Text = result.Text;
            });
    }


    protected override void OnAppearing()
    {
        base.OnAppearing();
        zxing.IsScanning = true;
    }

    protected override void OnDisappearing()
    {
        zxing.IsScanning = false;
        base.OnDisappearing();
    }
}

Demo

The following screens shows the output this tutorial and it is awesome to have this dropdown in Xamarin.Forms

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.