A Photoshop like color picker for your Android application

Introduction

Depending on your application, you might one day need a good color picker.

With Shake Them All! I needed a color picker to select the color of the default skin and default background. I first had a look at the Android API to see if I could find a Dialog that I could use, without success. I then looked at the SDK samples, and found this color picker:

Before

It is nice but quite limited regarding the number of colors available (black and white are missing for instance),  so I used it for a while but I soon needed to make my own.

As I’m quite familiar with the Photoshop color picker, I wanted to make one that looked like it and came up with this list of feature:

• it should allow the selection of any color without limitation
• be able to keep the default color in memory and restore it
• be implemented as a custom Dialog for re usability
• and still be simple enough to be used on a smartphone
• finally the selected color should be associated to a key to be stored in the SharedPreferences

After

To achieve this, I needed to implement my own custom Dialog (ColorPickerDialog), associated with a custom View (ColorPickerView).

I’m now going to describe the classes and methods, so if you’re in a hurry, you can jump directly to the end of the post where you will find the download link with instructions on how to use the dialog.

ColorPickerDialog

The ColorPickerDialog is quite simple.

public class ColorPickerDialog extends Dialog {
    public interface OnColorChangedListener {
        void colorChanged(String key, int color);
    }

    private OnColorChangedListener mListener;
    private int mInitialColor, mDefaultColor;
    private String mKey;

    public ColorPickerDialog(Context context, OnColorChangedListener listener, String key, int initialColor, int defaultColor) {
        super(context);

        mListener = listener;
        mKey = key;
        mInitialColor = initialColor;
        mDefaultColor = defaultColor;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        OnColorChangedListener l = new OnColorChangedListener() {
            public void colorChanged(String key, int color) {
                mListener.colorChanged(mKey, color);
                dismiss();
            }
        };

        setContentView(new ColorPickerView(getContext(), l, mInitialColor, mDefaultColor));
        setTitle(R.string.settings_bg_color_dialog);
    }
}

Basically, this Dialog first declares a listener Interface that will be used to notify the new selected color to the class that opened it. The constructor then initializes a few variables:

• mListener: the listener passed to the constructor
• mKey: the key associated to the color (I needed this because I’m using the same Dialog for 2 Preferences – skin color and background color)
• mInitialColor: the initial color
• mDefaultColor: the default color

The onCreate method declares what to do when the OnColorChangedListener is called: notify the caller, and close (dismiss) the dialog. The method also sets the content view to our custom View, and the title.

ColorPickerView

This one is more complicated… And to be honest I made this a while ago and I won’t be able to explain every line of code

Here are the main methods used in the class. I’ve left some comments in the code which will hopefully help you understand how it works. If not, feel free to ask me in the comments of the post.

Constructor

The constructor initializes an array of colors used in the hue bar (the top bar):

ColorPickerView(Context c, OnColorChangedListener l, int color, int defaultColor) {
	super(c);
	mListener = l;
	mDefaultColor = defaultColor;

	// Get the current hue from the current color and update the main color field
	float[] hsv = new float[3];
	Color.colorToHSV(color, hsv);
	mCurrentHue = hsv[0];
	updateMainColors();

	mCurrentColor = color;

	// Initialize the colors of the hue slider bar
	int index = 0;
	for (float i=0; i<256; i += 256/42) // Red (#f00) to pink (#f0f)
	{
		mHueBarColors[index] = Color.rgb(255, 0, (int) i);
		index++;
	}
	for (float i=0; i<256; i += 256/42) // Pink (#f0f) to blue (#00f)
	{
		mHueBarColors[index] = Color.rgb(255-(int) i, 0, 255);
		index++;
	}
	for (float i=0; i<256; i += 256/42) // Blue (#00f) to light blue (#0ff)
	{
		mHueBarColors[index] = Color.rgb(0, (int) i, 255);
		index++;
	}
	for (float i=0; i<256; i += 256/42) // Light blue (#0ff) to green (#0f0)
	{
		mHueBarColors[index] = Color.rgb(0, 255, 255-(int) i);
		index++;
	}
	for (float i=0; i<256; i += 256/42) // Green (#0f0) to yellow (#ff0)
	{
		mHueBarColors[index] = Color.rgb((int) i, 255, 0);
		index++;
	}
	for (float i=0; i<256; i += 256/42) // Yellow (#ff0) to red (#f00)
	{
		mHueBarColors[index] = Color.rgb(255, 255-(int) i, 0);
		index++;
	}

	// Initializes the Paint that will draw the View
	mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
	mPaint.setTextAlign(Paint.Align.CENTER);
	mPaint.setTextSize(12);
}

getCurrentMainColor

Returns the current selected color from the hue bar:

private int getCurrentMainColor()
{
	int translatedHue = 255-(int)(mCurrentHue*255/360);
	int index = 0;
	for (float i=0; i<256; i += 256/42)
	{
		if (index == translatedHue)
			return Color.rgb(255, 0, (int) i);
		index++;
	}
	for (float i=0; i<256; i += 256/42)
	{
		if (index == translatedHue)
			return Color.rgb(255-(int) i, 0, 255);
		index++;
	}
	for (float i=0; i<256; i += 256/42)
	{
		if (index == translatedHue)
			return Color.rgb(0, (int) i, 255);
		index++;
	}
	for (float i=0; i<256; i += 256/42)
	{
		if (index == translatedHue)
			return Color.rgb(0, 255, 255-(int) i);
		index++;
	}
	for (float i=0; i<256; i += 256/42)
	{
		if (index == translatedHue)
			return Color.rgb((int) i, 255, 0);
		index++;
	}
	for (float i=0; i<256; i += 256/42)
	{
		if (index == translatedHue)
			return Color.rgb(255, 255-(int) i, 0);
		index++;
	}
	return Color.RED;
}

updateMainColors

Updates the main field colors depending on the current selected hue:

private void updateMainColors()
{
	int mainColor = getCurrentMainColor();
	int index = 0;
	int[] topColors = new int[256];
	for (int y=0; y<256; y++)
	{
		for (int x=0; x<256; x++)
		{
			if (y == 0)
			{
				mMainColors[index] = Color.rgb(255-(255-Color.red(mainColor))*x/255, 255-(255-Color.green(mainColor))*x/255, 255-(255-Color.blue(mainColor))*x/255);
				topColors[x] = mMainColors[index];
			}
			else
				mMainColors[index] = Color.rgb((255-y)*Color.red(topColors[x])/255, (255-y)*Color.green(topColors[x])/255, (255-y)*Color.blue(topColors[x])/255);
			index++;
		}
	}
}

onDraw

Displays the hue bar, the main field, the circle around the selected color, and the buttons to close the dialog with either the selected or the default color:

@Override
protected void onDraw(Canvas canvas) {
	int translatedHue = 255-(int)(mCurrentHue*255/360);
	// Display all the colors of the hue bar with lines
	for (int x=0; x<256; x++)
	{
		// If this is not the current selected hue, display the actual color
		if (translatedHue != x)
		{
			mPaint.setColor(mHueBarColors[x]);
			mPaint.setStrokeWidth(1);
		}
		else // else display a slightly larger black line
		{
			mPaint.setColor(Color.BLACK);
			mPaint.setStrokeWidth(3);
		}
		canvas.drawLine(x+10, 0, x+10, 40, mPaint);
	}

	// Display the main field colors using LinearGradient
	for (int x=0; x<256; x++)
	{
		int[] colors = new int[2];
		colors[0] = mMainColors[x];
		colors[1] = Color.BLACK;
		Shader shader = new LinearGradient(0, 50, 0, 306, colors, null, Shader.TileMode.REPEAT);
		mPaint.setShader(shader);
		canvas.drawLine(x+10, 50, x+10, 306, mPaint);
	}
	mPaint.setShader(null);

	// Display the circle around the currently selected color in the main field
	if (mCurrentX != 0 && mCurrentY != 0)
	{
		mPaint.setStyle(Paint.Style.STROKE);
		mPaint.setColor(Color.BLACK);
		canvas.drawCircle(mCurrentX, mCurrentY, 10, mPaint);
	}

	// Draw a 'button' with the currently selected color
	mPaint.setStyle(Paint.Style.FILL);
	mPaint.setColor(mCurrentColor);
	canvas.drawRect(10, 316, 138, 356, mPaint);

	// Set the text color according to the brightness of the color
	if (Color.red(mCurrentColor)+Color.green(mCurrentColor)+Color.blue(mCurrentColor) < 384)
		mPaint.setColor(Color.WHITE);
	else
		mPaint.setColor(Color.BLACK);
	canvas.drawText(getResources().getString(R.string.settings_bg_color_confirm), 74, 340, mPaint);

	// Draw a 'button' with the default color
	mPaint.setStyle(Paint.Style.FILL);
	mPaint.setColor(mDefaultColor);
	canvas.drawRect(138, 316, 266, 356, mPaint);

	// Set the text color according to the brightness of the color
	if (Color.red(mDefaultColor)+Color.green(mDefaultColor)+Color.blue(mDefaultColor) < 384)
		mPaint.setColor(Color.WHITE);
	else
		mPaint.setColor(Color.BLACK);
	canvas.drawText(getResources().getString(R.string.settings_default_color_confirm), 202, 340, mPaint);
}

onTouchEvent

Deals with the touch events:

@Override
public boolean onTouchEvent(MotionEvent event) {
	if (event.getAction() != MotionEvent.ACTION_DOWN) return true;
	float x = event.getX();
	float y = event.getY();

	// If the touch event is located in the hue bar
	if (x > 10 && x < 266 && y > 0 && y < 40)
	{
		// Update the main field colors
		mCurrentHue = (255-x)*360/255;
		updateMainColors();

		// Update the current selected color
		int transX = mCurrentX-10;
		int transY = mCurrentY-60;
		int index = 256*(transY-1)+transX;
		if (index > 0 && index < mMainColors.length)
			mCurrentColor = mMainColors[256*(transY-1)+transX];

		// Force the redraw of the dialog
		invalidate();
	}

	// If the touch event is located in the main field
	if (x > 10 && x < 266 && y > 50 && y < 306)
	{
		mCurrentX = (int) x;
		mCurrentY = (int) y;
		int transX = mCurrentX-10;
		int transY = mCurrentY-60;
		int index = 256*(transY-1)+transX;
		if (index > 0 && index < mMainColors.length)
		{
			// Update the current color
			mCurrentColor = mMainColors[index];
			// Force the redraw of the dialog
			invalidate();
		}
	}

	// If the touch event is located in the left button, notify the listener with the current color
	if (x > 10 && x < 138 && y > 316 && y < 356)
		mListener.colorChanged("", mCurrentColor);

	// If the touch event is located in the right button, notify the listener with the default color
	if (x > 138 && x < 266 && y > 316 && y < 356)
		mListener.colorChanged("", mDefaultColor);

	return true;
}

How to use it

Here is an excerpt of the Shake Them All! settings:

public class MySettings extends PreferenceActivity implements OnPreferenceClickListener, ColorPickerDialog.OnColorChangedListener {

	................................................

    public boolean onPreferenceClick(Preference pref)
    {
   		new ColorPickerDialog(this, this, DROIDS_COLOR_KEY, mPrefs.getInt(DROIDS_COLOR_KEY, DROIDS_COLOR_DEFAULT), DROIDS_COLOR_DEFAULT).show();

    	return true;
    }

    public void colorChanged(String key, int color)
    {
    	((PreferenceScreen)this.findPreference(SETTINGS_KEY)).getEditor().putInt(key, color).commit();
    }
}

Basically, your PreferenceActivity should implement the OnColorChangedListener interface. Then, you can open the color picker like any dialog by initializing it and calling its show method. Finally, in your listener, you can use your SharedPreference editor to change the value of the preference with the selected color, and commit your changes.

Voilà, this was my first, poor contribution to the wonderful world of Android. I hope this will help some of you, feel free to use, modify, distribute this code, and of course leave your comments there