side-codes / Android-Color-Picker

Color picker library for Android
https://side-codes.github.io/andColorPicker/
Apache License 2.0
321 stars 21 forks source link
amdroidx android android-colors android-library android-ui android-view cmyk color-picker colorpicker colorpickerview hsl kotlin kotlin-android lab material-design rgb seekbar seekbar-android ui view

andColorPicker — Color Picker library for Android

:avocado: Handy, :snake: flexible, and :zap: lightning-fast Android color picker views and utilities.

andColorPicker logo

:pill: Features

:hammer: Setup

Gradle dependency:

implementation "codes.side:andcolorpicker:0.6.2"

:art: Picker types

HSL (hue, saturation, lightness)

Layout XML Snippet

Basic HSL components:

<codes.side.andcolorpicker.hsl.HSLColorPickerSeekBar
  android:id="@+id/hueSeekBar"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:hslColoringMode="pure"
  app:hslMode="hue" />

Supported hslMode values:

Supported hslColoringMode values:

Alpha component:

<codes.side.andcolorpicker.alpha.HSLAlphaColorPickerSeekBar
  android:id="@+id/alphaSeekBar"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

Kotlin Snippet

// Configure color model programmatically
hueSeekBar.mode = Mode.MODE_HUE // Mode.MODE_SATURATION, Mode.MODE_LIGHTNESS

// Configure coloring mode programmatically
hueSeekBar.coloringMode = ColoringMode.PURE_COLOR // ColoringMode.OUTPUT_COLOR

// Group pickers with PickerGroup to automatically synchronize color across them
val group = PickerGroup<IntegerHSLColor>().also {
  it.registerPickers(
    hueSeekBar,
    saturationSeekBar,
    lightnessSeekBar,
    alphaSeekBar
  )
}

// Get current color immediately
Log.d(
  TAG,
  "Current color is ${hueSeekBar.pickedColor}"
)

// Listen individual pickers or groups for changes
group.addListener(
  object : HSLColorPickerSeekBar.DefaultOnColorPickListener() {
    override fun onColorChanged(
      picker: ColorSeekBar<IntegerHSLColor>,
      color: IntegerHSLColor,
      value: Int
    ) {
      Log.d(
        TAG,
        "$color picked"
      )
      swatchView.setSwatchColor(
        color
      )
    }
  }
)

// Set desired color programmatically
group.setColor(
  IntegerHSLColor().also {
    it.setFromColorInt(
      Color.rgb(
        28,
        84,
        187
      )
    )
  }
)

// Set color components programmatically
hueSeekBar.progress = 50

RGB (red, green, blue)

Properties

LAB

Properties

CMYK (cyan, magenta, yellow, key)

Properties

Supported cmykMode values:

Supported cmykColoringMode values:

Swatches

SwatchView component:

<codes.side.andcolorpicker.view.swatch.SwatchView
  android:id="@+id/swatchView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

Kotlin Snippet:

swatchView.setSwatchPatternTint(
  Color.LTGRAY
)

swatchView.setSwatchColor(
  IntegerHSLColor().also {
    it.setFromColorInt(
      ColorUtils.setAlphaComponent(
        Color.MAGENTA,
        128
      )
    )
  }
)

:memo: License

Copyright 2020 Illia Achour

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.