Language: English | 中文简体

📸 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

• Pick Image or Video and preview
• Capture Camera Image
• Play and control the Video
• Display Images group by directory
• Pick gif image and preview
• Dark and Light Theme
• Internationalization support
• 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:

implementation "io.github.huhx:compose-image-picker:1.0.8"

2. Add permission in AndroidManifest.xml file:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

🎨 Usage

1. Create Composable method and you can implement the callback onPicked and onClose

@Composable
fun ImagePicker(
    onPicked: (List<AssetInfo>) -> Unit,
    onClose: (List<AssetInfo>) -> 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

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

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

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

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...