{"id":20937290,"url":"https://github.com/huhx/compose_image_picker","last_synced_at":"2025-05-12T17:26:09.655Z","repository":{"id":52150041,"uuid":"517941295","full_name":"huhx/compose_image_picker","owner":"huhx","description":"📸 Image Picker for Jetpack Compose","archived":false,"fork":false,"pushed_at":"2024-09-08T23:19:17.000Z","size":413,"stargazers_count":59,"open_issues_count":8,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T01:01:42.634Z","etag":null,"topics":["android","image-picker-library","jetpack-compose"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huhx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-26T06:30:56.000Z","updated_at":"2025-01-21T08:42:59.000Z","dependencies_parsed_at":"2024-02-23T03:24:45.391Z","dependency_job_id":"8700f30a-8e6a-4d53-b4be-76d5b8113969","html_url":"https://github.com/huhx/compose_image_picker","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huhx%2Fcompose_image_picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huhx%2Fcompose_image_picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huhx%2Fcompose_image_picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huhx%2Fcompose_image_picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huhx","download_url":"https://codeload.github.com/huhx/compose_image_picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253785977,"owners_count":21964066,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","image-picker-library","jetpack-compose"],"created_at":"2024-11-18T22:34:53.054Z","updated_at":"2025-05-12T17:26:09.618Z","avatar_url":"https://github.com/huhx.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"Language: [English](README.md) | [中文简体](README_ZH.md)\n\n## 📸\u0026nbsp;Image and Video Picker Library for Jetpack Compose\n\nEasy to use and configurable Compose library to Pick an image or video from the Gallery.\n\n\n## 🐱\u0026nbsp;Features\n- [x] Pick Image or Video and preview\n- [x] Capture Camera Image\n- [x] Play and control the Video\n- [x] Display Images group by directory\n- [x] Pick gif image and preview\n- [x] Dark and Light Theme\n- [x] Internationalization support\n- [x] Implement the permission to pick images\n- [ ] To be continue....\n\n\n## 🎬\u0026nbsp;Preview\n\nImage Picker    |         Directory Selector      |       Image Preview        |\n:-------------------------:|:-------------------------:|:-------------------------:\n![](https://user-images.githubusercontent.com/15972372/181038075-b268f17b-9799-4a87-9dec-bbd865fe516e.gif)  |  ![](https://user-images.githubusercontent.com/15972372/181038392-d1bf6886-4bba-4a8c-bb14-ea454a0d52ba.gif)  |  ![](https://user-images.githubusercontent.com/15972372/181038444-e54fe454-d158-4b2c-ad7a-95d2e8bfe9a7.gif)\n\nInternationalization   |         Dart Theme     |        Picker Example       |\n:-------------------------:|:-------------------------:|:-------------------------:\n![](https://user-images.githubusercontent.com/15972372/182802765-0e091698-2994-49e6-8a57-1367fb39ef45.gif)  |  ![](https://user-images.githubusercontent.com/15972372/182802666-a82ef410-2a52-4f7d-854f-425e06e1896a.gif)  |  ![](https://user-images.githubusercontent.com/15972372/182802821-a6c0c2d9-f997-4e89-9e6f-64b9297ec92b.gif)\n\n\n## 💻\u0026nbsp;Preparation\n\n1. Gradle dependency:\n```groovy\nimplementation \"io.github.huhx:compose-image-picker:1.0.8\"\n```\n\n\u003cbr\u003e\n\n2. Add permission in AndroidManifest.xml file:\n```xml\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n\u003cuses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" /\u003e\n```\n\n\n## 🎨\u0026nbsp;Usage\n\n1. Create Composable method and you can implement the callback onPicked and onClose\n```kotlin\n@Composable\nfun ImagePicker(\n    onPicked: (List\u003cAssetInfo\u003e) -\u003e Unit,\n    onClose: (List\u003cAssetInfo\u003e) -\u003e Unit,\n) {\n    PickerPermissions(permissions = listOf(Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.CAMERA)) {\n        AssetPicker(\n            assetPickerConfig = AssetPickerConfig(gridCount = 3),\n            onPicked = onPicked,\n            onClose = onClose\n        )\n    }\n}\n```\n\u003cbr\u003e\n\n2. Put the Composable you created in navigation routes\n```kotlin\ncomposable(\"asset_picker\") {\n    ImagePicker(\n        onPicked = { assets -\u003e \n            // implement the onPicked logic, pass the assets list that you picked\n            viewModel.selectedList.clear()\n            viewModel.selectedList.addAll(assets)\n            navController.navigateUp()\n        },\n        onClose = { assets -\u003e\n        // implement the onClose logic, pass the assets list that you picked\n            viewModel.selectedList.clear()\n            navController.navigateUp()\n        }\n    )\n}\n```\n\u003cbr\u003e\n\n3. Navigate to the specified route to pick images\n```kotlin\nnavController.navigate(\"asset_picker\") \n```\n\u003e route name(\"asset_picker\") should be the same as the name in the step two\n\n\u003cbr\u003e\n\n4. You can customize the properties in AssetPickerConfig\n```kotlin\ndata class AssetPickerConfig(\n    val maxAssets: Int = 9, // the maximum count you picked\n    val gridCount: Int = 3, // the column counts of LazyVerticalGrid that layout the images\n    val requestType: RequestType = RequestType.COMMON,\n)\n```\nSo you can configure the maxAssets and gridCount to meet the requirements for different screens\n```kotlin\nAssetPicker(\n    assetPickerConfig = AssetPickerConfig(gridCount = 4, maxAssets = 20),\n    onPicked = onPicked,\n    onClose = onClose\n)\n```\n\u003e For the detailed use of compose-image-picker library, please refer to the examples\n\n## Drop a ⭐ if you like it. New features to be continue...\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=huhx/compose_image_picker\u0026type=Date\u0026theme=dark\" /\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://api.star-history.com/svg?repos=huhx/compose_image_picker\u0026type=Date\" /\u003e\n  \u003cimg alt=\"Star History Chart\" src=\"https://api.star-history.com/svg?repos=huhx/compose_image_picker\u0026type=Date\" /\u003e\n\u003c/picture\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuhx%2Fcompose_image_picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuhx%2Fcompose_image_picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuhx%2Fcompose_image_picker/lists"}