×
iFour Logo

How to scan QR code using Xamarin.Forms?

iFour Team - December 23, 2020

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

Sustainable

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.

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

Why do you need hospitality software for your hospitality business?
Why do you need hospitality software for your hospitality business?

Table of Content 1. Streamlined operations and exceptional customer experience 2. Increased productivity & reduced cost 3. Improves operational efficiency 4. Effective...

Read More
Important tips to create a successful SaaS product
Important tips to create a successful SaaS product

SaaS (Software as a Service) is a cloud-based software adopted by businesses to host their business applications. Generally, these services are offered by software vendors through...

Read More
Top 10 Technology Trends for Hospitality Industry
Top 10 Technology Trends for Hospitality Industry

The Hospitality industry is one of the highly competitive sectors in the world. Its value gets judged through the way of providing customer experience and customer satisfaction....

Read More