×

iFour Logo

How to scan QR code using Xamarin.Forms?

Kapil Panchal - December 23, 2020

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
How to scan QR code using Xamarin.Forms?

Barcodes are becoming really useful in our daily life. We almost see it everywhere. It is a way to transfer data in a very efficient and faster way. It was developed to transfer data in a secure way. Barcode scanning is a very easy task that calls the application again and again.

Barcode can represent numeric or alphanumeric data which encodes and decodes data very frequently. You can also create your own barcode.

To create the barcode, you don't need any devices like a scanner or a mobile phone with a good camera you can also create a barcode in a phone which have a normal camera that can scan the QR code. Most people use cameras on mobile phones to scan the QR code. Because nowadays uses of Android and IOS devices have been increased in which the camera can scan QR code.

In this blog, we will see how we can create a QR code scanner application in Xamarin using C# and XAML. You just have to follow the process step by step so you can also create a QR code can application.

 

As shown in the picture barcode looks like above. As you have seen it on many places like any Packaging of a product or bill box when you’re paying bills which make it easier to scan but as a human, it is impossible for us to understand it. This code could only be understood by the applications the devices which can access it.

The QRscanner application built into Xamarin works on all platforms.That supports Android, IOS and, UWP. For this, you have to install the NuGet package.

In every platform, it is necessary to give permission for the camera and location. To allow permission in Android you have to write code in the manifest file and you have to override “OnRequestPermissionsResult” method which we will see in the example. Similarly, it is necessary to request permission in the info.plist in IOS.

Let’s see an Example:

Step 1: Create a new project


Open visual studio

Select File -> New -> Project

ai-Hiring-banner

Fig: Create new project

Step 2: Select Device


  • Select Installed -> Visual C# -> Cross-Platform -> Mobile App (Xamarin.Forms)

  • Name: As per your Choice

  • Now we have to select the over for which we have to create the application.

ai-Hiring-banner

Fig: Select Device

Step 3:Install NuGet package


Now the project is created and we will install NuGet package.

ai-Hiring-banner

Fig: Install NuGet package

As shown in the above image, install the Zxing.Net.Mobile package.

From the right side, select the only checkbox of OS for which you have to create the application. In this scenariowe will only need android and IOS which are checked. Installing The Click button after considering the following steps. Wait till your Packages get install.

Step 4: Write Front-end Code

Now we will create two controls with the help of grid layout one a button and the second one is Entry. The button will open a camera in our application for scanning the QR code and entry the scanned QR code and show the data accordingly.

The code is given below.

MainPage.Xam

 




Step 5: Add Interface


Now we will create a folder named service and add an interface to it.Write the following code after adding the interface Folder Add.

ai-Hiring-banner

Fig: Add new folder

ai-Hiring-banner

Fig: Add new interface

Example:

 
using System.Threading.Tasks;
namespace App3.Service
{
public interface IQrscanningservice
{
TaskScanAsync();
}
}

Step 6: Create Android OS service file


Now for Android, we will create a folder name the service and will add a class. For this process please do as follows.

Android -> Add -> New Folder -> Service (Folder Name)

To add class

Service Folder (Right click) -> Add -> Class (QrScanningService.cs)

Paste the below code of adding the class file

Don't forget to add [assembly].

 
using App3.Service;
using ZXing.Mobile;
[assembly: DefaultDependency(typeof(XFBarcode.Droid.Service.QrScanningService))]
namespace App3.Droid.Service
{
public class QrScanningService :IQrscanningservice
{  
public async TaskScanAsync()
{
varoDefault = new MobileBarcodeScanningOptions();
varoCustom = new MobileBarcodeScanningOptions();
var scanner = new MobileBarcodeScanner()
{
TopText = "QR Code Scan ",
BottomText = "Please Wait…..",
};
var result = await scanner.Scan(oCustom);
return result.Text;
}
TaskIQrscanningservice.ScanAsync()
{
throw new Exception();
}
}  
}

Planning to Hire Xamarin App Development Company? Your Search ends here.

Step 7: Write Back-end Code (.CS file)


Now Let's get back to the main page and paste the below code in the MainPage.xaml

 
using App3.Service;
using System;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace App3
{
public partial class MainPage :ContentPage
{
public MainPage()
{
InitializeComponent();
}
private async void btnScan_Click(object send, EventArgs e)
{
try
{
var scanner = DependencyService.Get();
var result = await scanner.ScanAsync();
if (result != null)
{
BarcodeTxt.Text = result;
}
}
catch (Exception e)
{
throw;
}
}
}
}

Step 8: Create iOS OS AppDelegate Class


We will follow this same process for iOS but the method that will be used is finishedlaunching and will paste the following code

File name:AppDelegate

 
Register("AppDelegate")
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
public override bool FinishedLaunching(UIApplicationa, NSDictionaryop)
{
Xamarin.Calabash.Start();
global::Xamarin.Forms.Forms.Init();
//Add this line of code
ZXing.Net.Mobile.Forms.iOS.Platform.Init();
LoadApplication(new App());
return base.FinishedLaunching(a, op);
}

Step 9: Give Permission


Now we will write the code to add permission for flashlight and camera in Android and IOS

Android:

As wediscussed earlier in this blog that you have to write code in the Android manifest.xml file to give any kind of permissions. We will write the following code in the Android manifest.xml file.

Manifest.xml

 







IOS:

To give permissions in iOS you have to write code in info.plist in file

Info.plist

 



     ...
NSCameraUsageDescription
Please allow access to the camera to scan QRcode

Step 10: Output


Press F5 or build and run the application

Output:

Run the application and click the button

ai-Hiring-banner

Fig: Output

Conclusion


In this blog, we have explained you aboutthe barcodes and how they can be used. More importantly, we have learned how to scan barcodes in our own apps. We have also seen how easy it is to integrate this functionality. While there are a few different things you can still do, the gist of it will be the same. Just the format of the QR code will be different.

How to scan QR code using Xamarin.Forms? Barcodes are becoming really useful in our daily life. We almost see it everywhere. It is a way to transfer data in a very efficient and faster way. It was developed to transfer data in a secure way. Barcode scanning is a very easy task that calls the application again and again. Barcode can represent numeric or alphanumeric data which encodes and decodes data very frequently. You can also create your own barcode. To create the barcode, you don't need any devices like a scanner or a mobile phone with a good camera you can also create a barcode in a phone which have a normal camera that can scan the QR code. Most people use cameras on mobile phones to scan the QR code. Because nowadays uses of Android and IOS devices have been increased in which the camera can scan QR code. In this blog, we will see how we can create a QR code scanner application in Xamarin using C# and XAML. You just have to follow the process step by step so you can also create a QR code can application.   Reference: https://www.thebalancecareers.com As shown in the picture barcode looks like above. As you have seen it on many places like any Packaging of a product or bill box when you’re paying bills which make it easier to scan but as a human, it is impossible for us to understand it. This code could only be understood by the applications the devices which can access it. The QRscanner application built into Xamarin works on all platforms.That supports Android, IOS and, UWP. For this, you have to install the NuGet package. In every platform, it is necessary to give permission for the camera and location. To allow permission in Android you have to write code in the manifest file and you have to override “OnRequestPermissionsResult” method which we will see in the example. Similarly, it is necessary to request permission in the info.plist in IOS. Let’s see an Example: Step 1: Create a new project Open visual studio Select File -> New -> Project Fig: Create new project Step 2: Select Device Select Installed -> Visual C# -> Cross-Platform -> Mobile App (Xamarin.Forms) Name: As per your Choice Now we have to select the over for which we have to create the application. Fig: Select Device Step 3:Install NuGet package Now the project is created and we will install NuGet package. Fig: Install NuGet package As shown in the above image, install the Zxing.Net.Mobile package. From the right side, select the only checkbox of OS for which you have to create the application. In this scenariowe will only need android and IOS which are checked. Installing The Click button after considering the following steps. Wait till your Packages get install. Read More: Incredible App Themes For Xamarin.forms Step 4: Write Front-end Code Now we will create two controls with the help of grid layout one a button and the second one is Entry. The button will open a camera in our application for scanning the QR code and entry the scanned QR code and show the data accordingly. The code is given below. MainPage.Xam   Step 5: Add Interface Now we will create a folder named service and add an interface to it.Write the following code after adding the interface Folder Add. Fig: Add new folder Fig: Add new interface Example:   using System.Threading.Tasks; namespace App3.Service { public interface IQrscanningservice { TaskScanAsync(); } } Step 6: Create Android OS service file Now for Android, we will create a folder name the service and will add a class. For this process please do as follows. Android -> Add -> New Folder -> Service (Folder Name) To add class Service Folder (Right click) -> Add -> Class (QrScanningService.cs) Paste the below code of adding the class file Don't forget to add [assembly].   using App3.Service; using ZXing.Mobile; [assembly: DefaultDependency(typeof(XFBarcode.Droid.Service.QrScanningService))] namespace App3.Droid.Service { public class QrScanningService :IQrscanningservice { public async TaskScanAsync() { varoDefault = new MobileBarcodeScanningOptions(); varoCustom = new MobileBarcodeScanningOptions(); var scanner = new MobileBarcodeScanner() { TopText = "QR Code Scan ", BottomText = "Please Wait…..", }; var result = await scanner.Scan(oCustom); return result.Text; } TaskIQrscanningservice.ScanAsync() { throw new Exception(); } } } Planning to Hire Xamarin App Development Company? Your Search ends here. See here Step 7: Write Back-end Code (.CS file) Now Let's get back to the main page and paste the below code in the MainPage.xaml   using App3.Service; using System; using System.Threading.Tasks; using Xamarin.Forms; namespace App3 { public partial class MainPage :ContentPage { public MainPage() { InitializeComponent(); } private async void btnScan_Click(object send, EventArgs e) { try { var scanner = DependencyService.Get(); var result = await scanner.ScanAsync(); if (result != null) { BarcodeTxt.Text = result; } } catch (Exception e) { throw; } } } } Step 8: Create iOS OS AppDelegate Class We will follow this same process for iOS but the method that will be used is finishedlaunching and will paste the following code File name:AppDelegate   Register("AppDelegate") public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate { public override bool FinishedLaunching(UIApplicationa, NSDictionaryop) { Xamarin.Calabash.Start(); global::Xamarin.Forms.Forms.Init(); //Add this line of code ZXing.Net.Mobile.Forms.iOS.Platform.Init(); LoadApplication(new App()); return base.FinishedLaunching(a, op); } Step 9: Give Permission Now we will write the code to add permission for flashlight and camera in Android and IOS Android: As wediscussed earlier in this blog that you have to write code in the Android manifest.xml file to give any kind of permissions. We will write the following code in the Android manifest.xml file. Manifest.xml   IOS: To give permissions in iOS you have to write code in info.plist in file Info.plist   ... NSCameraUsageDescription Please allow access to the camera to scan QRcode Step 10: Output Press F5 or build and run the application Output: Run the application and click the button Fig: Output Conclusion In this blog, we have explained you aboutthe barcodes and how they can be used. More importantly, we have learned how to scan barcodes in our own apps. We have also seen how easy it is to integrate this functionality. While there are a few different things you can still do, the gist of it will be the same. Just the format of the QR code will be different.
Kapil Panchal

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.

Build Your Agile Team

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 
Blog Our insights
10 Executive Dashboard Examples for Consultants and CEOs
10 Executive Dashboard Examples for Consultants and CEOs

There is a principle behind every business. “If you don’t keep track of essentials, you won’t get clear direction, eventually causing your company to stumble.” To manage this scenario,...

How Spatial Data Analysis Improves Healthcare
How Spatial Data Analysis Improves Healthcare

Do you know when geospatial analysis took traction in healthcare? It was when John Snow, a London-based physician, used it to analyze the spread of cholera, which ultimately proved...

4 Types of Power BI Dashboards: Analytical, Strategic, Operational, and Tactical
4 Types of Power BI Dashboards: Analytical, Strategic, Operational, and Tactical

One interesting aspect you truly love about Power BI, as a CTO, is how it lets you step back and see the bigger picture of your business. Isn’t it? Without getting bogged down in minute...