Barcode Scanning Made Easy with ZXing.Net Mobile

Avatar

James

Barcode scanning is a common functionality in many mobile applications. From checking attendees into an event and opening web pages to creating a conference scavenger hunt, there are plenty of use cases. ZXing.NET Mobile (Zebra crossing) is an open source library that makes scanning barcodes as effortless and painless as possible in your Xamarin and Xamarin.Forms applications.

Getting Started

ZXing.Net Mobile is available for your traditional Xamarin applications as both a component and a NuGet package that can be installed in your iOS, Android, Windows, and PCL projects. For this post I’m going go focus on the new ZXing.Net package enhanced for Xamarin.Forms. This is a special component and NuGet package that can easily be installed in your Xamarin.Forms projects that adds all the great functionality from the original library, but integrates deeply into Xamarin.Forms by allowing you to customize Xamarin.Forms pages with an embedded scanner. Ensure that you add the package or NuGet to all of your projects to get started.

Create a Scanner Page

You are able to get barcode scanning in your application with as little as two lines of code. First, create a new ZXingScannerPage and then push the page onto the navigation stack:

var scanPage = new ZXingScannerPage ();
// Navigate to our scanner page
await Navigation.PushAsync (scanPage);

This will bring up the barcode scanner and put it into scanner mode immediately.

Checking results

Of course, you’ll want to check the results of what was actually being scanned. You can do this when the OnScanResult event is fired to stop scanning, pop the scanner page, and check the result:

scanPage.OnScanResult += (result) => 
{
    // Stop scanning
    scanPage.IsScanning = false;

    // Pop the page and show the result
    Device.BeginInvokeOnMainThread (async () => 
    {
        await Navigation.PopAsync ();        
        await DisplayAlert("Scanned Barcode", result.Text, "OK");
    });
};

Handling Permissions

On Android ZXing.Net requires the Camera and Flashlight permission to function, so you’ll need to check these permissions in the project settings or add them to your Android Manifest:



When Android Marshmallow was released it added new runtime permissions when apps need to use features such as the camera or geolocation, similar to iOS. ZXing.Net will handle the runtime permissions in your app automatically by simply adding the following code to your MainActivity.cs:

public override void OnRequestPermissionsResult(int requestCode, string[] permissions, Permission[] grantResults)
{
    global::ZXing.Net.Mobile.Forms.Android.PermissionsHandler.OnRequestPermissionsResult (requestCode, permissions, grantResults);           
}

On Windows apps you’ll need to ensure that you select the Webcam permission. On iOS, ZXing handles everything.

Customization

There are several ways to customize the scanner pages. The easiest thing to do is to simply set additional properties on the default scanner page and pass it scanning options. This will allow you to customize the text on the page, but also adjust things such as scanning speed, types, and rotation:

//setup options
var options = new MobileBarcodeScanningOptions 
    { 
        AutoRotate = false,  
        UseFrontCameraIfAvailable = true,
        TryHarder = true,
        PossibleFormats = new List
        { 
           ZXing.BarcodeFormat.Ean8, ZXing.BarcodeFormat.Ean13 
        }
    };

//add options and customize page
scanPage = new ZXingScannerPage(options)
    {
        DefaultOverlayTopText = "Align the barcode within the frame",
        DefaultOverlayBottomText = string.Empty,
        DefaultOverlayShowFlashButton = true
    };

Learn More

This is just a sample of everything that ZXing.Net Mobile has to offer. You can continue to customize with custom overlays and even generate and display your very own Barcode with just a few lines of code. Be sure to read through the ZXing.Net Mobile Getting Started guide to learn more.

2 comments

Comments are closed. Login to edit/delete your existing comments

  • Brian Savage
    Brian Savage

    Hi James,
    I realise this is an old post, but this is the simplest version of ZXing that I found, and I got it to work on Android and iOS. So thanks for that. If anyone reads this, the requirement is to now to install both ZXing Nuget Packages for .Mobile and .Mobile.Forms. Other examples I tried to follow were more complex, creating services or separate Xamarin pages which just confused me even more.
    I have an issue with ZXing that I would be grateful for some guidance on. I believe it is something to do with threading but I am not sure and I am outside the edge of my knowledge envelope.
    Here is my working ZXing code section, based on your example:
    ZXingScannerPage scanPage = new ZXingScannerPage();await Navigation.PushModalAsync(scanPage);scanPage.OnScanResult += (result) =>{     // Stop scanning    scanPage.IsScanning = false;
         // Pop the page and show the result     Device.BeginInvokeOnMainThread(async () =>     {         await Navigation.PopModalAsync();         await DisplayAlert(“Scanned code”, result.Text, “OK”);         companyDetails.RecordingDeviceID = result.Text;         App.Database.SaveCompanyRecord(companyDetails);         recordDeviceButton.Text = result.Text;     });};
    If I take out the await DisplayAlert line it doesn’t work.
    The recordDeviceButton.Text is the button the user clicks to read the qr code, and I really want to have the device recognise a QR code and replace the text on the button with the code to show it has been read, without the user having to click “OK” on the DisplayAlert. Trying to keep it simple.
    If you could point me in the right direction I would be very grateful

    • Avatar
      TexAN Lee

      Did you find the solution?
      based on my understanding,
      if you want to delete the ‘await DisplayAlert’ line, you need to add await in your result.Text.
      companyDetails.RecordingDeviceID = await result.Text;