Android Reference UI Integration

There are multiple options to integrate Camera Kit in your Android application. We are discussing some of the common techniques here. For more options and detailed code examples, check out our sample app repository on Snapchat GitHub account here.

Prerequisites: User permissions

You should have Camera Kit enabled in your app on Snap Kit Developer portal or from My-Lenses, and need to have an API Token as well as Group ID. Refer to this section for steps to Setup your Account. Use the Staging API Token for development and Production API Token (only after app approval) for production versions of the app. When you use Production API Token, the “Camera Kit Staging” watermark will be removed automatically.

For all of the options discussed here, you need to make sure the app has necessary permissions for Internet and Camera Access defined in the AndroidManifest file. You can optionally define user permissions for Microphone and Storage read write permissions based on your use case and Lens capabilities.

Option 1: Using CameraActivity

This is the simplest and quickest way to integrate Camera Kit. It provides live preview screen, Lenses carousel, shutter button, controls for inclusive camera, portrait mode, etc. However, it offers limited customization of the UI elements and functionality. CameraActivity will prompt the user for necessary permissions if they are not already granted. However you need to handle the cases when a user declines the required permission. Please note: there is no in-built support for Remote APIs in CameraActivity yet.

Example code for this option is demonstrated in camerakit-sample-simple example on GitHub. Steps to follow for integrating using CameraActivity:

Step 1: Add support-camera-activity as dependency in build.gradle file which pulls all other necessary dependencies:

// The artifact that provides CameraKit support CameraActivity which transitively pulls all the necessary
// dependencies to get a full-featured CameraKit based camera capture flow.
implementation ("com.snap.camerakit:support-camera-activity:$cameraKitVersion")

Step 2: Add the following code to your Activity class which will launch CameraActivity when the user clicks on Button with id some_button. Once the user takes the picture, the result will come back to your Activity. Please refer to MainActivity.kt file for Configuration options that you can use with CameraActivity. Don’t forget to add the API token and Lenses Group Id in the below code to fetch appropriate Lenses.

val captureLauncher = registerForActivityResult(CameraActivity.Capture) { result ->
    if (result is CameraActivity.Capture.Result.Success) {
        // ...
    }
}
findViewById<Button>(R.id.some_button).setOnClickListener {
    captureLauncher.launch(CameraActivity.Configuration.WithLenses(
        // NOTE: replace the values with values obtained from https://kit.snapchat.com/manage
        cameraKitApiToken = "ADD_API_TOKEN_HERE",
        // NOTE: replace the value with lenses group ID from https://my-lenses.snapchat.com/camera-kit/apps
        lensGroupIds = "ADD_GROUP_ID_HERE"
    ))
}

Step 3: [Optional] Source code for Camera Kit support modules is not obfuscated which means you have access to the source code of CameraActivity. You can copy the relevant code snippets you want in your activity as well as extend the activity for customizations you want.

Option 2: Using CameraLayout

This approach is more customizable compared to that of the CameraActivity approach discussed above. It uses support-camera-layout artifact which has CameraLayout class with an in-built Lenses Carousel, takes care of setting up Session, native Camera, ARCore session (if device supports this) for world tracking or true depth Lenses and managing a bunch of other views\features including Flash, Inclusive Camera controls, Portrait Mode, etc. This also will show the permission prompts if it’s not already granted by the user. While an instance of this class offers a way to customize each CameraKit Session by registering for callbacks such as onSessionAvailable, it is also possible to extend this class and override the protected fields and methods if different behavior is desired.

Example code for this option is demonstrated in camerakit-sample-full example on GitHub. Steps to follow for integrating with CameraLayout:

Step 1: Add the required dependencies for Camera Kit and support module:

// Provides the core implementation of Camera Kit
implementation ("com.snap.camerakit:camerakit:$cameraKitVersion")

// Provides an opinionated but extensible implementation that wraps
// camera as well as CameraKit Session management with a View that can be
// embedded into any Activity or Fragment where CameraKit integration is needed.
implementation ("com.snap.camerakit:support-camera-layout:$cameraKitVersion")

Step 2: In your layout xml file, add a view for CameraLayout:

<com.snap.camerakit.support.widget.CameraLayout
    android:id="@+id/camera_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Step 3: In the Activity file add the following code snippet. Don’t forget to add the API token and Lenses Group Id in the below code to fetch appropriate Lenses.

val cameraLayout = findViewById<CameraLayout>(R.id.camera_layout).apply {
    configureSession {
        apiToken(ADD_API_TOKEN_HERE)
    }
    configureLensesCarousel {
        observedGroupIds = linkedSetOf(ADD_GROUP_ID_HERE)
    }
}

Step 4: [Optional] Source code for Camera Kit support modules is not obfuscated which means you have access to the source code of CameraLayout. You can copy the relevant code snippets you want in your activity, look up any view with findViewById on cameraLayout object and customize it, etc.

Option 3: Using custom layout with Camera Kit Session

With this approach you will bring your own custom layout and attach that to Camera Kit Session. You can either bring your own Camera implementation and pass the source to the Session object or use the CameraXImageProcessorSource from support-camerax library. Also, you can use the SnapButtonView (part of support-snap-button library) as the shutter button as an option to users to capture the photo\video or you can provide your own implementation for shutter button. Code with SnapButtonView is not shown below but it’s available in the samples apps.

Example code for this option is demonstrated in camerakit-sample-custom-carousel example on GitHub. Steps to follow for this approach:

Step 1: Add the required dependencies for Camera Kit:

// Provides the core implementation of Camera Kit
implementation "com.snap.camerakit:camerakit:$cameraKitVersion"

// [Optional] Implementation of Camera pipeline for Camera Kit using CameraX library
implementation "com.snap.camerakit:support-camerax:$cameraKitVersion"

Step 2: In your layout xml file, add a ViewStub and attach that to Camera Kit Session using attachTo method. Provided ViewStub will inflate view hierarchy of Session which includes rendering camera preview with lenses. If no ViewStub is provided then Session does not attempt to render any views while the output of camera preview can be attached to using ImageProcessor.connectOutput. If you cannot provide ViewStub and connect output manually then it will not be possible for lenses to receive user’s touch input.

Add ViewStub to xml like this:

<ViewStub
    android:id="@+id/camera_kit_stub"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Then pass this View to Camera Kit Session like this:

import com.snap.camerakit.invoke
import com.snap.camerakit.support.camerax.CameraXImageProcessorSource

val imageProcessorSource = CameraXImageProcessorSource(
    context = this,
    lifecycleOwner = this
)

val cameraKitSession = Session(context = this) {
    apiToken(ADD_API_TOKEN_HERE)
    imageProcessorSource(imageProcessorSource)
    attachTo(findViewById(R.id.camera_kit_stub))
}.apply {
    lenses.repository.observe(
        LensesComponent.Repository.QueryCriteria.Available(ADD_GROUP_ID_HERE)
    ) { result ->
        result.whenHasSome { myLenses ->
            // applying the first Lens here but you can choose any other Lens from the list to be applied
            lenses.processor.apply(myLenses.first())
        }
    }
}