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:
About the author
- More at
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
Where exactly You have add it ? Cause after add line scrollview.add(layout, lp) app crashes :/
Problem solved, big thanks for example Jesper !
Hey. Can I use it in my app. are there no limitations with using or modifying the code?
You can do whatever you want with it
Thanks a lot man… It’s really useful
Cool post.Thanks for the post ..
Nice color picker. Also that the picker also works with api 8 and runs in an alert dialog. Nice job.
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.
Hi Marcelo,
AFAIR, I did it purely to make the drawing of the wheel faster. If you set the
to 1 instead of 2, it will not be scaled as much and be somewhat slower.
Saved me having to create my own. Cheers!
thanks man! great job
HI
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.
Does not work on Android 4.4.
No colorWheel created, only valueSlider and selectedColor are visible.
Sorry, does not working only with my little modifications – adding scroll view as a parent for RelativeLayout. On Android 4.0.4 works fine.
This works fine and it is very helpful
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