A color picker for Jetpack compose 🎨

Overview

Compose Color Picker

🎨 Color Picker for Jetpack compose

colorPickers

A color picker for Jetpack compose 🎨

Download

🚧 Working on it 🚧

Usage

ColorPicker {
    color = it
}

You can provide a type for the color picker as the following.

ColorPicker(
    type = ColorPickerType.Classic()
) {
    color = it
}

Color picker types

  • Classic

    ColorPickerType.Classic(
        showAlphaBar = true
    )
  • Circle

    ColorPickerType.Circle(
        showBrightnessBar = true,
        showAlphaBar = true,
        lightCenter = true
    )

    circleColorPickers

  • Ring

    ColorPickerType.Ring(
        ringWidth = 10.dp,
        previewRadius = 80.dp,
        showLightColorBar = true,
        showDarkColorBar = true,
        showAlphaBar = true,
        showColorPreview = true
    )
  • Simple Ring

    ColorPickerType.SimpleRing(
        colorWidth = 20.dp,
        tracksCount = 5,
        sectorsCount = 24
    )

Color Picker Dialog

ColorPickerDialog(
    show = showDialog,
    type = colorPickerType,
    properties = DialogProperties(),
    onDismissRequest = {
    	showDialog = false
    },
    onPickedColor = {
    	color = it
    },
)

Useful Extensions

  • val color = Color(0xffe1a1c1)
    val alpha = color.alpha() //return alpha value as integer => 255
    val red = color.red() //return red value as integer => 225
    val green = color.green() //return green value as integer => 161
    val blue = color.blue() //return blue value as integer => 193
    val hex = color.toHex() //return argb color as hex string
    val (alpha, red, green, blue) = color.argb() //return an array for all color channels value
  • add Modifier.transparentBackground to draw behind your composable element a transparent effect background

    Box(
        modifier = Modifier
        .width(205.dp)
        .height(300.dp)
        .clip(RoundedCornerShape(32.dp))
        .transparentBackground(verticalBoxesCount = 16)
        .background(Color.Cyan.copy(alpha = 0.2f))
    )

    transparentBackground

License

Copyright 2022 mhssn

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
A customizable debug screen to view and edit flags that can be used for development in Jetpack Compose applications
A customizable debug screen to view and edit flags that can be used for development in Jetpack Compose applications

Tweaks A customizable debug screen to view and edit flags that can be used for development in Jetpack Compose applications To include the library add

A crypto currency wallet UI/UX template created using Android's jetpack compose.
A crypto currency wallet UI/UX template created using Android's jetpack compose.

CryptoWalletTemplate A crypto currency wallet UI/UX template created using Android's jetpack compose. High definition demo on youtube Youtube video de

Card with swipe options in Jetpack Compose

SwipeableActionCard Card with swipe options in Jetpack Compose Tutorial: Click Here Import SwipeableActionCard library Add this in project level build

Android jetpack compose swipe library

Swiper for Android Jetpack Compose Android Jetpack Compose swipe library. Downlo

A Jetpack Compose library with blur, pixelate, and other effects to keep your designer happy. Inspired by iOS UIVisualEffectView.
A Jetpack Compose library with blur, pixelate, and other effects to keep your designer happy. Inspired by iOS UIVisualEffectView.

A Jetpack Compose library with blur, pixelate, and other effects to keep your designer happy. Inspired by iOS UIVisualEffectView.

Compose RevealSwipe
Compose RevealSwipe

RevealSwipe Current Compose Version: 1.0.0-beta09 Compose RevealSwipe Swipable in both directions Add to your project Add actual RevealSwipe library:

MacOS theme for JetBrains Compose UI framework
MacOS theme for JetBrains Compose UI framework

MacOS theme for Compose Multiplatform MacOS theme written in Compose UI. Create native looking UIs for Mac using Compose UI. Share your UI code to run

Collection of Compose UI Templates
Collection of Compose UI Templates

Compose UI Templates This repository contains set of Android compose ui templats which helps you to learn compose in Android. 💻 Requirements To try o

Sample app to try compose and showcase principles from Composing (UI) beyond the UI
Sample app to try compose and showcase principles from Composing (UI) beyond the UI

Composing clocks sample app This is a sample app to show how to build an app that follows the practices described in the series of articles Compose (U

Comments
  • Set preferred color to be selected on the picker

    Set preferred color to be selected on the picker

    • It would be nice if there is a way to set a preferred color on the picker for it to point to on the initial render. Instead of always starting from the center of the picker
    enhancement 
    opened by brookmg 0
Releases(v1.0.0)
Owner
mhssn
mhssn
🎨 Android colorpicker for getting colors from any images by tapping on the desired color.

ColorPickerView ?? ColorPickerView implements getting HSV colors, ARGB values, Hex color codes from any image drawables or your gallery pictures by ta

Jaewoong Eum 1.3k Dec 26, 2022
A material Switch with icon animations and color transitions

Material Animated Switch A material Switch with icon animations and color transitions Sample video: Youtube Material Animated Switch video Sample app:

Adrián Lomas 1.2k Dec 29, 2022
Simple View to change Brush Size, Alpha and Color

BrushView Simple View to change Brush Size, Alpha and Color Screenshots How to install In your build.gradle project allprojects { repositories {

Andres Ruiz 16 Jun 28, 2018
Android view that allows the user to create drawings. Customize settings like color, width or tools. Undo or redo actions. Zoom into DrawView and add a background.

DrawView Android view that allows the user to create drawings. Draw anything you like in your Android device from simple view. Customize draw settings

Oscar Gilberto Medina Cruz 839 Dec 28, 2022
A View on which you can freely draw, customizing paint width, alpha and color, and take a screenshot of the content. Useful for note apps, signatures or free hand writing.

FreeDrawView A View that let you draw freely on it. You can customize paint width, alpha and color. Can be useful for notes app, signatures or hands-f

Riccardo Moro 643 Nov 28, 2022
SystemUiController - Android Ui color controller (status bar, navigation bar)

SystemUiController Android system ui color controller (status bar, navigation bar) Download implementation "land.sungbin:systemuicontroller:${version}

Ji Sungbin 8 Dec 3, 2022
A file/directory-picker for android. Implemented as a library project.

Note: avoid using as SD-card file picker on Kitkat+ In Kitkat or above, use Android's built-in file-picker instead. Google has restricted the ability

Jonas Kalderstam 711 Dec 27, 2022
Google Calendar Recurrence picker

Android Recurrence Picker Google Calendar Recurrence picker Screenshot Usage Maven / Gradle Maven: <dependency> <groupId>be.billington.calendar.recu

Benoit Billington 240 Nov 29, 2022
This is a picker view for android , support linkage effect, timepicker and optionspicker.(时间选择器、省市区三级联动)

Android-PickerView English Document 注意事项、详请使用方式、更新日志等,请查看 Wiki文档 Wiki文档,Wiki文档,Wiki文档 !~ 重要的事情说三遍 对于使用上有任何疑问或优化建议等,欢迎加入QQ群讨论交流技术问题。 交流群1: 387051294(推荐

Bigkoo 13.2k Jan 6, 2023
PCard Add payment card screen made using JetPack Compose

PCard Add payment card screen made using JetPack Compose Find this repository useful? ❤️ Support it by joining stargazers for this repository. ⭐ And f

Mohamed Elbehiry 61 Dec 16, 2022