BarcodeScanningCMP

A demo project showcasing Barcode Scanning implementation in Compose Multiplatform (CMP), targeting both Android and iOS. This project serves as a practical example for the technical article Barcode Scanning in Compose Multiplatform.

📱 Features

• Cross-Platform UI: Built with Compose Multiplatform for a consistent look and feel.
• Native Performance: Leverages platform-specific APIs for camera and barcode processing.
• Real-time Detection: Fast and accurate scanning of various barcode formats (QR, EAN, etc.).
• Shared Logic: Centralized state management and scanning callbacks.

🛠 Tech Stack

• Compose Multiplatform: Shared UI framework.
• Kotlin Multiplatform: Shared business logic.
• Android:
  • CameraX: Modern Android camera library.
  • ML Kit Barcode Scanning: High-performance barcode detection.
• iOS:
  • AVFoundation: Native Apple framework for camera and metadata capture.

🏗 Project Structure

• :shared: Contains the shared Compose UI and the expect/actual declarations for the barcode scanner.
  • commonMain: Shared UI and scanner interface.
  • androidMain: Implementation using CameraX and ML Kit.
  • iosMain: Implementation using AVFoundation and UIKitView.
• :androidApp: Entry point for the Android application.
• iosApp: Xcode project for the iOS application.

🚀 Getting Started

Prerequisites

• Android Studio (latest version)
• Xcode (for iOS development)
• Kotlin Multiplatform Mobile plugin installed in Android Studio.

Installation

1. Clone the repository:

   git clone https://github.com/your-username/BarcodeScanningCMP.git

2. Open the project in Android Studio.

Running the Apps

Android

• Select androidApp in the run configurations and click Run.
• Or use the command line:

  ./gradlew :androidApp:assembleDebug

iOS

• Open iosApp/iosApp.xcworkspace in Xcode.
• Select your target device/simulator and click Run.
• Note: Camera features require a physical device for actual scanning.

📖 Implementation Details

This project highlights a powerful pattern in Compose Multiplatform: declaring @Composable functions as expect/actual. This allows you to define a UI component's interface in common code while providing platform-specific implementations that leverage native views:

• Android: Uses AndroidView to host a CameraX PreviewView, with an ImageAnalysis analyzer that passes frames to ML Kit.
• iOS: Uses UIKitView to host a custom UIView (BarcodeScannerView) that manages an AVCaptureSession and handles AVCaptureMetadataOutput.

This approach demonstrates that the expect/actual mechanism isn't limited to logic—it's equally effective for platform-integrated UI components.

---

This project was created as a demo for the article Barcode Scanning in Compose Multiplatform on KMP Bits. Feel free to use it as a reference for your own Compose Multiplatform projects!