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

• [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:

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