7 11 月, 2023
By: LiHan
Jetpack Compose – Image Pick
Pick Image from Device . Take Image And Show Image
ImagePicker
- Create Uri value
- Launcher : rememberLauncherForActivityResult(ActivityResultContracts.PickVisualMedia())
- Trigger: PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)
.Add Coil Compose lib
dependencies {
....
//coil
implementation("io.coil-kt:coil-compose:2.5.0")
} |
.Code
rememberAsyncImagePainter:from coil lib , and show picked image
rememberLauncherForActivityResult : contract = ActivityResultContracts.PickVisualMedia()
request : PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)
var imageUri by remember {
mutableStateOf<Uri?>(null)
}
val pickerLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.PickVisualMedia(),
onResult = {
imageUri = it
}
)
Column{
Button(onClick = {
pickerLauncher.launch(
PickVisualMediaRequest(
ActivityResultContracts.PickVisualMedia.ImageOnly
)
)
}) {
Text(text = "Image Pick")
}
imageUri?.let {
Image(
modifier = Modifier.size(250.dp),
painter = rememberAsyncImagePainter(
ImageRequest.Builder(LocalContext.current)
.data(data = it)
.build()
),
contentDescription = "async image"
)
}
}
|
Take Photo And Show
- Camera Permission
- Add <Provider > Tag On AndroidManifast
- Add Xml File : paths
- Two Launcher , 1: Permisson , 2. Camera
- Create Uri File From Temp File
.Permission And Provider
Camera Permission
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera.any"/> |
Provider
<application>
.....
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.provider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/path_provider" />
</provider>
</application> |
.Provider Xml File
Save To Xml Folder .
<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
<external-cache-path name="images" path="/"/>
</paths> |
.Code
Flow : Click Button -> Request Permission -> If have permission -> Get Photo -> Without Permission -> Request Permission
checkPermission : ContextCompat.checkSelfPermission(context,Manifest.permission.CAMERA)
Create Uri :
val file = File.createTempFile(
"imageName",
".jpg",
context.externalCacheDir
)
val uri = FileProvider.getUriForFile(
Objects.requireNonNull(context),
context.packageName + ".provider" , file
) |
Camera Launcher : cameraLauncher.launch(uri)
Permission Launcher : permissionLauncher.launch(Manifest.permission.CAMERA)
val context = LocalContext.current
var imageUriCamera by remember {
mutableStateOf<Uri?>(null)
}
val file = File.createTempFile(
"imageName",
".jpg",
context.externalCacheDir
)
val uri = FileProvider.getUriForFile(
Objects.requireNonNull(context),
context.packageName + ".provider" , file
)
val cameraLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.TakePicture(),
onResult = {
imageUriCamera = uri
}
)
val permissionLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.RequestPermission(),
onResult = {
if (it){
cameraLauncher.launch(uri)
}else{
// Permission Denied
}
}
)
Button(onClick = {
val permissionCheckResult = ContextCompat.checkSelfPermission(
context,Manifest.permission.CAMERA
)
if (permissionCheckResult == PackageManager.PERMISSION_GRANTED){
cameraLauncher.launch(uri)
}else{
permissionLauncher.launch(
Manifest.permission.CAMERA
)
}
}) {
Text(text = "Take Photo")
}
imageUriCamera?.let {
Image(
modifier = Modifier.size(250.dp),
painter = rememberAsyncImagePainter(
ImageRequest.Builder(LocalContext.current)
.data(data = it)
.build()
),
contentDescription = "async image"
)
} |