Learn to Add a Barcode Generator and Scanner Functionality in Xamarin.Forms with Zxing NuGet

60011787-43d6-4bf9-bea8-dcf2c90a53dc

Adding a barcode functionality in any digital software system is the safest way to keep things safe from any kind of theft and misleading. Hence through the medium of this blog post, today we are going to teach you to add a barcode generator and scanner feature in a Xamarin mobile application in Xamarin.Forms with Zxing NuGet. In general, there are two types of barcodes are used which, are as below:

 

  1. Undimensional Barcode

It’s a kind of barcode which is represented by a series of several thick and thin vertical lines. We can also call it as a one dimensional barcode. Which is exactly look likes as shown in thr image:

  1. Two Dimensional Barcode

This form of barcode is also known as QR code, and is represented in the form of a square box which is filled with several design formats, sich as (rectangle box, square box, dots, lines, etc.) This is the standard way of barcodes.

Now let’s see how to generate a barcode:

When to generate a barcode, all you need to have a bit knowledge of a Object-Oriented programming language and Xamarin Technology.

  1. First of all install a pacckage of NuGet ZXing in your Xamarin.Forms as do a right click on thhe solution and select Manage NuGet Package
  2. Now we will add two different buttons on the page of our project, in which the first button will scan the barcode and the second button will be used to generate a barcode.

<Button Text=”Scan with Custom Page” Clicked=”ScanCustomPage”></Button>

<Button Text=”Barcode Generator” Clicked=”GenerateBarcode”></Button>

  1. Now add a new project in your project, where you can write a code for scanning a barcode, but before to do that add this attribute line code in the ContentPage of your project.

xmlns:zxing=”clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms” 

  1. Now create a grid element in the project, which basically contains the two elements which are as, the scanner view and the overlay.

Use the code below:

<Grid>

<zxing:ZXingScannerView x:Name=”zxing” HorizontalOptions=”FillAndExpand” VerticalOptions=”FillAndExpand” OnScanResult=”ZXingScannerView_OnOnScanResult” />

<zxing:ZXingDefaultOverlay x:Name=”overlay” TopText=”Hold your phone up to the barcode” BottomText=”Scanning will happen automatically” ShowFlashButton=”True” FlashButtonClicked=”Overlay_OnFlashButtonClicked” />

</Grid>

  1. Now we are moving on to adding a scanner and overlay action to the code, that we will write on the page which we have earlier created to write the scanning code. So open that file and add the below mentioned code;

private async void ZXingScannerView_OnOnScanResult(Result result) {

zxing.IsAnalyzing = false;

await DisplayAlert(“Scanned Barcode”, result.Text, “OK”);

await Navigation.PopAsync();

}

private void Overlay_OnFlashButtonClicked(Button sender, EventArgs e) {

zxing.IsTorchOn = !zxing.IsTorchOn;

}

  1. The above code is enough for barcode scanningn, and now it’s time to learn the code to generate a barcode/Qrcode. For this purpose, use the same XAML elements of the file page where we have add the barcode scanning code and add this code:

<StackLayout HorizontalOptions=”Center” VerticalOptions=”Center”>

<zxing:ZXingBarcodeImageView BarcodeFormat=”QR_CODE” BarcodeValue=”http://www.c-sharpcorner.com” />

</StackLayout>

  1. In final step, keep in mind to add the button click event from the Main page of your project;

private async void ScanCustomPage(object sender, EventArgs e) {

await Navigation.PushAsync(new ScannerPage());

}

private async void GenerateBarcode(object sender, EventArgs e) {

await Navigation.PushAsync(new QrCodePage());

}

  1. Now it’s time to take a android Application Permission to run the barcode scanner and generator feature in it. Use this code:

<uses-permission android:name=”android.permission.CAMERA” />

<uses-permission android:name=”android.permission.FLASHLIGHT” />

  1. Add the below mentioned one liner code in your Xamarin application for android on the OnCreate method.

global::ZXing.Net.Mobile.Forms.Android.Platform.Init(); 

That’s all, enjoy running a barcode generator and scanning feature into your Xamarin application.

by admin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>