Search code examples
androidseekbarcolor-pickerandroid-seekbarandroid-graphics

How to make a custom SeekBar to show a color gradient in the bar?

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?

Solution

  • 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.