Rainbow colour picker android

Question

I want to create a rainbow colour picker which has all the shades as shown in the screenshot. I searched a lot, but didn't get anything that would help me. I got a demo where I can give Array of colour codes to picker. But as there are many shades I don't think this is the best approach.

Try this: https://github.com/Madrapps/Pikolo . It has what you are looking for but in an Arc fashion. You can refer the code and modify it according to your need. — Henry, Dec 14 '17 at 07:56

score 3 · Accepted Answer · answered Dec 14 '17 at 08:40

3

Use this code:

import android.annotation.SuppressLint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.SeekBar;
import  android.support.v4.graphics.ColorUtils;


public class MainActivity extends AppCompatActivity {

ImageView im;
float[] hsl = {0f,.65f,0.5f};//Position 0 = hue , 1 saturation, 2= lightness
@SuppressLint("ClickableViewAccessibility")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    SeekBar sb = findViewById(R.id.seekBar);
    //design your custom seek bar to make look like that
    im = findViewById(R.id.imageView);
    sb.setMax(360);



    sb.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            hsl[0] = progress;
            int color = ColorUtils.HSLToColor(hsl);
            im.setBackgroundColor(color);


        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });



}
}

answered Dec 14 '17 at 08:40

Sayok Majumder

1,012
13
28

But how to give different colors ? – madhuri H R Dec 14 '17 at 10:02
The question is not quite clear. If you want to change the appearance of the seekbar use a custom seekbar and change the background and thumb. See this [link](https://www.android-examples.com/create-custom-seekbar-in-android-example-tutorial/) or this [link](https://stackoverflow.com/questions/41693154/custom-seekbar-thumb-size-color-and-background). – Sayok Majumder Dec 16 '17 at 08:22
The color can be fetched from the line int color = ColorUtils.HSLToColor(hsl); under seekbarchange listener – Sayok Majumder Dec 16 '17 at 08:28
ok I understand. But the ColorUtils.HSLToColor(hsl) is not giving proper value. For progress 0 it should be shade of red rite ? But I am not getting a red color. And the color value length is 7 and its negative. Please refer to the image attached. – madhuri H R Dec 18 '17 at 05:45
See you have to fine tune the values in the hsl array. Think if you need to get a deeper red you need to change the saturation. I mean that you have to tinker the values of hsl. See [this link to know more about HSL colors](https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation) and also see this [page](https://developer.android.com/reference/android/support/v4/graphics/ColorUtils.html) for the android part. And I am not being able to understand what are you saying about the color value length. – Sayok Majumder Dec 18 '17 at 07:51
Ok I have understood now. Thanks this has helped me. I have made some changes. – madhuri H R Dec 18 '17 at 09:38

Rainbow colour picker android

1 Answers1