Tutorial: How to Use ImagePickerKMP in Android with Jetpack Compose
Picking images from the gallery or capturing from the camera has always been tricky in Android: dealing with permissions, intents, and different APIs.
With ImagePickerKMP, you can handle it in a declarative and clean way using Jetpack Compose, without worrying about the platform-specific details.
In this tutorial, you’ll learn how to:
- Integrate ImagePickerKMP in an Android app with Jetpack Compose.
- Show a live camera preview.
- Select images from the gallery.
- Customize the UI with the Customization API.
Step 1: Setup the dependency
Add the dependency in your build.gradle.kts (module level):
dependencies {
implementation("io.github.ismoy:imagepickerkmp:1.0.22") // Replace with the latest version
}
Step 2: Basic usage in Compose
ImagePickerKMP exposes an ImagePicker composable you can use directly.
Here’s the minimal example to open the camera or gallery:
ImagePickerLauncher(
config = ImagePickerConfig(
onPhotoCaptured = { result ->
// result here },
onError = {
//ppermission denied error on something else
},
onDismiss = {
showImagePicker = false // Reset state when user doesn't select anything
}
)
)
✅ This automatically handles:
Camera permissions.
Returning the result as URI / uri.
Step 3: UI Customization
ImagePickerKMP provides a Customization API so you can style your picker UI.
For example, let’s customize the TopBar and bottom controls:
ImagePickerLauncher(
config = ImagePickerConfig(
onPhotoCaptured = { result ->
photoResult = result
showCameraPicker = false
isPickerSheetVisible = false
},
onError = {
showCameraPicker = false
isPickerSheetVisible = false
},
onDismiss = {
showCameraPicker = false
isPickerSheetVisible = false
},
cameraCaptureConfig = CameraCaptureConfig(
permissionAndConfirmationConfig = PermissionAndConfirmationConfig(
customConfirmationView = { photoResult, onConfirm, onRetry ->
CustomAndroidConfirmationView(
result = photoResult,
onConfirm = onConfirm,
onRetry = onRetry
)
},
customDeniedDialog = { onRetry ->
CustomPermissionDialog(
title = "Permission Required",
message = "We need access to the camera to take photos",
onRetry = onRetry
)
},
customSettingsDialog = { onOpenSettings ->
CustomPermissionSettingsDialog(
title = "Go to Settings",
message = "Camera permission is required to capture photos. Please grant it in settings",
onOpenSettings = onOpenSettings
)
}
)
)
)
)
With this, you completely control the UI while still using the library’s camera engine.
Step 4: Multiple image selection
You can also allow multiple images to be selected from the gallery:
GalleryPickerLauncher(
onPhotosSelected = { photos ->
//result
},
onError = { error ->
//error
},
onDismiss = {
//when the result is null
},
allowMultiple = true, // False for single selection
mimeTypes = listOf("image/jpeg", "image/png"), // Optional: filter by type
)
Conclusion
With ImagePickerKMP you can:
Easily integrate camera and gallery in Jetpack Compose.
Customize the UI and user experience.
Use the same API across Android & iOS with Kotlin Multiplatform.
This saves you from handling ActivityResultContracts, Uri parsing, and permission requests manually — all while keeping your code clean and declarative.