Jetpack Compose Barcode Scanner tutorial – integrating our Android SDK with Kotlin

In this tutorial, we’ll use Jetpack Compose, a declarative UI framework using Kotlin, and the Scanbot Android Barcode Scanner SDK to create a simple barcode scanning app in Android Studio.

We’ll implement three different scanning modes: scanning one barcode at a time, multiple barcodes at once, and displaying the barcode values in the viewfinder using the SDK’s AR overlay.

We’ll achieve this in five steps:

1. Prepare the project

2. Initialize the SDK

3. Set up the main screen

4. Implement the scanning modes

5. Scan some barcodes!

All you need is the latest version of Android Studio and you’re good to go.

Step 1: Preparing the project

Open Android Studio, create a new Empty Activity project, and name it (e.g., “Compose Barcode Scanner”).

When your project is ready, go to settings.gradle.kts and add the Maven repositories for our SDK:

Now go to app/build.gradle.kts and add the dependencies for the Scanbot SDK and the RTU UI:

Sync the project.

💡 We’re using version 6.1.0 of the Scanbot Barcode Scanner SDK in this tutorial. You can find the latest version in the changelog.

Since we need to access the device camera to scan barcodes, let’s also add the necessary permissions in AndroidManifest.xml:

Step 2: Initializing the SDK

Before we can use the Scanbot Barcode Scanner SDK, we need to initialize it. The recommended approach is to do it in your implementation. This ensures the SDK is correctly initialized even when the app’s process is restored after being terminated in the background.

First, we need to create an subclass by right-clicking on the folder app/kotlin+java/com.example.composebarcodescanner, selecting New > Kotlin Class/File, and naming it (e.g. “ExampleApplication”).

In the resulting ExampleApplication.kt, let’s first add the necessary imports:

Then we make extend the class by adding and put the code for initializing the SDK inside it:

💡 Without a license key, our SDK only runs for 60 seconds per session. This is more than enough for the purposes of our tutorial, but if you like, you can generate a license key. Just make sure to change your in app/build.gradle.kts to and use that ID for generating the license.

Finally, we need to register the class in AndroidManifest.xml:

Step 3: Setting up the main screen

Now we’re going to build a rudimentary UI so we can quickly access the different scanning modes in our finished app.

For this tutorial, we’re going to go with a simple three-button layout.

Since the Compose template has already put a composable into MainActivity.kt, we’ll just replace the contents of MainActivity.kt with the following code, which includes the three buttons and the corresponding listeners:

Step 4: Implementing the scanning modes

Now we’ll connect each button with one of our RTU UI’s scanning modes, starting with single-barcode scanning.

Let’s first add the necessary imports to MainActivity.kt:

To use the RTU UI, we need to set up a configuration object for the barcode scanner. We’ll do this in the class. For simplicity, we will implement the mutable state for the configuration object and the barcode scanner view in the class, and if it is present, we will switch to the corresponding view. Therefore, we introduce a conditional statement in the class to either display a list of scanning modes or the barcode scanner view.

Let’s implement a common result presentation for all scanning modes. We will display the barcode value in a toast.

Replace the parameter of the with the following code:

Single-barcode scanning

Now we’ll implement the function as the parameter we send to the composable.

Add the following code to the class:

Now paste the configuration for the RTU UI’s single-barcode scanning mode (from the documentation) into the block:

If you want, you can run the app to try out the single-barcode scanning feature before we move on to the next mode.

Multi-barcode scanning

Let’s now set up the function for multi-barcode scanning, also for the composable in MainActivity.kt …

… and paste the configuration for multi-scanning into the block:

Try it out if you like and then move on to the final scanning mode.

AR overlay

By now you know the drill. In MainActivity.kt, set up the final function, this time for the AR overlay:

… and paste in the configuration for the AR overlay:

Build and run the app… and that’s it! 🎉

Step 5: Scanning some barcodes!

You can now scan barcodes one at a time, multiple barcodes in one go, and display their values on the screen via the AR overlay.

Happy scanning! 🤳

Conclusion

If this tutorial has piqued your interest in integrating barcode scanning functionalities into your Android app, make sure to take a look at our SDK’s other neat features in our documentation – or run our example project for a more hands-on experience.

Should you have questions about this tutorial or run into any issues, we’re happy to help! Just shoot us an email via tutorial-support@scanbot.io.