Facilitates image selection and camera functionalities with a customizable UI. Offers features like single/multiple image picking, camera mode toggling, and image resizing options for efficient application integration.
📂 Kotlin Multiplatform library for Compose Multiplatform, designed for seamless integration of an image picker feature in iOS and Android applications.
peekaboo is based on Compose Multiplatform, currently targeting only iOS and Android.
Please note that it primarily focuses on these platforms, and additional platforms may be considered in the future.
When using peekaboo on Android, ensure that Google's Jetpack Compose version is compatible with peekaboo's Compose Multiplatform version.
The minimum supported Android SDK is 24 (Android 7.0).
In your commonMain configuration, add the desired dependency, either peekaboo-ui or peekaboo-image-picker, to your project. Both are available on Maven Central.
commonMain {
dependencies {
// peekaboo-ui
implementation("io.github.onseok:peekaboo-ui:$latest_version")
// peekaboo-image-picker
implementation("io.github.onseok:peekaboo-image-picker:$latest_version")
}
}
First, define the version in libs.versions.toml:
[versions]
peekaboo = "0.5.2"
[libraries]
peekaboo-ui = { module = "io.github.onseok:peekaboo-ui", version.ref = "peekaboo" }
peekaboo-image-picker = { module = "io.github.onseok:peekaboo-image-picker", version.ref = "peekaboo" }
Then, in your commonMain configuration, reference the defined version:
commonMain {
dependencies {
// peekaboo-ui
implementation(libs.peekaboo.ui)
// peekaboo-image-picker
implementation(libs.peekaboo.image.picker)
}
}
| Name | Description |
|---|---|
In order to access the camera on iOS devices, it's essential to include a specific key-value pair in the Info.plist file of your iOS project. This key-value pair comprises a key that identifies the type of permission being requested and a value that provides a user-friendly description explaining why the app needs access to the camera.
Here's the key-value pair you should add to your Info.plist:
<key>Privacy - Camera Usage Description</key>
<string>This app uses camera for capturing photos.</string>
PeekabooCamera is a composable function that provides a customizable camera UI within a Compose Multiplatform application.
@Composable
fun CustomCameraView() {
val state = rememberPeekabooCameraState(onCapture = { /* Handle captured images */ })
PeekabooCamera(
state = state,
modifier = Modifier.fillMaxSize(),
permissionDeniedContent = {
// Custom UI content for permission denied scenario
},
)
}
@Composable
fun CustomCameraView() {
val state = rememberPeekabooCameraState(onCapture = { /* Handle captured images */ })
Box(modifier = Modifier.fillMaxSize()) {
PeekabooCamera(
state = state,
modifier = Modifier.fillMaxSize(),
permissionDeniedContent = {
// Custom UI content for permission denied scenario
},
)
// Draw here UI you need with provided state
YourCameraOverlay(
state = state,
modifier = Modifier.fillMaxSize(),
)
}
}
state : The PeekabooCameraState to control camera.permissionDeniedContent : An optional composable lambda that provides content to be displayed when camera permission is denied. This allows users to define a custom UI to inform or guide the user when camera access has been denied. The content can be informative text, an image, a button to redirect the user to settings, or any other content. This lambda will be invoked within the composable scope, replacing the camera preview with the user-defined UI.rememberPeekabooCameraState(
initialCameraMode: CameraMode = CameraMode.Back,
onCapture: (ByteArray?) -> Unit,
)
initialCameraMode : The initial camera mode (front or back). Default is [CameraMode.Back]. Changes does not affect state. To toggle use [PeekabooCameraState.toggleCamera]onCapture : A lambda called when a photo is captured, providing the photo as a ByteArray or null if the capture fails.| Android | iOS |
|---|---|
| Android | iOS |
|---|---|
| Android | iOS |
|---|---|
val scope = rememberCoroutineScope()
val singleImagePicker = rememberImagePickerLauncher(
selectionMode = SelectionMode.Single,
scope = scope,
onResult = { byteArrays ->
byteArrays.firstOrNull()?.let {
// Process the selected images' ByteArrays.
println(it)
}
}
)
Button(
onClick = {
singleImagePicker.launch()
}
) {
Text("Pick Single Image")
}
| Android | iOS |
|---|---|
Simply select the desired image with an intuitive interface.
If you want to select multiple images, you can use SelectionMode.Multiple(). And you can set the maximum number of images to select.
If you didn't set max selection, the default value is maximum number that the system supports.
val scope = rememberCoroutineScope()
val multipleImagePicker = rememberImagePickerLauncher(
// Optional: Set a maximum selection limit, e.g., SelectionMode.Multiple(maxSelection = 5).
// Default: No limit, depends on system's maximum capacity.
selectionMode = SelectionMode.Multiple(maxSelection = 5),
scope = scope,
onResult = { byteArrays ->
byteArrays.forEach {
// Process the selected images' ByteArrays.
println(it)
}
}
)
Button(
onClick = {
multipleImagePicker.launch()
}
) {
Text("Pick Multiple Images")
}
| Android | iOS |
|---|---|
peekaboo offers customizable resizing options for both single and multiple image selections, along with a new feature to resize images only if they exceed a certain file size.
This feature allows you to resize the selected images to specific dimensions, optimizing them for your application's requirements and enhancing performance.
800 x 800 pixels.1MB, meaning images larger than this size will be resized.Set the resizeOptions parameter in rememberImagePickerLauncher with your desired dimensions, threshold and compression quality:
val resizeOptions = ResizeOptions(
width = 1200, // Custom width
height = 1200, // Custom height
resizeThresholdBytes = 2 * 1024 * 1024L, // Custom threshold for 2MB,
compressionQuality = 0.5 // Adjust compression quality (0.0 to 1.0)
)
val singleImagePicker = rememberImagePickerLauncher(
selectionMode = SelectionMode.Single,
scope = rememberCoroutineScope(),
resizeOptions = resizeOptions,
onResult = { byteArrays ->
byteArrays.firstOrNull()?.let {
// Process the resized image's ByteArray
println(it)
}
}
)
val multipleImagePicker = rememberImagePickerLauncher(
selectionMode = SelectionMode.Multiple(maxSelection = 5),
scope = rememberCoroutineScope(),
resizeOptions = resizeOptions,
onResult = { byteArrays ->
byteArrays.forEach {
// Process the resized images' ByteArrays
println(it)
}
}
)
💡 Note: While resizing, the aspect ratio of the original images is preserved. The final dimensions may slightly vary to maintain the original proportions.
peekaboo-image-picker now offers customizable filter options for selected images.
This feature is available on both Android and iOS devices.
| Default | GrayScale | Sepia | Invert |
|---|---|---|---|
Set the filterOptions parameter in rememberImagePickerLauncher:
val imagePicker = rememberImagePickerLauncher(
selectionMode = SelectionMode.Single,
scope = rememberCoroutineScope(),
filterOptions = FilterOptions.GrayScale,
onResult = { byteArrays ->
// Process the filtered images' ByteArrays
}
)
💡 Note: The default filter option is
Default, which applies no filter. Choose fromGrayScale,Sepia, orInvertfor different effects.
We've added a new extension function toImageBitmap() to convert a ByteArray into an ImageBitmap.
This function simplifies the process of converting image data into a displayable format, enhancing the app's capability to handle image processing efficiently.
val imageBitmap = byteArray.toImageBitmap()
Contributions are always welcome!
If you'd like to contribute, please feel free to create a PR or open an issue. 👍
Support it by joining stargazers for this repository. :star:
Copyright 2024 onseok
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
peekaboo-uiProvides user-friendly UI elements, including a custom camera view for easy image capture, suitable for both iOS and Android platforms. |
peekaboo-image-picker | Simplifies the process of selecting single or multiple images both in iOS and Android platforms. |
composablePeekabooCameraPeekabooCameraState.isCameraReady : True if camera already available for showPeekabooCameraState.isCapturing : True if camera is in progress of capturePeekabooCameraState.cameraMode : Current camera mode (front or back)Surfaced from shared tags and platforms — no rankings paid for.