In this Jetpack compose tutorial we will learn how to capture image from camera using Jetpack compose in Android application.
Let's get started
Step 1: Create android application in android studio
Step 2: Follow step for setup Jetpack Compose with Android Studio
Add one button, on clicking which we are going to capture image from camera
JetPackTheme(darkTheme = true) { Scaffold(content = { Column( modifier = Modifier.padding(16.dp), content = { Button(onClick = { }, content = { Text(text = "Capture Image From Camera") }) }) }) } |
Add a remember say bitmap which will store the captured image bitmap value
val bitmap = remember { mutableStateOf(null) } |
Add rememberLauncherForActivityResult which will register a request to start an activity from result which will create a record in the registry.
val launcher = rememberLauncherForActivityResult(ActivityResultContracts.TakePicturePreview()) { bitmap.value = it } |
Let capture the image and display in Image view
Column( modifier = Modifier.padding(16.dp), content = { Button(onClick = { launcher.launch( ) }, content = { Text(text = "Capture Image From Camera") }) Spacer(modifier = Modifier.padding(16.dp)) bitmap.let { val data = it.value if (data != null) { Image( bitmap = data.asImageBitmap(), contentDescription = null, modifier = Modifier.size(400.dp) ) } } }) |
Full code
package com.example.jetpack import android.graphics.Bitmap import android.graphics.ImageDecoder import android.net.Uri import android.os.Build import android.os.Bundle import android.provider.MediaStore import android.view.WindowManager import androidx.activity.ComponentActivity import androidx.activity.compose.rememberLauncherForActivityResult import androidx.activity.compose.setContent import androidx.activity.result.contract.ActivityResultContracts import androidx.activity.result.launch import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.material.Button import androidx.compose.material.Scaffold import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.jetpack.ui.theme.JetPackTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE) setContent { CaptureImageFromCamera() } } } @Composable fun CaptureImageFromCamera() { JetPackTheme(darkTheme = true) { Scaffold(content = { val bitmap = remember { mutableStateOf(null) } val launcher = rememberLauncherForActivityResult(ActivityResultContracts.TakePicturePreview()) { bitmap.value = it } Column( modifier = Modifier.padding(16.dp), content = { Button(onClick = { launcher.launch( ) }, content = { Text(text = "Capture Image From Camera") }) Spacer(modifier = Modifier.padding(16.dp)) bitmap.let { val data = it.value if (data != null) { Image( bitmap = data.asImageBitmap(), contentDescription = null, modifier = Modifier.size(400.dp) ) } } }) }) } } @Preview(showBackground = true) @Composable fun DefaultPreview() { CaptureImageFromCamera() } |
Conclusion: In this jetpack compose tutorial series we have covered how to capture image from camera and set to imageview. Read about how to pick image from gallery using jetpack compose.
Article Contributed By :
|
|
|
|
4589 Views |