App Inventor supports scanning of product identification “bar codes” and QR codes. Bar codes are typically found on consumer product packaging. QR codes are used for web addresses (so you can scan the QR code and go directly to the web address), part and product inventory tracking, and to deliver short messages.
In this tutorial, we create a simple App Inventor app to scan bar and QR codes.
Update: José Luis Núñez provides his own tutorial (in Spanish) for a bar code scanning app to check seating in a theater (written in App Inventor). Watch it on Youtube here: Curso de App Inventor 2 (José Luis Núñez)
Our App Inventor app has a simple user interface – a single button to scan either a bar or QR code. When pressed, the app activates the camera to scan the code and then returns a result value.
If the code is a numeric bar code value, the app displays a web page of information about the item corresponding to the bar code. If the returned code contains a web address, then that web address is displayed on screen. Here is an example from scanning the UPC code on a package of tea:
In the next example, a QR code containing http://appinventor.mit.edu is scanned:
Drag a WebViewer component from the Palette’s User Interface section, and drag a BarCodeScanner component from the Sensor’s section. The WebViewer is the “earth” icon in this screen, and the BarCodeScanner is an invisible component, below the canvas area.
Two labels are used – one to display the text “Result:” and the other to display the returned code.
To activate the BarCodeScanner, we call the DoScan method:
The above activates the camera and displays a view on screen (in Landscape mode). Once a bar code or QR code is successfully scanned, the camera is automatically turned off and an AfterScan event is generated.
The AfterScan event has one parameter named result; this contains the converted scan code – a numeric value for a bar code or an http:// URL for a web address (anything else is displayed in the lblBarCodeResult label, on screen).
Creating QR Codes
To create your own QR Code images use any of the QR code generators available online – just search for “Create QR Code free” – I used http://www.qrstuff.com/
Right Click (or Ctrl-Click on Mac OS X) and choose “Save as” (or similar wording): BarCode_Scanner.aia
E-Books and Printed Books
If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.
- App Inventor 2 Introduction (Volume 1 e-book)
Step-by-step guide to easy Android programming
- App Inventor 2 Advanced Concepts (Volume 2 e-book)
Step-by-step guide to Advanced features including TinyDB
- App Inventor 2 Databases and Files (Volume 3 e-book)
Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
- App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
Step-by-step guide to graphics, animation and charts
Thank you for visiting! — Ed
23 thoughts on “Scanning bar codes and QR Codes with App Inventor Apps”
Todd Frye liked this on Facebook.
Michael Lynch liked this on Facebook.
RT @AppInventorPlus: Scanning bar codes and QR Codes with App Inventor Apps: https://t.co/pM3eWuaFyq #Android #Appinventor #QRCodes
Johan Xt. Olsen liked this on Facebook.
Great work Edward!
Please, let me link an app that uses barcode scanner in order to check the seating capacity of a movie theater: http://goo.gl/r3U2ZC
Very good application! Nice!
José, I added a link to your tutorial at the top of my original blog post. Many of my visitors come from Spanish speaking countries. I am slowly learning Spanish but not well enough yet to write tutorials in Spanish! … Ed
Curso de Desarrollo de Aplicaciones móviles con App Inventor liked this on Facebook.
Aaron Shaw liked this on Facebook.
Jui-Hung Dof Liu liked this on Facebook.
Beppe Meglioranzi liked this on Facebook.
It says that i do not have a scanning application installed an I do
Guess you could try installing a different QR code scanning app from the Play Store and see if a different one would work.
App Inventor Elsa Consulting liked this on Facebook.
Hola, me llamo Pablo. Que tal?
Muy bien, gracias!
how cold we scan barcode img that we already have in our device .
is it posssible with app inventor 2
No, bar code scanning only works by viewing the bar code with the camera. It would be nice if we could re-scan a photo we’ve already taken but App Inventor’s bar code scanner feature does not support that.
Says, “Two labels are used – one to display the text “Result:” and the other to display the returned code,” but only one label is shown.
Also, what’s needed to test via the emulator? I get “Error 1501: Your device does not have a scanning application installed.”
I would guess that the emulator does not simulate a camera or the scanner function for QR codes. Probably only works on an actual phone or tablet device.