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 effortlessly and painlessly 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

Here, I will explain the steps to create Dropdown in Xamarin.Forms.

• Step 1: Creating a 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 clicking 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 is 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 show the output of this tutorial and it is awesome to have this dropdown in Xamarin.Forms

Download Code

You can download the full source code from GitHub. If you like this article, do like, share and star the repo in GitHub.