Scanner – Xamarin.Forms

Olá, neste post irei demonstrar como criar um scanner de barcode em aplicações Xamarin.Forms. Com esse scanner será possível ler os seguintes tipos de códigos:

  • Aztec
  • Code 128
  • Code 39
  • Code 93
  • EAN13
  • EAN8
  • PDF417
  • QR
  • UPC-E

ADICIONANDO O NUGET PACKAGE

Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”

1.1

 

Digite “Zxing.Net.Mobile” e selecione o plugin como demonstrado na imagem a seguir.

1

 

Selecione todos os projetos e clique no botão “Install”.

3

Xaml

Crie um botão para acionar o scanner, na propriedade “Clicked” adicione uma chamada para o método “OpenScanner”.

CODE-BEHIND

Crie o método “Scanner” que será chamado pelo método “OpenScanner”.

No método “Scanner” crie uma ZXingScannerPage, que será responsável por realizar a leitura do barcode, assim que obtiver um resultado irá parar de escanear e demonstra-lo em um DisplayAlert.

CONFIGURAÇÕES DA PLATAFORMA

É necessário realizar algumas configurações de acordo com cada plataforma, para definir permissões e etc…

Android

Edite o manifesto para adicionar algumas permissões, para isso clique com o botão direito no projeto .android e selecione Properties.

4

 

No Android Manifest selecione “CAMERA”, assim terá permissão para acionar a câmera do dispositivo.

permissions

MainActivity.cs

No arquivo MainActivity sobrescreva o método “OnRequestPermissionsResult” como demonstrado a seguir.

iOS

Adicionar permissões para que o seu app acesse a câmera na plataforma iOS é necessário editar o arquivo Info.plist que encontra-se no seu projeto .iOS

5

 

No arquivo Info.plist adicione a chave NSCameraUsageDescription como demonstrado a seguir.

AppDelegate.cs

No arquivo AppDelegate inicialize o ZXing adicionando a linha de código demonstrada a seguir dentro do método FinishedLaunching.

Resultado

ezgif.com-gif-maker

 

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

24 comentários em “Scanner – Xamarin.Forms

  1. Juliano, talvez para facilitar os usuário que irão ler esse post, deixo registrado que para funcionar esse exemplo, é necessário que o App seja baseado em uma NavigationPage. Informá-lo na classe App.

    ex:
    MainPage = new NavigationPage(new BarcodeScanner.MainPage());

    Curtir

  2. Hi,
    I’m new on mobile programming,
    my question will be obvious to you…
    I would like to change your QR-Code-Scanner-Xamarin.Forms sample,
    I need to add a textbox to main page,
    and the barcode instead of being displayed in a popup it is put in the textbox.
    Can you help me ?

    Curtir

    1. Hi Mark,

      Yes I can 😀
      First, create a Entry in your page:

      After, in your method scanner use:

      Device.BeginInvokeOnMainThread(() => {
      Navigation.PopAsync();

      yourEntry.Text = result.Text;
      });

      Hope this helps.

      Curtir

  3. hy. Thanx for article. But I get error after installing ZXing: “Package ‘ZXing.Net.Mobile 2.3.2’ was restored using ‘.NETFramework,Version=v4.6.1’ instead of the project target framework ‘.NETStandard,Version=v2.0’. This package may not be fully compatible with your project. ” I look at propreties and it does targets to v2.0. Then why do project is being created as .NET4.6, but restores as v2.0 instead ? what is the point? confusing.. Btw, I got errors after trying to “Live Run”: 1. The name ‘ZXing’ does not exist in the current context.2. The type or namespace name ‘ZXing’ could not be found .3. The type or namespace name ‘ZXingScannerPage’ could not be found. Each error suggest to check if I may be missing directives or assemblies though instelisense works very well and project builds up without errors. Error arrise when trying to run. Hope to hear from you. Thanx.

    Curtir

    1. Hello Ramin,
      Thanks, i’m happy in see that my posts its help you.

      Try use ScannerPage.ToggleTorch(); but i think not have button for ZXingScannerPage.

      I hope help you.
      Merry Christmas.

      Curtir

  4. Hi,

    I am working based on your tutorial..
    In project i am using pcl , not shared project

    I got the warning like
    Package ‘ZXing.Net.Mobile 2.3.2’ was restored using ‘.NETFramework,Version=v4.6.1’ instead of the project target framework ‘.NETStandard,Version=v2.0’. This package may not be fully compatible with your project.

    Please help me..
    How Can I solve this.

    Curtir

    1. Hi Siva,

      In the moment this nuget package show warning, but this work normally.

      I believe that in the future this nuget to be update.

      Curtir

    1. Obrigado Joilson 🙂
      Fico feliz em saber disso, me formei pela FATEC de Sorocaba.

      Se precisarem de alguma palestra ai na FATEC ZL me coloco a disposição.

      Abraço

      Curtir

  5. Hi Juliano,
    Thanks for your post and sample. I was looking for QR-Code scanner for Xamarin and ended up here.
    When I clone your repo and run, it works perfectly fine but when I start a new project and follow every steps as you said I got an error when I run it at
    LoadApplication(new App());
    in MainActivity in my Android project.

    Error :
    Unhandled Exception:
    System.NullReferenceException: Object reference not set to an instance of an object. occurred

    Im using
    Visual Studio Community 2017 Version 15.5.7
    Windows 10
    Google Nexus 5 connected via cable

    I noticed you have a package “FastAndroidCamera” but you didnt mention in your steps.
    I even tried installing same Xamarin version you have 2.3.4.270 but it didnt help.

    Any Idea? Can you please help me?

    Thanks in advance
    Hovik

    Curtir

  6. Bom dia Juliano, estou testando com um tablet Android 4.4, e a leitura não é realizada, testei em outro celular Samsung e a leitura é realizada com muito custo, demora um pouco, há algum ajuste que posso realizar no código para melhorar a efetividade da leitura?

    Curtir

    1. Olá Adriano, tudo bem ?
      Você já testou com outro código, as vezes o problema pode ser a qualidade do código que você está utilizando.
      Espero ter ajudado.

      Curtir

  7. Excelente Tutorial Juliano !!! Uma dúvida ! Gostaria de saber se tem como Customizar a ScanPage, tirando essa linha vermelha e colocando um quadrado com bordas na cor verde-limão . Existe essa possibilidade de Customizar o Zxing ?

    Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s