This content originally appeared on Level Up Coding - Medium and was authored by Dobri Kostadinov
Mastering Image Capture and UI Integration with CameraX and Jetpack Compose
Introduction
CameraX is a Jetpack library introduced by Google to simplify the implementation of camera functionalities in Android apps. It offers an easy-to-use API that works consistently across a wide range of devices, making it an ideal choice for developers who need to incorporate camera features into their applications.
Jetpack Compose, on the other hand, is Android’s modern UI toolkit that simplifies UI development with a declarative approach. Combining CameraX with Jetpack Compose allows developers to create powerful, responsive, and modern camera applications.
This guide will cover the basics of CameraX, how to integrate it with Jetpack Compose, and provide practical examples to help you get started. The complete source code for this guide is available on https://github.com/d-kostadinov/medium.camera.x
Understanding CameraX
Key Features of CameraX:
- Backward Compatibility*: Works on devices running Android 5.0 (API level 21) and higher.
- Simple Configuration**: Easy setup with default configurations that work out-of-the-box for many use cases.
- Lifecycle-Aware: Automatically handles lifecycle events, reducing boilerplate code.
- Extensibility: Supports use cases like Preview, ImageCapture, and ImageAnalysis, which can be combined and customized.
- Device Support: Ensures consistent behavior across different Android devices.
Setting Up CameraX in Your Project
To use CameraX in your project, you need to add the required dependencies to your `build.gradle` file:
dependencies {
implementation "androidx.camera:camera-core:<latest-version>"
implementation "androidx.camera:camera-camera2:<latest-version>"
implementation "androidx.camera:camera-lifecycle:<latest-version>"
implementation "androidx.camera:camera-view:<latest-version>"
implementation "androidx.camera:camera-extensions:<latest-version>"
}
Or if you are using the version catalog feature:
[versions]
cameraX = "<latest-version>"
[libraries]
camera-core = { group = "androidx.camera", name = "camera-core", version.ref = "cameraX" }
camera-camera2 = { group = "androidx.camera", name = "camera-camera2", version.ref = "cameraX" }
camera-lifecycle = { group = "androidx.camera", name = "camera-lifecycle", version.ref = "cameraX" }
camera-view = { group = "androidx.camera", name = "camera-view", version.ref = "cameraX" }
camera-extensions = { group = "androidx.camera", name = "camera-extensions", version.ref = "cameraX" }
Make sure your project is using at least AndroidX and Kotlin as CameraX and Jetpack Compose are part of the Android Jetpack suite.
Integrating CameraX with Jetpack Compose
CameraX is traditionally used within a `CameraView` in the XML layout. However, since Jetpack Compose is UI-centric and eliminates XML layouts, integrating CameraX requires a different approach. The most common method is to use `AndroidView` to embed the CameraX `PreviewView` within a Compose layout.
Basic Example: Camera Preview with Jetpack Compose
Here’s a simple example of how you can set up a camera preview using CameraX and Jetpack Compose. For a demo purpose lets keep everything in one file:
import android.Manifest
import android.app.AlertDialog
import android.content.ContentValues
import android.content.pm.PackageManager
import android.os.Bundle
import android.os.Environment
import android.provider.MediaStore
import android.util.Log
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.result.ActivityResultLauncher
import androidx.activity.result.contract.ActivityResultContracts
import androidx.camera.core.CameraSelector
import androidx.camera.core.ImageCapture
import androidx.camera.core.ImageCaptureException
import androidx.camera.core.Preview
import androidx.camera.lifecycle.ProcessCameraProvider
import androidx.camera.view.PreviewView
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.RadioButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.core.app.ActivityCompat
import androidx.core.content.ContextCompat
import androidx.core.content.FileProvider
import androidx.core.content.FileProvider.getUriForFile
import com.medium.camerax.ui.theme.MediumCameraXTheme
import java.io.File
import java.util.concurrent.ExecutorService
import java.util.concurrent.Executors
class MainActivity : ComponentActivity() {
private lateinit var cameraExecutor: ExecutorService
private lateinit var requestPermissionLauncher: ActivityResultLauncher<String>
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
cameraExecutor = Executors.newSingleThreadExecutor()
// Initialize the permission launcher
requestPermissionLauncher = registerForActivityResult(
ActivityResultContracts.RequestPermission()
) { isGranted: Boolean ->
if (isGranted) {
// Permission granted, proceed with camera initialization
setContent {
MediumCameraXTheme {
CameraPreviewScreen(cameraExecutor)
}
}
} else {
// Permission denied, show a message
Toast.makeText(
this,
"Camera permission is required to use the camera",
Toast.LENGTH_SHORT
).show()
}
}
// Request camera permission
requestCameraPermission()
}
private fun requestCameraPermission() {
when {
ContextCompat.checkSelfPermission(
this,
Manifest.permission.CAMERA
) == PackageManager.PERMISSION_GRANTED -> {
// Permission already granted, proceed with camera initialization
setContent {
MediumCameraXTheme {
CameraPreviewScreen(cameraExecutor)
}
}
}
shouldShowRequestPermissionRationale(Manifest.permission.CAMERA) -> {
// Explain why the permission is needed and request it
showPermissionExplanationDialog()
}
else -> {
// Directly request the permission
requestPermissionLauncher.launch(Manifest.permission.CAMERA)
}
}
}
private fun showPermissionExplanationDialog() {
AlertDialog.Builder(this)
.setMessage("Camera permission is needed to use the camera features of this app.")
.setPositiveButton("OK") { _, _ ->
requestPermissionLauncher.launch(Manifest.permission.CAMERA)
}
.setNegativeButton("Cancel", null)
.show()
}
override fun onDestroy() {
super.onDestroy()
cameraExecutor.shutdown()
}
}
@Composable
fun CameraPreviewScreen(cameraExecutor: ExecutorService) {
val context = LocalContext.current
val cameraProviderFuture = remember { ProcessCameraProvider.getInstance(context) }
val previewView = remember { PreviewView(context) }
// State to control the selected saving option
var selectedOption by remember { mutableStateOf(0) }
// Remember the imageCapture instance
val imageCapture = remember { ImageCapture.Builder().build() }
// Initialize camera preview
LaunchedEffect(Unit) {
val cameraProvider = cameraProviderFuture.get()
val preview = Preview.Builder().build().also {
it.setSurfaceProvider(previewView.surfaceProvider)
}
val cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA
try {
cameraProvider.unbindAll()
cameraProvider.bindToLifecycle(
context as ComponentActivity,
cameraSelector,
preview,
imageCapture
)
} catch (exc: Exception) {
Log.e("CameraXApp", "Use case binding failed", exc)
}
}
fun capturePhoto() {
// Create output options based on the selected option
val outputOptions = when (selectedOption) {
0 -> {
// Saving to a File
val file = File(context.filesDir, "captured_image.jpg")
ImageCapture.OutputFileOptions.Builder(file).build()
}
1 -> {
// Saving to MediaStore
val contentValues = ContentValues().apply {
put(MediaStore.MediaColumns.DISPLAY_NAME, "captured_image.jpg")
put(MediaStore.MediaColumns.MIME_TYPE, "image/jpeg")
put(MediaStore.MediaColumns.RELATIVE_PATH, Environment.DIRECTORY_PICTURES)
}
ImageCapture.OutputFileOptions.Builder(
context.contentResolver,
MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
contentValues
).build()
}
2 -> {
// Saving to a File exposed via FileProvider URI
val file = File(context.filesDir, "captured_image.jpg")
val uri = FileProvider.getUriForFile(context, "com.example.fileprovider", file)
ImageCapture.OutputFileOptions.Builder(file).build()
}
3 -> {
// Saving to a Temporary File
val file = File.createTempFile("captured_image", ".jpg", context.cacheDir)
ImageCapture.OutputFileOptions.Builder(file).build()
}
else -> throw IllegalStateException("Unexpected value: $selectedOption")
}
// Capture the image
imageCapture.takePicture(
outputOptions,
cameraExecutor,
object : ImageCapture.OnImageSavedCallback {
override fun onImageSaved(outputFileResults: ImageCapture.OutputFileResults) {
// Show Toast on the main thread
(context as ComponentActivity).runOnUiThread {
Toast.makeText(context, "Image saved successfully", Toast.LENGTH_SHORT).show()
}
Log.d("CameraXApp", "Image saved successfully")
}
override fun onError(exception: ImageCaptureException) {
// Show Toast on the main thread
(context as ComponentActivity).runOnUiThread {
Toast.makeText(context, "Image capture failed", Toast.LENGTH_SHORT).show()
}
Log.e("CameraXApp", "Image capture failed", exception)
}
}
)
}
Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
RadioButtonWithLabel(
label = "Save to File",
selected = selectedOption == 0,
onClick = { selectedOption = 0 }
)
RadioButtonWithLabel(
label = "Save to MediaStore",
selected = selectedOption == 1,
onClick = { selectedOption = 1 }
)
RadioButtonWithLabel(
label = "Save to URI",
selected = selectedOption == 2,
onClick = { selectedOption = 2 }
)
RadioButtonWithLabel(
label = "Save to Temporary File",
selected = selectedOption == 3,
onClick = { selectedOption = 3 }
)
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = {
capturePhoto() // Call the function to capture the image
}
) {
Text("Capture Image")
}
Spacer(modifier = Modifier.height(16.dp))
AndroidView(
factory = { previewView },
modifier = Modifier.fillMaxSize()
)
}
}
@Composable
fun RadioButtonWithLabel(label: String, selected: Boolean, onClick: () -> Unit) {
Row(verticalAlignment = Alignment.CenterVertically) {
RadioButton(
selected = selected,
onClick = onClick
)
Spacer(modifier = Modifier.width(8.dp))
Text(text = label)
}
}
Explanation of the Code
This code demonstrates how to build a simple camera application using Jetpack Compose and CameraX, with an emphasis on saving captured images to different storage locations based on the user’s selection.
Main Components:
1.MainActivity
- Purpose: This is the entry point of the application. It handles permissions for the camera and sets up the content view with the CameraPreviewScreen composable.
- Camera Permissions: The app checks for camera permission on startup. If the permission is granted, the CameraPreviewScreen is displayed. If not, it prompts the user to grant the necessary permission.
- Lifecycle Management: The camera’s lifecycle is tied to the ComponentActivity, ensuring that camera resources are properly managed, and the camera is released when the activity is destroyed.
2. CameraPreviewScreen Composable
- Purpose: This composable is responsible for displaying the camera preview and providing UI controls for capturing images and choosing how to save them.
Camera Initialization:
— The camera is automatically initialized when the CameraPreviewScreen is displayed. The LaunchedEffect block binds the camera lifecycle to the activity and sets up the preview so the user can see what the camera is capturing in real-time.
— PreviewView: A view that displays the camera preview. This view is essential for showing the camera feed to the user, and it’s passed to the CameraX `Preview` use case.
Image Capture:
— The capturePhoto function is invoked when the user clicks the “Capture Image” button. This function determines where and how the image should be saved based on the selected option (internal storage, MediaStore, URI, or temporary file).
— ImageCapture.OutputFileOptions: This is configured according to the user’s choice and dictates where the captured image will be stored. Depending on the option selected, the output could be saved privately within the app or made publicly accessible.
3. Radio Buttons for Saving Options
The user can choose between four different options for saving the captured image:
1. Save to Internal Storage: The image is saved privately within the app’s internal storage.
2. Save to MediaStore: The image is saved in the device’s MediaStore, making it accessible to other apps and the system’s gallery.
3. Save to a File Exposed via `FileProvider` URI: The image is saved in internal storage, but a `FileProvider` is used to share the image with other apps securely. This is a simplified demonstration. For real-world applications, you’ll need to define the FileProvider in your app's Manifest file.
4. Save to Temporary File: The image is saved to a temporary file, typically used for short-term storage.
Detailed Functionality
- State Management:
var selectedOption by remember { mutableStateOf(0) }The variable `selectedOption` keeps track of the currently selected saving option. This state is managed by Jetpack Compose using the `remember` function, ensuring that the UI stays in sync with the user’s selection.
RadioButtonWithLabel Composable:
- Each radio button is created using a custom composable called RadioButtonWithLabel. This composable simplifies the creation of labeled radio buttons, ensuring consistent spacing and alignment.
@Composable
fun RadioButtonWithLabel(label: String, selected: Boolean, onClick: () -> Unit) {
Row(verticalAlignment = Alignment.CenterVertically) {
RadioButton(
selected = selected,
onClick = onClick
)
Spacer(modifier = Modifier.width(8.dp))
Text(text = label)
}
}
Explanation:
—RadioButton: This component is used to create a circular selection button. It has a `selected` parameter to determine whether it is selected and an `onClick` callback that updates the `selectedOption` state when clicked.
— Text: The label next to the radio button provides a clear description of the option, making it easy for users to understand what each button does.
— Row Layout: The radio button and label are aligned horizontally using a `Row` composable, with a small `Spacer` to add padding between the elements.
User Interaction:
— When a user selects a radio button, the `onClick` callback updates the `selectedOption` state, triggering a recomposition. This ensures that the selected option is visually indicated and that the `capturePhoto` function uses the correct storage method when the image is captured.
4. Capture Image Button
- This button triggers the image capture process, using the currently selected saving option. The result is displayed to the user via a `Toast` message indicating whether the capture was successful or if there was an error.
- Thread Safety: Since the image saving process might occur on a background thread, any UI updates, like showing a Toast, are safely moved to the main thread using runOnUiThread.
capturePhoto Function:
Purpose: This function handles the actual image capture and storage process, based on the user’s selected saving option. We already covered that let lets summarise where the files are saved:
Implementation:
— Internal Storage: Saves the image privately within the app’s internal storage, inaccessible to other apps.
— MediaStore: Saves the image in the device’s public MediaStore, making it visible in the system gallery and accessible by other apps.
— URI with FileProvider: Saves the image in internal storage but allows controlled sharing with other apps through a secure `Uri` generated by `FileProvider`.
— Temporary File: Saves the image as a temporary file, which is suitable for short-term use cases where the image does not need to be permanently stored.
Error Handling:
— If an error occurs during image capture, an error message is logged, and a `Toast` is shown to inform the user. Both success and error messages are displayed on the main thread to avoid threading issues.
Summary
This code provides a simple yet powerful example of how to integrate CameraX with Jetpack Compose to create a modern Android camera app. The user-friendly interface allows for real-time camera preview and offers flexibility in how images are stored. The use of `FileProvider` demonstrates how to securely share images with other apps, while the different saving options cater to various app requirements, from private storage to public access.
Conclusion
Combining CameraX with Jetpack Compose allows Android developers to create rich camera applications with modern UI elements. By leveraging the powerful features of CameraX and the declarative nature of Jetpack Compose, you can build intuitive, responsive, and visually appealing camera-based applications.
Dobri Kostadinov
Android Consultant | Trainer
Email me | Follow me on LinkedIn | Follow me on Medium | Buy me a coffee
CameraX and Jetpack Compose: A Guide for Android Developers was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Dobri Kostadinov
Dobri Kostadinov | Sciencx (2024-09-10T16:44:45+00:00) CameraX and Jetpack Compose: A Guide for Android Developers. Retrieved from https://www.scien.cx/2024/09/10/camerax-and-jetpack-compose-a-guide-for-android-developers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.