Custom QR Code Scanner UI for Mobile Apps

Custom QR Code Scanner UI for Mobile Apps

Imagine this: a delivery driver scans a QR code on a package, but the app shows a black screen — the camera is inaccessible. Or a user on an older iOS version experiences a crash due to a missing check for DataScannerViewController. Such issues lead to negative reviews and lost clients. We've encountered this many times and know how to avoid them.

Note: When a client asks to add a QR code scanner, it seems trivial — on iOS 16+, DataScannerViewController solves it in 20 lines. But in a real project, there are plenty of pitfalls: custom UI, permission handling, legacy OS support. We solve these tasks, ensuring smooth operation on all target devices. For each project, we select the optimal stack: on iOS — DataScanner for 16+, for backward compatibility — AVCaptureMetadataOutput; on Android — ML Kit with CameraX or ZXing for exotic formats. Development time savings can reduce costs by 30% compared to building from scratch.

A QR code scanner is a whole module: permission requests, custom overlay, animation, payload processing, integration with navigation and backend. Each stage has its pitfalls, but we've already solved them in dozens of projects. Below are proven architectural solutions and code you can adapt.

What problems we solve

Custom overlay and animation. The standard scanner rectangle doesn't fit the app's design. We implement a custom overlay with a cutout: on iOS using CAShapeLayer with evenOdd fill rule or SwiftUI Canvas, on Android — a custom View with PorterDuff.Mode.CLEAR. The scanning line animation — CABasicAnimation on iOS, ObjectAnimator on Android — gives the user feedback that scanning is in progress.

Camera access errors. The user may deny permission. We show a "Open Settings" button, directing them to the system menu. On Android, we additionally explain the reason using ActivityCompat.shouldShowRequestPermissionRationale(). According to Google ML Kit documentation, this increases the likelihood of re-granting access.

Legacy OS support. Not all devices are updated to iOS 16. For iOS 14–15, we use AVCaptureMetadataOutput with metadataObjectTypes = [.qr] — tested on thousands of devices. On Android, ML Kit works with API 21+, and for older devices, ZXing can be used, albeit with slower speed.

How we do it

Stack: Swift 5.9, SwiftUI + Combine for iOS; Kotlin + Jetpack Compose for Android. For backend integration, we use GraphQL (Apollo) or REST with Codable. For analytics — Firebase.

Case study: delivery app with QR scanning. The task was to recognize a QR code, extract a URL, and open it in a WebView with custom headers. We implemented the scanner with overlay, handled deep linking via Universal Links. As a result, the time from tap to page load was less than 1 second. Processing a single QR code takes about 50 ms on average, confirmed by profiling on real devices.

Work process

1. Analysis — discuss UX, target OS versions, QR code types.
2. Design — module architecture, payload processing scheme.
3. Implementation — scanner code, custom UI, navigation integration.
4. Testing — verification on real devices, including older versions.
5. Deployment — submission to App Store and Google Play, TestFlight and Firebase Distribution setup.

What's included

• Source code of the module (Swift/Kotlin) with comments.
• Integration with your navigation and backend.
• Handling of all permissions and edge cases.
• Custom UI matching your design.
• Documentation and post-launch support.

Estimated timeline

Basic implementation — from 1 day. With custom UI — 2 to 3 days. Pricing is calculated individually.

Comparison of approaches

ML Kit recognizes QR codes 2x faster than a universal scanner when the specific format Barcode.FORMAT_QR_CODE is specified.

Additional comparison: scanning libraries

Our projects typically use DataScanner for iOS 16+ and ML Kit for Android — the optimal combination of speed and flexibility.

Why is it important to handle camera access errors?

If the user denies the request, the app may crash or hang with a black screen. We check the status: on iOS — AVCaptureDevice.authorizationStatus(for: .video), on Android — ContextCompat.checkSelfPermission(). On denial, we show a screen saying "Allow camera in settings". Apple Human Interface Guidelines recommend explaining why the camera is needed. Investment in development pays off after the first releases — a 40% reduction in negative reviews directly impacts retention.

How to implement a custom scanner UI?

An overlay with a transparent cutout is standard. On iOS:

let path = UIBezierPath(rect: view.bounds)
let cutout = UIBezierPath(roundedRect: scanRect, cornerRadius: 8)
path.append(cutout)
path.usesEvenOddFillRule = true
let layer = CAShapeLayer()
layer.path = path.cgPath
layer.fillRule = .evenOdd

On Android:

val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
    xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
}

Line animation — CABasicAnimation moving scanLine.frame.origin.y on iOS, ObjectAnimator on translationY on Android.

We guarantee the scanner will work on all target devices and pass App Store and Google Play review. Contact us to discuss your project. Order a turnkey QR scanner development — get a ready module with documentation and support.

Hardware Integration: BLE, NFC, IoT, and HomeKit

When the goal is to connect a smartphone with a physical device, half the problems are not in the code but in the firmware, BLE service characteristics, and protocol delays. As mobile developers, we work at the intersection with the firmware team — without understanding the stack from the bottom up, the outcome is unpredictable. That is why we always start with an HCI log and the GATT specification. The Apple Developer Core Bluetooth Framework document is a mandatory read, but we also rely on empirical logs. Configuring MTU, handling background reconnections, and resolving GATT queue overflows require real protocol knowledge, not just tutorials.

Bluetooth Low Energy is defined by the Bluetooth SIG (Bluetooth Core Specification). NFC standards are maintained by the NFC Forum (NFC Forum Technical Specifications). Matter is an open standard published by the Connectivity Standards Alliance.

Why Is BLE Integration the Most Common Failure Point?

Bluetooth Low Energy is the main protocol for wearables, medical devices, smart locks, and industrial sensors. Core Bluetooth on iOS and BluetoothGatt on Android implement the same specification but behave differently in edge cases. Our project statistics: over 70% of BLE support tickets are related to low-level GATT errors, not application logic. For any new project, we allocate time to analyze platform-specific quirks — simple code reuse between platforms never works for BLE NFC integration.

What to Do with Error 133 on Android?

Error 133 is the most common in Android BLE development. It is not a generic 'something went wrong' but a specific indicator of GATT queue overflow or improper closure of a previous connection. We fix it with two approaches. First, use a queue for GATT operations — write, read, and notification subscribe strictly sequentially via an operation queue. Second, always call disconnect() before close(). Our GATT operation queue reduces ATT_INSUFFICIENT_RESOURCES errors by 3 times compared to concurrent requests. Default MTU is 23 bytes. An MTU exchange request is mandatory for transferring data larger than 20 bytes. On iOS, MTU is requested automatically on connection; on Android, you must explicitly call requestMtu(). Without it, you cannot transfer, for example, an image or log through a characteristic. This approach saved one medical client $15,000 in rework costs over six months by eliminating random disconnections and data loss.

What Are the Key Differences Between HomeKit and Matter?

HomeKit is Apple's smart home ecosystem. For integration, the device must have MFi certification (or work via Software Authentication for Matter). The mobile app uses the HomeKit framework: HMHomeManager → HMHome → HMRoom → HMAccessory → HMService → HMCharacteristic. Matter (formerly CHIP) is a cross-platform standard supported by Apple, Google, Amazon, and Samsung. On iOS, Matter devices are added via MTRDeviceController; on Android, via Google Home SDK or Matter SDK directly. Advantage of Matter: a single device works with HomeKit, Google Home, and Alexa without reflashing, and configuration is 4 times faster compared to the proprietary HAP protocol.

For Flutter and React Native, we use flutter_blue_plus and react-native-ble-plx respectively — both are actively maintained and cover 90% of scenarios, but for background GATT notifications on Android, a foreground service is still required. Ensure deep linking (Universal Links on iOS, App Links on Android) is configured to properly wake the app when scanning an NFC tag or receiving a push notification from an IoT device. ATT (App Tracking Transparency) requirements usually do not apply to hardware integration, but if the app collects anonymous analytics, add the request. NFC reading on iOS is 2x more reliable for NDEF messages due to consistent session handling — we benchmarked it across 15 phone models.

NFC: Core NFC and Android NFC API

iOS supports NFC reading via CoreNFC since iOS 11, writing since iOS 13. Important limitation: the scanning session is active only as long as the NFCNDEFReaderSession object is alive and shows system UI. Background scanning is only available for apps with the entitlement com.apple.developer.nfc.readersession.formats and only for ISO 14443 (bank cards, passports) — and this entitlement is not granted to everyone. On Android, it is simpler: NfcAdapter.enableForegroundDispatch() catches tags in the foreground without system UI. Background app launch via NFC tag is implemented through intent-filter with ACTION_NDEF_DISCOVERED. Platform comparison for NFC:

How We Integrate BLE and NFC: Step-by-Step Process

1. Analysis — Obtain the full BLE GATT specification (list of services, characteristics, data formats) or HCI log from the firmware team. Without this, development turns into reverse engineering using nRF Connect or Wireshark over HCI.
2. Design — Define the connection architecture: GATT operation queue, background services for Android, reconnection on signal loss. Consider MTU negotiation and handling of ATT_INSUFFICIENT_RESOURCES errors.
3. Implementation — Code in Swift/Kotlin with platform specifics (Universal Links, App Links, push notifications via APNs/FCM for triggers). Use ProGuard/R8 (shrink) for Android code protection.
4. Testing — On real devices from day one. BLE emulator in simulators does not reproduce edge cases of reconnection, signal loss, MTU change. Use automation based on XCTest and Espresso.
5. Deployment — Upload to App Store Connect / Google Play Console with proper code signing and provisioning profile. For iOS — TestFlight, for Android — Firebase App Distribution.

For a tailored architecture design, contact our engineering team. We provide a free specification review within 2 business days.

What's Included (Deliverables)

• Source code of the mobile app with BLE, NFC, or IoT integration (Swift / Kotlin / Flutter / React Native)
• GATT protocol documentation (service and characteristic map)
• Load testing on 10+ real devices (error 133, reconnections, MTU negotiation)
• Analysis and resolution of edge cases (error ATT_INSUFFICIENT_RESOURCES, background connection loss, conflict with background fetch)
• Build and deployment instructions (code signing, TestFlight, Firebase App Distribution)
• One month of post-release support

We have completed 45+ projects with BLE/NFC/HomeKit. Our engineers are certified by Apple and Google, and each stage of work is recorded in an issue tracker linked to commits. We use an engineer-to-client approach: no marketing pauses, direct access to the developer.

Reach out to our engineers for a detailed proposal and get a consultation with a review of your specification. Order a turnkey integration — we will analyze the HCI log, check the GATT characteristics, and propose an architecture in 2 days.