Simple color picker
Asked Answered
T

2

5

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

Tallyman answered 13/11, 2014 at 21:47 Comment(5)
Already answered - see post linkHomogeny
that would be awesome but it doesn't compile, the constructor method for LinearGradient failsTallyman
Checkout this one linkRanzini
@Ranzini that's actually the code I'm working on right now, I'm kinda teaching myself programming to android so it gets harder when theres no google documentation but I understood most of the code by now I should be able to code my own color picker pretty soon.Tallyman
@ArtemioRamirez It compiles now - I posted answer belowHomogeny
H
4

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 );
Homogeny answered 13/11, 2014 at 23:48 Comment(2)
Thx, this almost works except for the fact that the colors only apply for half of the bar I assume it must have something to do with the LinearGradient constructor so I'll look for the documentation and try to fix it.Tallyman
@ArtemioRamirez you have to size the bar to match the gradient width or vice versa - notice the 300 in both places - seekbar and gradientHomogeny
T
9

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) {

        }
    });
Tallyman answered 14/11, 2014 at 0:10 Comment(0)
H
4

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 );
Homogeny answered 13/11, 2014 at 23:48 Comment(2)
Thx, this almost works except for the fact that the colors only apply for half of the bar I assume it must have something to do with the LinearGradient constructor so I'll look for the documentation and try to fix it.Tallyman
@ArtemioRamirez you have to size the bar to match the gradient width or vice versa - notice the 300 in both places - seekbar and gradientHomogeny

© 2022 - 2024 — McMap. All rights reserved.