EColorPicker

GitHub

An Android color selection kit, as shown below.

Depend on the configuration

The project build. Gradle

allprojects {
    repositories {
        ...
        maven { url 'https://www.jitpack.io'}}}Copy the code

Module build. Gradle

dependencies {
    implementation 'com.github.RickyHal:EColorPicker:$latest_version'
}
Copy the code

use

Color picker

<com.ricky.color_picker.ui.ColorWheelPickerView
    android:id="@+id/color_picker_view"
    android:layout_width="200dp"
    android:layout_height="200dp" />
Copy the code

Default width and height 300dp, get the selected color:

binding.colorPickerView.setOnColorSelectedListener(object : OnColorSelectedListener {
    override fun onColorSelecting(color: Int) {
       // The current color in the finger touch
    }

    override fun onColorSelected(color: Int) {
       // The final color when the finger bounces}})Copy the code

Set whether to display color magnifier and magnifier radius:

binding.colorPickerView.hasScaleMirror = true
binding.colorPickerView.mirrorRadius = 10.dp
Copy the code

Color ring selector

<com.ricky.color_picker.ui.ColorRingPickerView
    android:id="@+id/color_ring_view"
    android:layout_width="200dp"
    android:layout_height="200dp" />
Copy the code

Default width and height 300dp, get the selected color:

binding.colorRingPickerView.setOnColorSelectedListener(object : OnColorSelectedListener {
    override fun onColorSelecting(color: Int) {
       // The current color in the finger touch
    }

    override fun onColorSelected(color: Int) {
       // The final color when the finger bounces}})Copy the code

Set whether to display color magnifier and magnifier radius:

binding.colorPickerView.hasScaleMirror = true
binding.colorPickerView.mirrorRadius = 10.dp
Copy the code

Set the ring color values, from inside to outside, as a two-dimensional array of 24*7 hexadecimal color strings:

binding.colorRingView.setColor(colorList)
Copy the code

The default color ring color value is:

private String[][] colorArray = {
        {
                "#fef5ce"."#fff3cd"."#feeeca"."#fdeac9"."#fee7c7"."#fce3c4"."#fbddc1"."#fad7c3"."#fad0c2"."#f2ced0"."#e6cad9"."#d9c7e1"."#d2c3e0"."#cfc6e3"."#cac7e4"."#c9cde8"."#c7d6ed"."#c7dced"."#c7e3e6"."#d2e9d9"."#deedce"."#e7f1cf"."#eef4d0"."#f5f7d0"
        },
        {
                "#ffeb95"."#fee591"."#fcdf8f"."#fcd68d"."#facd89"."#f9c385"."#f7b882"."#f5ab86"."#f29a82"."#e599a3"."#ce93b3"."#b48cbe"."#a588be"."#9d8cc2"."#9491c6"."#919dcf"."#89abd9"."#85bada"."#86c5ca"."#9fd2b1"."#bada99"."#cbe198"."#dde899"."#edf099"
        },
        {
                "#fee250"."#fed84f"."#fbce4d"."#f9c04c"."#f7b24a"."#f6a347"."#f39444"."#f07c4d"."#ec614e"."#d95f78"."#b95b90"."#96549e"."#7c509d"."#6e59a4"."#5c60aa"."#5572b6"."#3886c8"."#1c99c7"."#0daab1"."#57ba8b"."#90c761"."#b0d35f"."#ccdd5b"."#e5e756"
        },
        {
                "#FDD900"."#FCCC00"."#fabd00"."#f6ab00"."#f39801"."#f18101"."#ed6d00"."#e94520"."#e60027"."#cf0456"."#a60b73"."# 670775"."#541b86"."#3f2b8e"."# 173993"."#0c50a3"."#0168b7"."#0081ba"."#00959b"."#03a569"."#58b530"."#90c320"."#b8d201"."#dadf00"
        },
        {
                "#DBBC01"."#DAB101"."#D9A501"."#D69400"."#D28300"."#CF7100"."#CD5F00"."#CA3C18"."#C7001F"."#B4004A"."# 900264"."# 670775"."#4A1277"."#142E82"."#0A448E"."#005AA0"."#0070A2"."# 018287"."#02915B"."#4A9D27"."#7DAB17"."#9EB801"."#BCC200"."#DBBC01"
        },
        {
                "#B49900"."#B39000"."#B18701"."#AD7901"."#AB6B01"."#AA5B00"."#A84A00"."#A62D10"."#A50011"."#94003C"."# 770050"."# 540060"."#3B0263"."#2B1568"."#10226C"."# 053577"."#004A87"."#005D88"."#006C6F"."#00784A"."#38831E"."#648B0A"."# 829601"."#999F01"
        },
        {
                "#9F8700"."#9E7F00"."#9D7601"."#9A6900"."#995E00"."# 975000"."# 954000"."# 932406"."#92000B"."# 840032"."#6A0048"."#4A0055"."# 320057"."#240D5D"."#0C1860"."#032C6A"."# 014076"."# 005278"."# 016064"."#006B41"."#2E7316"."#567C03"."# 718500"."#888D00"}};Copy the code

Set the color value of the color block in the selected state:

binding.colorRingView.setSelectedBlockColor(Color.WHITE)
Copy the code

Depth selector

<com.ricky.color_picker.ui.ColorSlideView
    android:id="@+id/color_slide_view"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:layout_marginHorizontal="20dp"
    android:layout_marginVertical="20dp" />
Copy the code

The width and height need to be given to get the current value

binding.colorRingPickerView.setOnColorSelectedListener(object : OnColorSelectedListener {
    override fun onColorSelecting(color: Int) {
       // The current color in the finger touch
    }

    override fun onColorSelected(color: Int) {
       // The final color when the finger bounces}})Copy the code

Set the base color:

binding.colorSlideView.setBaseColor(Color.WHITE)
Copy the code

Set current position:

binding.colorSlideView.setPosition(0.5 f)
Copy the code

Transparency selector

<com.ricky.color_picker.ui.AlphaSlideView
    android:id="@+id/alpha_slide_view"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:layout_marginHorizontal="20dp"
    android:layout_marginVertical="20dp" />
Copy the code

Also need to give the width and height to get the current transparency

binding.alphaSlideView.setOnAlphaSelectedListener(object : OnAlphaSelectedListener {
    override fun onAlphaSelecting(alpha: Float) {
        // Transparency in finger touch
    }

    override fun onAlphaSelected(alpha: Float) {
        // Transparency when the finger bounces}})Copy the code

Set the base color:

binding.colorSlideView.setBaseColor(Color.WHITE)
Copy the code

Set current position:

binding.colorSlideView.setPosition(0.5 f)
Copy the code

Color tools

In util.kt, provided in singleton mode,

// Change the color int to hexadecimal
fun color2Hex(color: Int, alpha: Int = 255, isUpperCase: Boolean = true): String 

// Hexadecimal string to color value
fun hex2Color(hex: String): Int?

// Is a valid hexadecimal color string
fun isValidHex(color: String): Boolean 
Copy the code