Note that this UI is only temporary and will be replaced once the UI
- * design in
- * https://code.google.com/p/chromium/issues/detail?id=162491 is finalized
+ * UI for the color chooser that shows on the Android platform as a result of
+ * <input type=color > form element.
*/
-public class ColorPickerDialog extends Dialog {
+public class ColorPickerDialog extends AlertDialog implements OnColorChangedListener {
+ private final ColorPickerAdvanced mAdvancedColorPicker;
- public interface OnColorChangedListener {
- void colorChanged(int color);
- }
+ private final ColorPickerSimple mSimpleColorPicker;
- private OnColorChangedListener mListener;
- private int mInitialColor;
-
- private static class ColorPickerView extends View {
- private static final int CENTER_RADIUS = 32;
- private static final int DIALOG_HEIGHT = 200;
- private static final int BOUNDING_BOX_EDGE = 100;
- private static final float PI = 3.1415926f;
-
- private final Paint mPaint;
- private final Paint mCenterPaint;
- private final int[] mColors;
- private final OnColorChangedListener mListener;
- private boolean mTrackingCenter;
- private boolean mHighlightCenter;
-
- private int center_x = -1;
- private int center_y = -1;
-
- ColorPickerView(Context c, OnColorChangedListener listener, int color) {
- super(c);
- mListener = listener;
- mColors = new int[] {
- 0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00,
- 0xFFFFFF00, 0xFFFF0000
- };
- Shader shader = new SweepGradient(0, 0, mColors, null);
-
- mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- mPaint.setShader(shader);
- mPaint.setStyle(Paint.Style.STROKE);
- mPaint.setStrokeWidth(32);
-
- mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- mCenterPaint.setColor(color);
- mCenterPaint.setStrokeWidth(5);
- }
+ private final Button mMoreButton;
- @Override
- protected void onDraw(Canvas canvas) {
- if (center_x == -1) {
- center_x = getWidth() / 2;
- }
- if (center_y == -1) {
- center_y = getHeight() / 2;
- }
+ // The view up in the corner that shows the user the color they've currently selected.
+ private final View mCurrentColorView;
- float r = BOUNDING_BOX_EDGE - mPaint.getStrokeWidth() * 0.5f;
+ private final OnColorChangedListener mListener;
- canvas.translate(center_x, center_y);
+ private final int mInitialColor;
- canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
- canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);
+ private int mCurrentColor;
- if (mTrackingCenter) {
- int color = mCenterPaint.getColor();
- mCenterPaint.setStyle(Paint.Style.STROKE);
+ /**
+ * @param context The context the dialog is to run in.
+ * @param theme The theme to display the dialog in.
+ * @param listener The object to notify when the color is set.
+ * @param color The initial color to set.
+ */
+ public ColorPickerDialog(Context context, OnColorChangedListener listener, int color) {
+ super(context, 0);
- if (mHighlightCenter) {
- mCenterPaint.setAlpha(0xFF);
- } else {
- mCenterPaint.setAlpha(0x80);
- }
- canvas.drawCircle(0, 0,
- CENTER_RADIUS + mCenterPaint.getStrokeWidth(),
- mCenterPaint);
+ mListener = listener;
+ mInitialColor = color;
+ mCurrentColor = mInitialColor;
+
+ // Initialize title
+ LayoutInflater inflater = (LayoutInflater) context
+ .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
+ View title = inflater.inflate(R.layout.color_picker_dialog_title, null);
+ setCustomTitle(title);
+
+ mCurrentColorView = title.findViewById(R.id.selected_color_view);
+
+ TextView titleText = (TextView) title.findViewById(R.id.title);
+ titleText.setText(R.string.color_picker_dialog_title);
+
+ // Initialize Set/Cancel buttons
+ String positiveButtonText = context.getString(R.string.color_picker_button_set);
+ setButton(BUTTON_POSITIVE, positiveButtonText,
+ new Dialog.OnClickListener() {
+ @Override
+ public void onClick(DialogInterface dialogInterface, int i) {
+ tryNotifyColorSet(mCurrentColor);
+ }
+ });
+
+ // Note that with the color picker there's not really any such thing as
+ // "cancelled".
+ // The color picker flow only finishes when we return a color, so we
+ // have to always
+ // return something. The concept of "cancelled" in this case just means
+ // returning
+ // the color that we were initialized with.
+ String negativeButtonText = context.getString(R.string.color_picker_button_cancel);
+ setButton(BUTTON_NEGATIVE, negativeButtonText,
+ new Dialog.OnClickListener() {
+ @Override
+ public void onClick(DialogInterface dialogInterface, int i) {
+ tryNotifyColorSet(mInitialColor);
+ }
+ });
- mCenterPaint.setStyle(Paint.Style.FILL);
- mCenterPaint.setColor(color);
+ setOnCancelListener(new DialogInterface.OnCancelListener() {
+ @Override
+ public void onCancel(DialogInterface arg0) {
+ tryNotifyColorSet(mInitialColor);
}
- }
+ });
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- setMeasuredDimension(widthMeasureSpec, DIALOG_HEIGHT);
- }
-
- private static int interpolate(int low, int high, float interPolant) {
- return low + java.lang.Math.round(interPolant * (high - low));
- }
+ // Initialize main content view
+ View content = inflater.inflate(R.layout.color_picker_dialog_content, null);
+ setView(content);
- static int interpolateColor(int colors[], float x, float y) {
- float angle = (float)java.lang.Math.atan2(y, x);
- float unit = angle / (2 * PI);
- if (unit < 0) {
- unit += 1;
- }
- if (unit <= 0) {
- return colors[0];
- }
- if (unit >= 1) {
- return colors[colors.length - 1];
+ // Initialize More button.
+ mMoreButton = (Button) content.findViewById(R.id.more_colors_button);
+ mMoreButton.setOnClickListener(new Button.OnClickListener() {
+ @Override
+ public void onClick(View v) {
+ showAdvancedView();
}
+ });
- float p = unit * (colors.length - 1);
- int i = (int)p;
- p -= i;
-
- // Now p is just the fractional part [0...1) and i is the index.
- int c0 = colors[i];
- int c1 = colors[i+1];
- int a = interpolate(Color.alpha(c0), Color.alpha(c1), p);
- int r = interpolate(Color.red(c0), Color.red(c1), p);
- int g = interpolate(Color.green(c0), Color.green(c1), p);
- int b = interpolate(Color.blue(c0), Color.blue(c1), p);
+ // Initialize advanced color view (hidden initially).
+ mAdvancedColorPicker =
+ (ColorPickerAdvanced) content.findViewById(R.id.color_picker_advanced);
+ mAdvancedColorPicker.setVisibility(View.GONE);
- return Color.argb(a, r, g, b);
- }
+ // Initialize simple color view (default view).
+ mSimpleColorPicker = (ColorPickerSimple) content.findViewById(R.id.color_picker_simple);
+ mSimpleColorPicker.init(this);
- @Override
- public boolean onTouchEvent(MotionEvent event) {
- float x = event.getX() - center_x;
- float y = event.getY() - center_y;
-
- // equivalent to sqrt(x * x + y * y) <= CENTER_RADIUS but cheaper
- boolean inCenter = (x * x + y * y) <= (CENTER_RADIUS * CENTER_RADIUS);
-
- switch (event.getAction()) {
- case MotionEvent.ACTION_DOWN:
- mTrackingCenter = inCenter;
- if (inCenter) {
- mHighlightCenter = true;
- invalidate();
- break;
- }
- case MotionEvent.ACTION_MOVE:
- if (mTrackingCenter) {
- if (mHighlightCenter != inCenter) {
- mHighlightCenter = inCenter;
- invalidate();
- }
- } else {
- mCenterPaint.setColor(interpolateColor(mColors, x, y));
- invalidate();
- }
- break;
- case MotionEvent.ACTION_UP:
- if (mTrackingCenter) {
- if (inCenter) {
- mListener.colorChanged(mCenterPaint.getColor());
- }
-
- // Draw without the halo surrounding the central circle.
- mTrackingCenter = false;
- invalidate();
- }
- break;
- default:
- break;
- }
- return true;
- }
+ updateCurrentColor(mInitialColor);
}
- public ColorPickerDialog(Context context,
- OnColorChangedListener listener,
- int initialColor) {
- super(context);
-
- mListener = listener;
- mInitialColor = initialColor;
+ /**
+ * Listens to the ColorPicker for when the user has changed the selected color, and
+ * updates the current color (the color shown in the title) accordingly.
+ *
+ * @param color The new color chosen by the user.
+ */
+ @Override
+ public void onColorChanged(int color) {
+ updateCurrentColor(color);
+ }
- setOnCancelListener(new DialogInterface.OnCancelListener() {
- @Override
- public void onCancel(DialogInterface arg0) {
- mListener.colorChanged(mInitialColor);
- }
- });
+ /**
+ * Hides the simple view (the default) and shows the advanced one instead, hiding the
+ * "More" button at the same time.
+ */
+ private void showAdvancedView() {
+ // Only need to hide the borders, not the Views themselves, since the Views are
+ // contained within the borders.
+ View buttonBorder = findViewById(R.id.more_colors_button_border);
+ buttonBorder.setVisibility(View.GONE);
+
+ View simpleViewBorder = findViewById(R.id.color_picker_simple_border);
+ simpleViewBorder.setVisibility(View.GONE);
+
+ mAdvancedColorPicker.setVisibility(View.VISIBLE);
+ mAdvancedColorPicker.setListener(this);
+ mAdvancedColorPicker.setColor(mCurrentColor);
}
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(new ColorPickerView(getContext(), mListener, mInitialColor));
+ /**
+ * Tries to notify any listeners that the color has been set.
+ */
+ private void tryNotifyColorSet(int color) {
+ if (mListener != null) {
+ mListener.onColorChanged(color);
+ }
+ }
- // TODO(miguelg): Internationalization
- setTitle("Select Color");
+ /**
+ * Updates the internal cache of the currently selected color, updating the colorful little
+ * box in the title at the same time.
+ */
+ private void updateCurrentColor(int color) {
+ mCurrentColor = color;
+ if (mCurrentColorView != null) {
+ mCurrentColorView.setBackgroundColor(color);
+ }
}
}
diff --git a/ui/android/java/src/org/chromium/ui/ColorPickerSimple.java b/ui/android/java/src/org/chromium/ui/ColorPickerSimple.java
new file mode 100644
index 00000000000000..5c0382e4a84e39
--- /dev/null
+++ b/ui/android/java/src/org/chromium/ui/ColorPickerSimple.java
@@ -0,0 +1,146 @@
+// Copyright 2013 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+package org.chromium.ui;
+
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Paint;
+import android.graphics.Rect;
+import android.util.AttributeSet;
+import android.view.MotionEvent;
+import android.view.View;
+
+
+/**
+ * Draws a grid of (predefined) colors and allows the user to choose one of
+ * those colors.
+ */
+public class ColorPickerSimple extends View {
+ private static final int ROW_COUNT = 2;
+
+ private static final int COLUMN_COUNT = 4;
+
+ private static final int GRID_CELL_COUNT = ROW_COUNT * COLUMN_COUNT;
+
+ private static final int[] COLORS = { Color.RED,
+ Color.CYAN,
+ Color.BLUE,
+ Color.GREEN,
+ Color.MAGENTA,
+ Color.YELLOW,
+ Color.BLACK,
+ Color.WHITE
+ };
+
+ private Rect[] mBounds;
+
+ private Paint[] mPaints;
+
+ private OnColorChangedListener mOnColorTouchedListener;
+
+ public ColorPickerSimple(Context context) {
+ super(context);
+ }
+
+ public ColorPickerSimple(Context context, AttributeSet attrs) {
+ super(context, attrs);
+ }
+
+ public ColorPickerSimple(Context context, AttributeSet attrs, int defStyle) {
+ super(context, attrs, defStyle);
+ }
+
+ /**
+ * Initializes the listener and precalculates the grid and color positions.
+ *
+ * @param onColorChangedListener The listener that gets notified when the user touches
+ * a color.
+ */
+ public void init(OnColorChangedListener onColorChangedListener) {
+ mOnColorTouchedListener = onColorChangedListener;
+
+ // This will get calculated when the layout size is updated.
+ mBounds = null;
+
+ mPaints = new Paint[GRID_CELL_COUNT];
+ for (int i = 0; i < GRID_CELL_COUNT; ++i) {
+ Paint newPaint = new Paint();
+ newPaint.setColor(COLORS[i]);
+ mPaints[i] = newPaint;
+ }
+ }
+
+ /**
+ * Draws the grid of colors, based on the rectangles calculated in onSizeChanged().
+ *
+ * @param canvas The canvas the colors are drawn onto.
+ */
+ @Override
+ public void onDraw(Canvas canvas) {
+ if (mBounds == null || mPaints == null) {
+ return;
+ }
+ for (int i = 0; i < GRID_CELL_COUNT; ++i) {
+ canvas.drawRect(mBounds[i], mPaints[i]);
+ }
+ }
+
+ /**
+ * Responds to the user touching the grid and works out which color has been chosen as
+ * a result, depending on the X,Y coordinate.
+ *
+ * @param event The MotionEvent the X,Y coordinates are retrieved from.
+ */
+ @Override
+ public boolean onTouchEvent(MotionEvent event) {
+ if (event.getAction() != MotionEvent.ACTION_DOWN ||
+ mOnColorTouchedListener == null) {
+ return false;
+ }
+
+ if ((getWidth() > 0) && (getHeight() > 0)) {
+ int x = (int) event.getX();
+ int y = (int) event.getY();
+
+ int column = x * COLUMN_COUNT / getWidth();
+ int row = y * ROW_COUNT / getHeight();
+
+ int colorIndex = (row * COLUMN_COUNT) + column;
+ if (colorIndex >= 0 && colorIndex < COLORS.length) {
+ mOnColorTouchedListener.onColorChanged(COLORS[colorIndex]);
+ }
+ }
+ return true;
+ }
+
+ /**
+ * Recalculates the color grid with the new sizes.
+ */
+ @Override
+ protected void onSizeChanged(int width, int height, int oldw, int oldh) {
+ calculateGrid(width, height);
+ }
+
+ /**
+ * Calculates the sizes and positions of the cells in the grid, splitting
+ * them up as evenly as possible.
+ */
+ private void calculateGrid(final int width, final int height) {
+ mBounds = new Rect[GRID_CELL_COUNT];
+
+ for (int i = 0; i < ROW_COUNT; ++i) {
+ for (int j = 0; j < COLUMN_COUNT; ++j) {
+ int left = j * width / COLUMN_COUNT;
+ int right = (j + 1) * width / COLUMN_COUNT;
+
+ int top = i * height / ROW_COUNT;
+ int bottom = (i + 1) * height / ROW_COUNT;
+
+ Rect rect = new Rect(left, top, right, bottom);
+ mBounds[(i * COLUMN_COUNT) + j] = rect;
+ }
+ }
+ }
+}
diff --git a/ui/android/java/src/org/chromium/ui/OnColorChangedListener.java b/ui/android/java/src/org/chromium/ui/OnColorChangedListener.java
new file mode 100644
index 00000000000000..4caa3cf05bb27d
--- /dev/null
+++ b/ui/android/java/src/org/chromium/ui/OnColorChangedListener.java
@@ -0,0 +1,17 @@
+// Copyright 2013 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+package org.chromium.ui;
+
+/**
+ * The callback used to indicate the user changed the color.
+ */
+public interface OnColorChangedListener {
+
+ /**
+ * Called upon a color change.
+ *
+ * @param color The color that was set.
+ */
+ void onColorChanged(int color);
+}
\ No newline at end of file
diff --git a/ui/android/java/strings/android_ui_strings.grd b/ui/android/java/strings/android_ui_strings.grd
index da7ffd014ff28c..da7eee267de179 100644
--- a/ui/android/java/strings/android_ui_strings.grd
+++ b/ui/android/java/strings/android_ui_strings.grd
@@ -8,6 +8,27 @@