Color Picker for Android

Color picker is quite a useful component for a wide range of applications. However, at the moment there is no official picker provided by Android APIs. During development of “Dots & Waves” live wallpaper I had a chance to create such component on my own. My goal was to create a picker which has a compact design and can be easily extended to allow user to pick multiple colors at once. Moreover selected colors should be aesthetically pleasing.

Single color picker

Color Picker is based on HSV color model. Using color wheel in the middle, user can adjust hue and saturation. Arc on the right side allows user to change value of the selected color. Arc on the left side shows currently selected color. This is how it looks like:

Android Color Picker Android Color Picker Android Color Picker

Multi color picker

More advanced version allows to pick several colors at once. It is really not easy to compose a palette of eye-catching colors. Changing only the hue while keeping saturation and color value on the same level gives nice effects and is easy to achieve.

Android Color Picker Android Color Picker Android Color Picker

Project is available at GitHub: https://github.com/chiralcode/Android-Color-Picker/

11 thoughts on “Color Picker for Android”

  1. Hi,
    I am looking to use components of your great color picker in my app. One question, how do I get a continual color output from the interface. At the moment one has to depress ‘OK’ for the values to be published. I would like to be able to provide continual output. Any help you be truely appreciated.
    Many thanks,
    Adrian

  2. You would have to modify ColorPicker.java and call listener after each invalidate() call in onTouchEvent() method. If you are interested in some more details or code snippets, please write something more about what you are trying to achieve.

  3. Thanks for the reply.
    Im wishing to feed the real time rgb color values out of the colorpicker into a fragment shader to control image color parameters.
    For example I have an saturation slider (seek bar) that allows for user interaction of image saturation. The color picker would allow for interaction with color bias. I have the code working getting the values from the “OK” button.

    Some help from you to point me in the right direction would be really appreciated.
    ADrian

    1. Yes, flipping the visible wheel vertically is possible. Color wheel bitmap is created in createColorWheelBitmap method. You would have to change color definitions for the SweepGradient object to make the color wheel you need. Then you need to alter the angles for hue value in onTouchEvent method and in onDraw method (“drawing color wheel pointer” part).

      Just experiment with code in ColorPicker.java, change something and check the outcome. I think the code is quite readable and it’s only 300 lines long.

  4. Hi,
    Thanks for your time.
    I have just patiently tried to work this out but unfortunately to no avail.
    I was able to get the correct “looking” color wheel by changing ‘colours’ in createColorWheelBitmap to

    colors = new int[] { 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00, 0xFFFFFF00,
    0xFFFF0000, 0xFFFF0000, 0xFF0000FF };
    It was beyond me however to then adapt the onTouchEvent to output the colors touched in the colorWheel.
    Additionally I could not work out how to add a listener to the onTouchEvent to provide dynamic output of color values to my application.
    I would be very appreciative if you could find some time to help me with this.

    I am using your ColorPickerActivity referenced by a button in my main layout.
    Many thanks,
    Adrian

  5. I am using your widget as part of a design project for a University class. Was the question that Adrian asked ever resolved? I too need to add some sort of onChangeListener to ColorPicker.java so that the color of wheel may be continually output as a user changes the color. Any help would be greatly appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.