https://github.com/huhx/compose_image_picker
📸 Image Picker for Jetpack Compose
https://github.com/huhx/compose_image_picker
android image-picker-library jetpack-compose
Last synced: 6 months ago
JSON representation
📸 Image Picker for Jetpack Compose
- Host: GitHub
- URL: https://github.com/huhx/compose_image_picker
- Owner: huhx
- License: mit
- Created: 2022-07-26T06:30:56.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-08T23:19:17.000Z (about 1 year ago)
- Last Synced: 2025-04-01T01:01:42.634Z (7 months ago)
- Topics: android, image-picker-library, jetpack-compose
- Language: Kotlin
- Homepage:
- Size: 403 KB
- Stars: 59
- Watchers: 2
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Language: [English](README.md) | [中文简体](README_ZH.md)
## 📸 Image and Video Picker Library for Jetpack Compose
Easy to use and configurable Compose library to Pick an image or video from the Gallery.
## 🐱 Features
- [x] Pick Image or Video and preview
- [x] Capture Camera Image
- [x] Play and control the Video
- [x] Display Images group by directory
- [x] Pick gif image and preview
- [x] Dark and Light Theme
- [x] Internationalization support
- [x] Implement the permission to pick images
- [ ] To be continue....
## 🎬 Preview
Image Picker | Directory Selector | Image Preview |
:-------------------------:|:-------------------------:|:-------------------------:
 |  | 
Internationalization | Dart Theme | Picker Example |
:-------------------------:|:-------------------------:|:-------------------------:
 |  | 
## 💻 Preparation
1. Gradle dependency:
```groovy
implementation "io.github.huhx:compose-image-picker:1.0.8"
```
2. Add permission in AndroidManifest.xml file:
```xml
```
## 🎨 Usage
1. Create Composable method and you can implement the callback onPicked and onClose
```kotlin
@Composable
fun ImagePicker(
onPicked: (List) -> Unit,
onClose: (List) -> Unit,
) {
PickerPermissions(permissions = listOf(Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.CAMERA)) {
AssetPicker(
assetPickerConfig = AssetPickerConfig(gridCount = 3),
onPicked = onPicked,
onClose = onClose
)
}
}
```
2. Put the Composable you created in navigation routes
```kotlin
composable("asset_picker") {
ImagePicker(
onPicked = { assets ->
// implement the onPicked logic, pass the assets list that you picked
viewModel.selectedList.clear()
viewModel.selectedList.addAll(assets)
navController.navigateUp()
},
onClose = { assets ->
// implement the onClose logic, pass the assets list that you picked
viewModel.selectedList.clear()
navController.navigateUp()
}
)
}
```
3. Navigate to the specified route to pick images
```kotlin
navController.navigate("asset_picker")
```
> route name("asset_picker") should be the same as the name in the step two
4. You can customize the properties in AssetPickerConfig
```kotlin
data class AssetPickerConfig(
val maxAssets: Int = 9, // the maximum count you picked
val gridCount: Int = 3, // the column counts of LazyVerticalGrid that layout the images
val requestType: RequestType = RequestType.COMMON,
)
```
So you can configure the maxAssets and gridCount to meet the requirements for different screens
```kotlin
AssetPicker(
assetPickerConfig = AssetPickerConfig(gridCount = 4, maxAssets = 20),
onPicked = onPicked,
onClose = onClose
)
```
> For the detailed use of compose-image-picker library, please refer to the examples
## Drop a ⭐ if you like it. New features to be continue...
