Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Simple color picker

I'm trying to show a simple color picker so that the user can select the color of a few texts... But every color picker I've found so far seems too complicated for my means. I wouldn't mind coding it myself if at least I had some idea of how.

Could anyone provide me with code for some simple color picker? Or point me in a direction for further research into how to code it?

I'm trying to achieve something like this: enter image description here

like image 828
Artemio Ramirez Avatar asked Nov 13 '14 21:11

Artemio Ramirez


People also ask

Does Chrome have a color picker?

Chrome already has a color picker built in. Open dev tools (CMD+Shift+C on a Mac, CTRL+Shift+J on Windows). What about getting colors from images or logos? For this, you'll need an eyedropper tool. There's also an eyedropper color picker built into Chrome.

Does Windows 10 have a color picker?

Microsoft Free Color Picker (Windows 10 Only) By pressing Win + Shift + S keys the desired screen image will be captured to the clipboard and then by pressing the Clipboard button on the main window of the tool, the image will be loaded and you will be able to pick any color of your choice.

How do you make your own color picker?

To add a color picker in an HTML page, use an <input> tag with type = 'color' . The initial value can be set using the value property. This value needs to be set in hexadecimal because colors are represented as six-digit hexadecimal values following a hashtag ( # ).


2 Answers

In case of someone else running into this here is the code for retrieving the value:

seekBarFont.setMax(256*7-1);
seekBarFont.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;
                }

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

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });
like image 54
Artemio Ramirez Avatar answered Nov 09 '22 05:11

Artemio Ramirez


Try this:

In xml use:

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

In activity:

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 );
like image 34
Wildroid Avatar answered Nov 09 '22 05:11

Wildroid