Overview
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)
User Interface
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:
Designer View
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.
Blocks 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/
Download Source
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
Todd Frye liked this on Facebook.
LikeLike
Michael Lynch liked this on Facebook.
LikeLike
RT @AppInventorPlus: Scanning bar codes and QR Codes with App Inventor Apps: https://t.co/pM3eWuaFyq #Android #Appinventor #QRCodes
LikeLike
Johan Xt. Olsen liked this on Facebook.
LikeLike
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
LikeLike
Very good application! Nice!
LikeLike
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
LikeLike
Curso de Desarrollo de Aplicaciones móviles con App Inventor liked this on Facebook.
LikeLike
Aaron Shaw liked this on Facebook.
LikeLike
Jui-Hung Dof Liu liked this on Facebook.
LikeLike
Beppe Meglioranzi liked this on Facebook.
LikeLike
It says that i do not have a scanning application installed an I do
LikeLike
Guess you could try installing a different QR code scanning app from the Play Store and see if a different one would work.
LikeLike
Disable UseExternalScanner…
LikeLike
App Inventor Elsa Consulting liked this on Facebook.
LikeLike
Hola, me llamo Pablo. Que tal?
LikeLike
Muy bien, gracias!
LikeLike
how cold we scan barcode img that we already have in our device .
is it posssible with app inventor 2
LikeLike
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.
LikeLike
Pingback: 바코드스캔과 데이터베이스 - play with coding
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.
LikeLike
Also, what’s needed to test via the emulator? I get “Error 1501: Your device does not have a scanning application installed.”
LikeLike
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.
Ed
LikeLike