ColorWheel is a library for Android which contains helpful views which can be used to pick an ARGB color.
The minimal required Android API version is 16 (Android 4.1).
To add the library to your project simply add the following line to your app module build.gradle
file:
implementation 'com.apandroid:colorwheel:1.1.10'
In case of problems make sure that jCenter repository is specified in your build.gradle
file:
repositories {
jcenter()
}
To start using views just add ColorWheel
or GradientSeekBar
to your xml layout file:
<com.apandroid.colorwheel.ColorWheel
android:id="@+id/colorWheel"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.apandroid.colorwheel.gradientseekbar.GradientSeekBar
android:id="@+id/gradientSeekBar"
android:layout_width="match_parent"
android:layout_height="match_parent" />
To set or get a RGB color you can use ColorWheel.rgb
property:
val colorWheel = findViewById<ColorWheel>(R.id.colorWheel)
colorWheel.rgb = Color.rgb(13, 37, 42)
val currentColor = colorWheel.rgb
Note: when you set an ARGB color it's transformed to the closest HSV color with value(brightness) component of it set to 1
so the color can be correctly displayed on the ColorWheel
since it's only 2 dimensional. Therefore currently displayed color
on ColorWheel
may differ from the original color which you have set. To change brightness or alpha component
of a color picked from ColorWheel
you can use GradientSeekBar
view.
To be notified when a currently selected color is changed you can use ColorWheel.colorChangeListener
property:
colorWheel.colorChangeListener = { rgb: Int ->
// Listener Code
}
GradientSeekBar
view draws a vertical or horizontal bar filled with linear gradient of two colors.
You can use it to pick an intermediate color between these two.
To pick an intermediate ARGB color you can use GradientSeekBar.argb
property:
val color = gradientSeekBar.argb
To set/get start
and end
colors of GradientSeekBar
you can use the following properties and methods:
val startColor = Color.argb(0, 0, 0, 0)
val endColor = Color.argb(0xff, 0xff, 0xff, 0xff)
gradientSeekBar.startColor = startColor
gradientSeekBar.endColor = endColor
gradientSeekBar.setColors(startColor, endColor)
You can set a color listener via GradientSeekBar.colorListener
:
gradientSeekBar.colorListener = { offset: Float, argb: Int ->
// Listener code
}
If you want to change an intermediate color programmatically you can use GradientSeekBar.offset
property. This value is always within
the range from 0f
to 1f
and shows how close an intermediate color to a start color or end color.
If you want to use GradientSeekBar
to pick an alpha value of a color in range from 0
to 255
you can use the following extension of GradientSeekBar
:
GradientSeekBar.setTransparentToColor(color: Int, respectAlpha: Boolean = true)
This method takes an ARGB color and sets transparent version of it as start
color and opaque as end
color,
respectAlpha
parameter determines if the thumb's position will be adjusted based on an alpha value of a color you supplied.
To get an alpha value of a current intermediate color you can use GradientSeekBar.currentColorAlpha
extension property.
Also you can use GradientSeekBar.setAlphaListener
method to set a listener that will be called when
alpha value is changed.
gradientSeekBar.setAlphaListener { offset: Float, color: Int, alpha: Int ->
// Listener code
}
It's impossible to pick all different colors from ColorWheel
since it's only 2 dimensional and value(brightness) component of it
is always set to 1
.
To compensate that you can use GradientSeekBar
and its setBlackToColor(color)
extension. This method sets black color as
the start
color and provided color as the end
color. This gives you a possibility to pick additional shades of a color selected from ColorWheel
.
You can use the following XML attributes to additionally customize ColorWheel
and GradientSeekBar
.
XML Attribute | Property | Description |
---|---|---|
cw_thumbRadius |
thumbRadius |
Sets ColorWheel 's thumb radius |
cw_thumbColor |
thumbColor |
Sets ColorWheel 's thumb color |
cw_thumbStrokeColor |
thumbStrokeColor |
Sets ColorWheel 's thumb stroke color |
cw_thumbColorCirlceScale |
thumbColorCircleScale |
Sets ColorWheel 's thumb color circle size which is relative to thumbRadius . This value is in range from 0 to 1 . If it set to 1 it will have the same size as thumbRadius |
XML Attribute | Property | Description |
---|---|---|
asb_thumbRadius |
thumbRadius |
Sets GradientSeekBar 's thumb radius |
asb_thumbColor |
thumbColor |
Sets GradientSeekBar 's thumb color |
asb_thumbStrokeColor |
thumbStrokeColor |
Sets GradientSeekBar 's thumb stroke color |
asb_thumbColorCirlceScale |
thumbColorCircleScale |
Sets GradientSeekBar 's thumb color circle size which is relative to thumbRadius . This value is in range from 0 to 1 . If it set to 1 it will have the same size as thumbRadius |
asb_barSize |
barSize |
Sets width(vertical)/height(horizontal) of GradientSeekBar 's gradient bar depending on it's orientation |
asb_barCornersRadius |
cornerRadius |
Sets GradientSeekBar 's gradient bar corners radius |
asb_startColor |
startColor |
Sets GradientSeekBar 's startColor |
asb_endColor |
endColor |
Sets GradientSeekBar 's endColor |
asb_offset |
offset |
Sets GradientSeekBar 's offset |
asb_orientation |
orientation |
Sets GradientSeekBar 's orientation. Possible values: vertical /horizontal |
MIT