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:





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
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
in HSVColorPickerDialog.java add a ScrollView on RelativeLayout then this code work properly.
Tayyab