How to make a color gradient in a SeekBar?

Question

I want to use a SeekBar (i.e. old school Java Slider) into a color gradient picker. I have seen some examples like this but they all require making new classes and such. There has got to be a way to modify or override the original classes. Or just replace the background with a gradient.

Crummy

Answer 1

I figured it out here is how you do it.

You create a standard seekbar in your XML.

<SeekBar
       android:id="@+id/seekbar_font"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_margin="10px"
       android:layout_below="@id/color_font_text"
       android:max="100"
       android:progress="50"></SeekBar>

Then you customize the seekbar in your onCreate() by creating a boxShape and then force a LinearGradient inside it.

LinearGradient test = new LinearGradient(0.f, 0.f, 300.f, 0.0f,  

      new int[] { 0xFF000000, 0xFF0000FF, 0xFF00FF00, 0xFF00FFFF,
      0xFFFF0000, 0xFFFF00FF, 0xFFFFFF00, 0xFFFFFFFF}, 
      null, TileMode.CLAMP);
ShapeDrawable shape = new ShapeDrawable(new RectShape());
shape.getPaint().setShader(test);

SeekBar seekBarFont = (SeekBar)findViewById(R.id.seekbar_font);
seekBarFont.setProgressDrawable( (Drawable)shape );

Here is an image of the current code up above SeekBar Color Gradient

Crummy

Thank a lot for this piece of code, works like a charm. But how do you get the color picked then ? The only paramater which i can get is the progress, then, how do you link the color to the progress ? Thank in advance ! – Ethelstan

Yeah that is the hard part. Since the gradient is technically not linear then you have to write your own algorithm to correlate where the picker is to what the actually color is on the progress bar. – Crummy

I think the x2 parameter for LinearGradient would need to be adjusted based on the seekbar's width in order for or the gradient to exactly fill the entire bar. Using GradientDrawable instead avoids this problem: seekBar.setProgressDrawable(new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, new int[] {startColor, endColor})) – Subsumption

Answer 2

This is in addition to the solution provided using LinearGradient. Try this logic for translating the progress to rgb:

lineColorSeekbar.setMax(256*7-1);
        lineColorSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                if(fromUser){
                    int r = 0;
                    int g = 0;
                    int b = 0;

                    if(progress < 256){
                        b = progress;
                    } else if(progress < 256*2) {
                        g = progress%256;
                        b = 256 - progress%256;
                    } else if(progress < 256*3) {
                        g = 255;
                        b = progress%256;
                    } else if(progress < 256*4) {
                        r = progress%256;
                        g = 256 - progress%256;
                        b = 256 - progress%256;
                    } else if(progress < 256*5) {
                        r = 255;
                        g = 0;
                        b = progress%256;
                    } else if(progress < 256*6) {
                        r = 255;
                        g = progress%256;
                        b = 256 - progress%256;
                    } else if(progress < 256*7) {
                        r = 255;
                        g = 255;
                        b = progress%256;
                    }

                    lineColorSeekbar.setBackgroundColor(Color.argb(255, r, g, b));
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

Bigamist

Thanks, this worked well. How can you get progress back given r, g, b? We have a second color picker and want to update the slider accordingly. – Paripinnate

String hex = String.format("#%02X%02X%02X", r, g, b); – Twedy

Answer 3

The question is pretty old but maybe someone needs this (the answer with only XML code):

  <SeekBar
                        android:id="@+id/sb_saturation"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:maxHeight="4dp"
                        android:minHeight="4dp"
                        android:progressDrawable="@drawable/style_seekbar_saturation" />

and

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/progress">
        <shape>
            <corners android:radius="2dp" />
            <gradient
                android:endColor="@color/custom_green"
                android:startColor="@android:color/black" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <shape android:shape="rectangle">
            <size android:height="3dp" />
            <solid android:color="@color/transparent" />
        </shape>
    </item>
</layer-list>

Oreopithecus