Skip to content

Latest commit

 

History

History
120 lines (97 loc) · 4.2 KB

README.md

File metadata and controls

120 lines (97 loc) · 4.2 KB

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"

  1. 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
        )
    }
}

  1. 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()
        }
    )
}

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


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

Star History Chart