QR Code Scanner In Xamarin.Forms

Introduction

 

This article demonstrates how to make a QR CodeScanner Application using C# and XAML in Xamarin.Forms.

 

QR codes are plastered on advertisements, billboards, business windows, and products. They appear to be very popular among marketers, although it’s rare to see anyone actually scanning one.

 

These barcodes can be captured with a smartphone camera — for example, a typical QR code may contain an URL. Scan the QR code with a mobile phone and you’ll be taken to the website the QR code specifies.

 

 

Let’s Start,

 

Step 1

 

Open Visual Studio and Go To New Project >> installed >> Visual C# >> Cross-Platform.

 

Select the Cross-Platform App, then give Your Project a Name and Location.

 

 

Step 2

 

After Project Creation, add the Following Nuget Packages to Your Project.

• ZXing.Net.Mobile 

 

Go to Solution Explorer and Select Your Solution. Right-click and select "Manage Nuget Packages for Solution".

 

 

Now, Select the Following Nuget Package and Select your project to Install it.

 

 

Step 3

 

Open Solution Explorer >> Project Name >> Mainpage.xaml. Open the Design View of this page.

 

 

The Code Is Given Below.

 

 

Xaml Code

<StackLayout Spacing="10">
        <Button Text="Click"
                x:Name="btnScan"
                Clicked="btnScan_Clicked"/>
        <Entry x:Name="txtBarcode"
               Placeholder="Text Do scan"/>
    </StackLayout>

Step 4

 

Next, go to Project Name >> Add >> NewFolder. Select the NewFolder, the Dialogue Box Will Open, Just Give the Folder Name.

 

 

Now add a New Interface on Service Folder.

 

 

Add-In The Service Folder

 

 

Step 5

 

Next, go to Project Name (Portable) >> Services >> IQrScanningService.cs. Open the Design View Of this Page.

 

 

The Code is given below

 

 

C# Code

public interface IQrScanningService
   {
       Task<string> ScanAsync();
   }

Step 6

 

Next, go to Project Name (Android) >> Add >> NewFolder. Select the NewFolder, the dialogue box will open, just give the folder name.

 

 

Now add a New Class on Service Folder.

 

 

Step 7

 

Next, go to Project Name (Android) >> Services >> IQrScanningService.cs. Open the design view of this page.

 

 

The Code Is given below

 

 

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using XFBarcode.Services;
using ZXing.Mobile;
using Xamarin.Forms;

[assembly: Dependency(typeof(XFBarcode.Droid.Services.QrScanningService))]

namespace QR_Code_Scanner.Droid.Services
{
    public class QrScanningService : IQrScanningService
    {
        public async Task<string> ScanAsync()
        {
            var optionsDefault = new MobileBarcodeScanningOptions();
            var optionsCustom = new MobileBarcodeScanningOptions();

            var scanner = new MobileBarcodeScanner()
            {
                TopText = "Scan the QR Code",
                BottomText = "Please Wait",
            };

            var scanResult = await scanner.Scan(optionsCustom);
            return scanResult.Text;
        }
    }
}

Step 8

 

Next, Open Solution Exlorer >> Project Name >> MainPage.xaml.cs. Then, click to replace the C# code. 

 

 

the code Is given below,

 

 

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using XFBarcode.Services;

namespace QR_Code_Scanner
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void btnScan_Clicked(object sender, EventArgs e)
        {
            try
            {
                var scanner = DependencyService.Get<IQrScanningService>();
                var result = await scanner.ScanAsync();
                if (result != null)
                {
                    txtBarcode.Text = result;
                }
            }
            catch (Exception ex)
            {

                throw;
            }
        }
    }
}

Step 9

 

Press F5 or build and run the application

 

OutPut 1

 

Run the application and click the button

 

 

Output 2

 

Scan the QR Scanner

 

 

The result will be displayed.

 

Finally, we have successfully created a Xamarin.Forms QR code scanner app.