🎨 Jetpack Compose color picker library that allows you to get colors from any images like gallery pictures by tapping on the desired color. Also, it supports brightness and alpha slider, which can adjust your ARGB factors.
Add the dependency below to your module's build.gradle.kts file:
dependencies {
implementation("com.github.skydoves:colorpicker-compose:1.0.7")
}See how to import the snapshot
Snapshots of the current development version of ColorPicker-Compose are available, which track the latest versions.
To import snapshot versions on your project, add the code snippet below on your gradle file:
repositories {
maven(url="https://oss.sonatype.org/content/repositories/snapshots/")
}Next, add the dependency below to your module's build.gradle.kts file:
dependencies {
implementation("com.github.skydoves:colorpicker-compose:1.0.8-SNAPSHOT")
}First, you should initialize ColorPickerController, which allows you to control color pickers and all subcomponents.
val controller = rememberColorPickerController()Next, you can implement a color picker with the ImageColorPicker composable function.
ImageColorPicker(
modifier = Modifier.fillMaxSize(),
paletteImageBitmap = ImageBitmap.imageResource(R.drawable.palettebar),
controller = controller
)ImageColorPicker allows you to get colors from any images such as gallery pictures or drawable resources by tapping on the desired color.
It interacts with the ColorPickerController to control the color picker and other components. You can use the ImageColorPicker as the following example:
ImageColorPicker(
modifier = Modifier
.fillMaxWidth()
.height(450.dp)
.padding(10.dp),
controller = controller,
paletteImageBitmap = ImageBitmap.imageResource(R.drawable.palettebar),
paletteContentScale = PaletteContentScale.FIT,
onColorChanged = { colorEnvelope: ColorEnvelope ->
// do something
}
)With the modernstorage's Photo Picker, you can set an desired image as the palette like the below:
val context = LocalContext.current
val photoPicker =
rememberLauncherForActivityResult(PhotoPicker()) { uris ->
val uri = uris.firstOrNull() ?: return@rememberLauncherForActivityResult
val bitmap = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
ImageDecoder.decodeBitmap(ImageDecoder.createSource(context.contentResolver, uri))
} else {
MediaStore.Images.Media.getBitmap(context.contentResolver, uri)
}
controller.setPaletteImageBitmap(bitmap.asImageBitmap())
}As you can see the above, you can set the palette with the setPaletteImageBitmap function of the controller.
You can adjust your palette's image scale with the setPaletteContentScale function of the controller as the below:
controller.setPaletteContentScale(PaletteContentScale.FIT) // scale the image to fit width and height. controller.setPaletteContentScale(PaletteContentScale.CROP) // center crop the image.