1

For learning purposes, I want to implement an HSV color picker like this:

enter image description here

I know that I'll be using SeekBars, but how can I show those gradients in the bar of the SeekBar.

  1. How do I show the 7 color spectrum in the bar, like the first one shown in the image?

  2. How do I show the linear gradient from white to a specific color? And how do I show the linear gradient from black to a specific color?

I am not asking for code, just for rough outline of steps to go about it?

Solace
  • 8,612
  • 22
  • 95
  • 183
  • 1
    if you dont want exact code, then make a custom `Drawable` class and use it via `SeekBar#setProgressDrawable` – pskink Mar 13 '16 at 10:07
  • try this, you can find color-picker libraries here, [https://android-arsenal.com/tag/18](https://android-arsenal.com/tag/18) – Naz141 Mar 13 '16 at 10:55
  • @Naz141 As I mentioned, I am doing this for learning. So not looking for libraries. – Solace Mar 13 '16 at 11:58
  • @pskink I thought of that but the problem is that whatever color the user chooses in the first bar, the second and 3rd bar will have that color on one extreme side. For example in the given image the user has chosen orange in the first bar, so the right-side of the 2nd and 3rd bars is orange. So it is not as simple as creating an image in Photoshop and passing it to `setProgressDrawable`. =( – Solace Mar 13 '16 at 12:10
  • 1
    i dont mean any photoshop image, i mean a custom Drawable **class**, a class extending Drawable, something like: http://stackoverflow.com/a/30873744/2252830 – pskink Mar 13 '16 at 12:19

1 Answers1

2

SeekBar indirectly extends ProgressBar, which has a method by the name of setProgressDrawable(Drawable d), to draw that bar as the Drawable you pass into it as its argument.

You will have to implement your own custom ShapeDrawable (probably a RectShape) to give the gradient you want. See the Android Graphics and Drawables guide and classes around Shader, e.g. LinearGradient.

NXA
  • 440
  • 2
  • 10