For my first publish within the media, I needed to start out by displaying you tips on how to create a colour picker in pure edit mode.
Usually the colour picker may have 3 parts,
- Hue – Shade of the selector
- Saturation – Depth of the colour
- Worth — Brightness of colour
We may have 2 panels. One panel will comprise the colour picker and the opposite may have each saturation and values in it.
First we’ll begin by having the colour palette. The output will look one thing like this.
(As a result of it would not be fairly if I needed to write android.graphics.Shade or androidx.compose.ui.graphics.Shade in all of the locations that we use. We’ll import android.graphics.Shade like AndroidColor)
For that we must draw within the canvas.
We’ll draw this colour gradient in bitmap utilizing android.graphics.Canvas.
Now we’ll divide these colours by the width of the huePanel.
What is going to it seem like to attract every line of colour within the canvas?
Lastly draw this on our composing canvas
The following step is to have the offset state to watch the place the consumer is touching and draw a circle to that space.
Observe: We should draw this circle after drawing the bitmap, in any other case will probably be overwritten by the bitmap.
We’ve to ship a callback when the colour is modified by clicking and likewise by dragging.
Thankfully, we cannot solely get the press place utilizing the InteractionSource, however we are able to additionally ship the pressPosition to it. This fashion we solely want to watch it in a single place.
We’ll write a customized Modifier to attain this.
We’ve to watch clicking and dragging to determine precisely what colour the consumer is choosing.
The palette is now arrange. After a bit the cleansing code ought to seem like this.
Subsequent is a management panel used to pick saturation and worth.
The utmost primary for making a Canvas for bitmaps is similar as that of HuePanel.
Since we’re making a panel that incorporates each saturation and values, we’ll create a saturation gradient from high left to high proper and a worth gradient from high left to backside proper left.
The rgb the worth is calculated underneath the belief that the colour is handed to this composable.
Subsequent, we’ll draw a rounded rectangle by combining the satShader And valShader use Compose Shader.
Draw the Saturation + Worth desk and that is it. Now we have to observe and draw a circle the place our consumer will click on/drag after which convert that place to saturation and worth.
Our remaining composable will seem like this.
Get the worth from each of these consoles and place it wherever you need.
Our output will seem like this.
Any criticism is welcomed. Please publish it within the feedback.