How to setup a camera in an Android app using Jetpack Compose

Oscar de la Hera Gomez
Four flowers that represent Kotlin, Android, Jetpack Compose and Android Studio side by side. Beneath them sits the text “CameraX Composable.”

A step by step guide on setting up a bare bones Android CameraX feed using Jetpack Compose, Kotlin and Android Studio.

The following tutorial builds on our Open Source Kotlin project which can be downloaded using the link below, and aims to walk you through how to create a Composable that dynamically adapts to fit its content.

The composable CameraX feed that we create is very similar to the first version that we created for Price After.

We recommend that you checkout the main branch and carry out the steps described below. The changes that took place can be found on the tutorial/jetpack-compose/camerax/setup.

git clone git@github.com:delasign/kotlin-android-starter-project.git

Step One: Add the Feature and Permission

A screenshot of Android Studio showing you how to add the camera permissions and hardware feature to the AndroidManifest.xml. Code available below.

In the projects AndroidManifest.xml file, add the following feature & permission:

<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera.any"/>

Step Two: Add the Dependencies

A screenshot of Android Studio showing you the build.gradle.kts at the app level. Highlighted are the dependencies that need to be added. These are described below.

In the App Level build.gradle.kts file, add the following dependencies:

implementation("androidx.camera:camera-camera2:1.2.3")

implementation("androidx.camera:camera-lifecycle:1.2.3")

implementation("androidx.camera:camera-view:1.3.0-beta01")

Please note that versions displayed above may not be the latest versions, please update the code above to the latest version in your Android Studio project.

Step Three: Sync the Gradles

A screenshot of Android Studio showing a gradle file that has recently been modified. Highlighted is the "Sync Now" button that appears on the right of the prompt at the top of the Gradle file. Click this button to sync the gradle files with the project.

Press Sync Now in the bar above the Gradle to update the project dependencies.

Step Four: Request Permissions

A screenshot of Android Studio showing the MainActivity.kt file. It demonstrates some of the code that we provide in this subsequent step.

The following step walks you through how to setup permissions for an Android Camera.

A | Create the should show camera state

A screenshot of Android Studio showing you how to add the shouldShowCamera state to the Android activity.

In the activity, add a mutable state to dictate when the camera has permissions or not.

The logic behind this is to only show the camera, if permissions have been granted.

var shouldShowCamera: MutableState = mutableStateOf(false)

B | Create the Permissions Launcher

A screenshot of Android Studio showing the request camera launcher in an Android activity.

Create a camera permissions launcher that will be used to determine what permissions that app has.

C | Create the request permissions functionality

A screenshot of Android Studio showing the Permissions.kt file that we created along with the underlying functionality.

Add the function below to the app.

Its purpose is to determine if the app already has camera permissions or if they have been denied, and if not to request camera permissions.

D | Request permissions on create

A screenshot of Android Studio highlighting that you need to request camera permissions in the onCreate lifecycle function.

In the activity, in the onCreate lifecycle function, call the requestCameraPermission() function.

E | Request permissions on resume

A screenshot of Android Studio highlighting that you need to request camera permissions in the onResume lifecycle function.

In the activity, in the onResume lifecycle function, call the requestCameraPermission() function.

Step Five: Create the Camera Composable

A screenshot of Android Studio showing the CameraX composable code in a Camera.kt file found under the UI folder.

Create a new file called Camera.kt and paste in the code below

Step Six: Add the remaining Camera functionality

A screenshot of Android Studio showing the MainActivity camera extension. Code available below.

The following step walks you through how to create the necessary functionality to start and stop the camera, as well as the remaining functionality required for the camera to work.

A | Add the Executor

A screenshot of Android Studio showing how to add the camera executor to the Activity.

In the Activity, create the following variable:

lateinit var cameraExecutor: ExecutorService

B | Add the Camera extension

A screenshot of Android Studio showing the MainActivity camera extension. Code available below.

Add the functionality below to the app.

The purpose of this functionality is to allow the app to start and stop the camera, as well as to create a camera provider which is required for the Camera Composable created in Step Five.

C | Start and Stop the Camera

A screenshot of Android Studio showing how to start the camera in the onCreate activity lifecycle function and to stop the camera in the onDestory activity lifecycle function.

In the Activity:

  • Call startCamera() in the onCreate lifecycle function.
  • Call stopCamera() in the onDestroy lifecycle function.

Step Seven: Add the Camera to the UI

A screenshot of Android Studio showing how to add the CameraX Composable to the MainActivity UI.

Add the CameraX composable created in Step Five to the apps UI.

Step Eight: Test

Two Android Emulator screens side by side. On the left it shows the app requesting permissions, on the right the camera functioning as expected.

Run the code and confirm that the permissions and camera work.

Looking to craft a premium experience ?

Follow Google I/O's Building high quality Android camera experiences to learn more.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details