HSV Color Picker Dialog


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:


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

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:

About the author

Jesper Borgstrup Jesper is a Masters student of computer science at the University of Copenhagen with many years of experience in writing applications for Android.

19 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??


  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.


  3. Tayyab

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


  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.

    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.

  5. Kris

    you have a great tutorial, i was able to port the whole code in to C# and use it in my app. i did ran in to hiccup though but all solved and working.

  6. ochkarik

    Does not work on Android 4.4.
    No colorWheel created, only valueSlider and selectedColor are visible.

  7. ochkarik

    Sorry, does not working only with my little modifications – adding scroll view as a parent for RelativeLayout. On Android 4.0.4 works fine.

  8. arash

    hi,thank you for your great color picker,it works perfect in portrait but has problem in landscape mode,i saw other comments and guides but still problem exists,can you explain more about this issue?
    thank you again


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>