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

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.

Step 3:Install NuGet package

Now the project is created and we will 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

<grid>
<grid.rowdefinitions>
<rowdefinition height="Auto">
<rowdefinition height="*">
</rowdefinition></rowdefinition></grid.rowdefinitions><button clicked="btnScan_Click" grid.row="0" text="Open Cemera" x:name="scanBtn">
<entry grid.row="1" placeholder="Text Do Scan" x:name="BarcodeTxt">
</entry></button></grid>

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
{
Task<string>ScanAsync();
}
}
</string>

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 Task<string>ScanAsync()
{
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;
}
Task<string>IQrscanningservice.ScanAsync()
{
throw new Exception();
}
}  
}
</string></string>

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<iqrscanningservice>();
var result = await scanner.ScanAsync();
if (result != null)
{
BarcodeTxt.Text = result;
}
}
catch (Exception e)
{
throw;
}
}
}
}
</iqrscanningservice>

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


<!--?xml version="1.0" encoding="utf-8"?-->
<manifest android:versioncode="1" android:versionname="1.0" package="com.companyname.myapp" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:label="MyApp.Android"></application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE">
<!-- Add these two permissions -->
<uses-permission android:name="android.permission.CAMERA">
<uses-permission android:name="android.permission.FLASHLIGHT">
</uses-permission></uses-permission></uses-permission></manifest>

IOS:

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

Info.plist


<!--?xml version="1.0" encoding="UTF-8"?-->
<plist version="1.0">
<dict>
     ...
<key>NSCameraUsageDescription</key>
<string>Please allow access to the camera to scan QRcode</string>
</dict>
</plist>

Step 10: Output

Press F5 or build and run the application

Output:

Run the application and click the button

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.

Blog