phoenix-626 / hsvpicker

The customizable color picker for Android

HSVPicker

HSVPicker is an easy and highly customizable HSV picker library for Android.

• It's an all separated and highly customizable color picker library for Hue, Saturation, Value, and Alpha.
• Resizable slider and panel.
• There are NO dependencies with any android framework's view (100% Custom view)

Download

You can use Gradle :

repositories {
    mavenCentral()
}

dependencies {
   implementation 'com.github.lakelab:HSVPicker:1.0.0'
}

Or Maven:

<dependency>
  <groupId>com.lakelab</groupId>
  <artifactId>HSVPicker</artifactId>
  <version>1.0.0</version>
  <type>pom</type>
</dependency>

How do I use HSVPicker?

Basic usage

1. Arrange the pickers on your activity or fragment

    <com.github.lakelab.hsvpicker.AlphaSlider
        android:id="@+id/alpha_slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        />

    <com.github.lakelab.hsvpicker.HueSlider
        android:id="@+id/hue_slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        />

    <com.github.lakelab.hsvpicker.SatValPanel
        android:id="@+id/sat_val_panel"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:padding="10dp"
        />

2. Connect with the ColorMediator

class MainActivity : AppCompatActivity(), ColorMediator.OnColorChangedListener {

    private val colorMediator = ColorMediator()
    private var samplePanel: MaterialCardView? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        colorMediator.alphaSlider = findViewById(R.id.alpha_slider)
        colorMediator.satValPanel = findViewById(R.id.sat_val_panel)
        colorMediator.hueSlider = findViewById(R.id.hue_slider)
        colorMediator.setOnColorChangedListener(this)
        samplePanel = findViewById(R.id.sample_panel)
        samplePanel?.setCardBackgroundColor(colorMediator.currentColor)
    }

    override fun onDestroy() {
        super.onDestroy()
        colorMediator.detach()
    }

    override fun onColorChanged(color: Int) {
        samplePanel?.setCardBackgroundColor(color)
    }

    override fun onColorConfirmed(color: Int) {
		// It will be called when you stop the gesture.
        Toast.makeText(this, "onColorConfirm : $color", Toast.LENGTH_LONG).show()
    }
}

Options

For XML

<!-- Common attributes -->
app:thumbColor="#f0f0f0"
app:thumbRadius="10dp"
app:thumbStrokeColor="#000000"
app:thumbStrokeWidth="3dp"

<!-- Slider attribute -->
app:sliderWidth="30dp"
app:sliderOrientation = "horizontal"

For code

val slider : AlphaSlider = findViewById(R.id.alpha_slider)
slider.thumbRadius = 13f
slider.thumbColor = Color.parseColor("#ffffff")
slider.thumbStrokeColor = Color.parseColor("#ffffff")
slider.thumbStrokeWidth = 13f
slider.sliderWidth = 30f
slider.sliderOrientation = "horizontal"

Attributes

Common attributes

Attribute Name	Description	Default Value
thumbColor	Thumb color	null (It will be changed to the selected color)
thumbStrokeColor	Thumb stroke color	#ffffff
thumbRadius	Thumb radius size	15dp
thumbStrokeWidth	Thumb stroke with	2sp

Slider attributes

Attribute Name	Description	Default Value
sliderWidth	Width of slider	30dp
sliderOrientation	Orientation of slider	horizontal

Sample Usage

You could check the sample code in this app module

Contribution

Feel free to report any issues or any contributions :).
Any kind of contributions is welcome!

Licence

Copyright 2021 Lake Lab

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.