Customize Your Scan Screen With The Scandit SDK

| Products & Solutions

Customize Your Scan Screen With The Scandit SDK

The Scandit SDK is not only super-easy to integrate into your app, but it also makes it very convenient for developers to customize the scan screen to their needs. This post showcases some of the approaches existing Scandit SDK users have chosen for their apps.

Cropped Scan View chose a design where the scan view is visible in the top half of the scan screen. The bottom half of the scan screen shows instructions. This is especially handy for users that are not used to scan barcodes with their mobile phone. In case of app, a counter of the points collected so far is shown right above the scan view and the products to be scanned are shown at the bottom. What is displayed  differs of course  from app to app.

Informational Scan View went with a similar approach where the scan view covers initially almost the entire screen. But as soon as a product is scanned, the appropriate information is shown in the bottom half of the screen, while the barcode scanner remains active.

Default Scandit Scan View
ExLibris, the Swiss media retailer, chose a design where the user initially chooses his favorite identification method (barcode scan, text search, image search). If he or she selects barcode scanning, the default Scandit SDK scan view, covering the whole screen, will be shown. Upon the successful scan of a product, the app shows the product information in a new view.

Codecheck uses a similar approach. Codecheck starts the barcode scanning via a tab view directly. The Codecheck team customized the scan view with their own logo.

The Scandit SDK provides an API that makes it easy for the developer to realize such custom scan views. The Scandit SDK API includes, for example, methods:

  • to integrate the scan view in a number of different ways (navigation, tab or modal view controllers are some of the options)
  • to adjust the sound being played when a barcode is scanned
  • to add a pre-configured search tool bar
  • to adjust the size and position of the white viewfinder
  • to customize the control of the flash light
  • to adjust the language used in the scan view instructions