HSV Color Picker Dialog

Introduction

After being unable to find any really good color picker dialogs for Android, I decided to make my own, and this is how it turned out:

The HSVColorPickerDialog

I made the dialog a two-part color picker based on the HSV color model: First you select the hue and saturation parts in a circle, and then finally select the value in a gradient below as seen in the screenshots below. The dialog is available for download in the GitHub repository: HSVColorPickerDialog.java

How to use it

The HSVColorPickerDialog is based on the AlertDialog, and it is really easy to use:

public HSVColorPickerDialog(Context context, int initialColor, final OnColorSelectedListener listener);

public interface OnColorSelectedListener {
    /**
     * @param color The color code selected, or null if no color. No color is only
     * possible if {@link HSVColorPickerDialog#setNoColorButton(int) setNoColorButton()}
     * has been called on the dialog before showing it
     */
    public void colorSelected( Integer color );
}

You call the constructor with a Context, a color that is to be selected as default, and a OnColorSelectedListener that is invoked when the
user has selected a color and pressed OK:

Example

HSVColorPickerDialog cpd = new HSVColorPickerDialog( MainActivity.this, 0xFF4488CC, new OnColorSelectedListener() {
    @Override
    public void colorSelected(Integer color) {
        // Do something with the selected color
    }
});
cpd.setTitle( "Pick a color" );
cpd.show();

Notice how the callback’s color parameter is an Integer and not an int? That is because the dialog has the option of letting the user select no color, in which case the Integer is null. To allow the user to do this, simply call the following method on the dialog before showing it:

cpd.setNoColorButton( R.string.no_color );

This makes the dialog add a third button in the bottom like this:

10 thoughts on “HSV Color Picker Dialog

  1. benny

    Hi Jesper

    I’ve used your colour picker in one of my apps and yes it was easy to use. Have one problem though. My tablet is a Nexus 7 which is usually sitting in a dock using landscape mode. Your picker doesn’t handle that well. Tried a few hacks like forcing a set width/height and then it cuts off part of the circle. So when I wish to use the picker, I rotate my Nexus to portrait.

    Any chance you could give me some guidance on how to modify your code to have it work well in landscape??

    benny

    Reply
  2. benny

    G’day Jesper

    Been looking closer at your code and found a way to hack it to work. Not the correct way to do it but it will always work on my Nexus 7, so I’m happy enough with it now. FYI, most of my Android apps are on GitHub but they are really only for me. The app is healthPlots if you want to see how I’ve messed up your code.

    benny

    Reply
  3. Tayyab

    in HSVColorPickerDialog.java add a ScrollView on RelativeLayout then this code work properly.

    Tayyab

    Reply
  4. Marcelo

    Hello Jasper,

    Can you please explain why the wheel is first created in a scaled size and then translated to the target size? (It’s been a long time, but maybe you still remember the code) I tried to find theory sources on the internet about HSV and none mentions this technique.

    Reply
    1. Jesper Borgstrup Post author

      Hi Marcelo,

      AFAIR, I did it purely to make the drawing of the wheel faster. If you set the

      private static final float SCALE = 2f;

      to 1 instead of 2, it will not be scaled as much and be somewhat slower.

      Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>