Revise gesture floating preview design

Bug: 7043127
Change-Id: Ibf9a6d57279263d9b60753e0eb734b658eeda9f2

java/res/values-land/dimens.xml

@@ -73,4 +73,10 @@
     <dimen name="more_keys_keyboard_slide_allowance">53.76dp</dimen>
     <!-- popup_key_height x -1.0 -->
     <dimen name="more_keys_keyboard_vertical_correction">-44.8dp</dimen>
+
+    <!-- Gesture floating preview text parameters -->
+    <dimen name="gesture_floating_preview_text_size">23dp</dimen>
+    <dimen name="gesture_floating_preview_text_offset">54dp</dimen>
+    <dimen name="gesture_floating_preview_horizontal_padding">23dp</dimen>
+    <dimen name="gesture_floating_preview_vertical_padding">15dp</dimen>
 </resources>

java/res/values-sw600dp-land/dimens.xml

@@ -61,4 +61,10 @@
     <dimen name="suggestions_strip_padding">252.0dp</dimen>
     <integer name="max_more_suggestions_row">5</integer>
     <fraction name="min_more_suggestions_width">50%</fraction>
+
+    <!-- Gesture floating preview text parameters -->
+    <dimen name="gesture_floating_preview_text_size">26dp</dimen>
+    <dimen name="gesture_floating_preview_text_offset">76dp</dimen>
+    <dimen name="gesture_floating_preview_horizontal_padding">26dp</dimen>
+    <dimen name="gesture_floating_preview_vertical_padding">17dp</dimen>
 </resources>

java/res/values-sw600dp/dimens.xml

@@ -84,4 +84,13 @@
     <dimen name="suggestion_padding">12dp</dimen>
     <dimen name="suggestion_text_size">22dp</dimen>
     <dimen name="more_suggestions_hint_text_size">33dp</dimen>
+
+    <!-- Gesture preview trail parameters -->
+    <dimen name="gesture_preview_trail_width">2.5dp</dimen>
+    <!-- Gesture floating preview text parameters -->
+    <dimen name="gesture_floating_preview_text_size">28dp</dimen>
+    <dimen name="gesture_floating_preview_text_offset">87dp</dimen>
+    <dimen name="gesture_floating_preview_horizontal_padding">28dp</dimen>
+    <dimen name="gesture_floating_preview_vertical_padding">19dp</dimen>
+    <dimen name="gesture_floating_preview_round_radius">3dp</dimen>
 </resources>

java/res/values-sw768dp-land/dimens.xml

@@ -64,4 +64,10 @@
 
     <dimen name="suggestions_strip_padding">252.0dp</dimen>
     <fraction name="min_more_suggestions_width">50%</fraction>
+
+    <!-- Gesture floating preview text parameters -->
+    <dimen name="gesture_floating_preview_text_size">32dp</dimen>
+    <dimen name="gesture_floating_preview_text_offset">100dp</dimen>
+    <dimen name="gesture_floating_preview_horizontal_padding">32dp</dimen>
+    <dimen name="gesture_floating_preview_vertical_padding">21dp</dimen>
 </resources>

java/res/values-sw768dp/dimens.xml

@@ -85,4 +85,13 @@
     <dimen name="suggestion_padding">8dp</dimen>
     <dimen name="suggestion_text_size">22dp</dimen>
     <dimen name="more_suggestions_hint_text_size">33dp</dimen>
+
+    <!-- Gesture preview trail parameters -->
+    <dimen name="gesture_preview_trail_width">2.5dp</dimen>
+    <!-- Gesture floating preview text parameters -->
+    <dimen name="gesture_floating_preview_text_size">26dp</dimen>
+    <dimen name="gesture_floating_preview_text_offset">86dp</dimen>
+    <dimen name="gesture_floating_preview_horizontal_padding">26dp</dimen>
+    <dimen name="gesture_floating_preview_vertical_padding">17dp</dimen>
+    <dimen name="gesture_floating_preview_round_radius">3dp</dimen>
 </resources>

java/res/values/attrs.xml

@@ -77,12 +77,10 @@
         <attr name="gestureFloatingPreviewTextSize" format="dimension" />
         <attr name="gestureFloatingPreviewTextColor" format="color" />
         <attr name="gestureFloatingPreviewTextOffset" format="dimension" />
-        <attr name="gestureFloatingPreviewTextShadingColor" format="color" />
+        <attr name="gestureFloatingPreviewColor" format="color" />
-        <attr name="gestureFloatingPreviewTextShadingBorder" format="dimension" />
+        <attr name="gestureFloatingPreviewHorizontalPadding" format="dimension" />
-        <attr name="gestureFloatingPreviewTextShadowColor" format="color" />
+        <attr name="gestureFloatingPreviewVerticalPadding" format="dimension" />
-        <attr name="gestureFloatingPreviewTextShadowBorder" format="dimension" />
+        <attr name="gestureFloatingPreviewRoundRadius" format="dimension" />
-        <attr name="gestureFloatingPreviewTextConnectorColor" format="color" />
-        <attr name="gestureFloatingPreviewTextConnectorWidth" format="dimension" />
         <!-- Delay after gesture input and gesture floating preview text dismissing in millisecond -->
         <attr name="gestureFloatingPreviewTextLingerTimeout" format="integer" />
         <!-- Delay after gesture trail starts fading out in millisecond. -->

java/res/values/dimens.xml

@@ -99,13 +99,14 @@
     <integer name="suggestions_count_in_strip">3</integer>
     <fraction name="center_suggestion_percentile">36%</fraction>
 
-    <!-- Gesture preview parameters -->
+    <!-- Gesture preview trail parameters -->
     <dimen name="gesture_preview_trail_width">2.5dp</dimen>
-    <dimen name="gesture_floating_preview_text_size">35dp</dimen>
+    <!-- Gesture floating preview text parameters -->
-    <dimen name="gesture_floating_preview_text_offset">75dp</dimen>
+    <dimen name="gesture_floating_preview_text_size">24dp</dimen>
-    <dimen name="gesture_floating_preview_text_shadow_border">17.5dp</dimen>
+    <dimen name="gesture_floating_preview_text_offset">73dp</dimen>
-    <dimen name="gesture_floating_preview_text_shading_border">7.5dp</dimen>
+    <dimen name="gesture_floating_preview_horizontal_padding">24dp</dimen>
-    <dimen name="gesture_floating_preview_text_connector_width">1.0dp</dimen>
+    <dimen name="gesture_floating_preview_vertical_padding">16dp</dimen>
+    <dimen name="gesture_floating_preview_round_radius">3dp</dimen>
 
     <!-- Inset used in Accessibility mode to avoid accidental key presses when a finger slides off the screen. -->
     <dimen name="accessibility_edge_slop">8dp</dimen>

java/res/values/styles.xml

@@ -66,14 +66,12 @@
         <item name="backgroundDimAlpha">128</item>
         <!-- android:color/holo_blue_light=#FF33B5E5 -->
         <item name="gestureFloatingPreviewTextSize">@dimen/gesture_floating_preview_text_size</item>
-        <item name="gestureFloatingPreviewTextColor">@android:color/white</item>
+        <item name="gestureFloatingPreviewTextColor">@android:color/holo_blue_light</item>
         <item name="gestureFloatingPreviewTextOffset">@dimen/gesture_floating_preview_text_offset</item>
-        <item name="gestureFloatingPreviewTextShadingColor">@android:color/holo_blue_light</item>
+        <item name="gestureFloatingPreviewColor">#C0000000</item>
-        <item name="gestureFloatingPreviewTextShadingBorder">@dimen/gesture_floating_preview_text_shading_border</item>
+        <item name="gestureFloatingPreviewHorizontalPadding">@dimen/gesture_floating_preview_horizontal_padding</item>
-        <item name="gestureFloatingPreviewTextShadowColor">#FF252525</item>
+        <item name="gestureFloatingPreviewVerticalPadding">@dimen/gesture_floating_preview_vertical_padding</item>
-        <item name="gestureFloatingPreviewTextShadowBorder">@dimen/gesture_floating_preview_text_shadow_border</item>
+        <item name="gestureFloatingPreviewRoundRadius">@dimen/gesture_floating_preview_round_radius</item>
-        <item name="gestureFloatingPreviewTextConnectorColor">@android:color/white</item>
-        <item name="gestureFloatingPreviewTextConnectorWidth">@dimen/gesture_floating_preview_text_connector_width</item>
         <item name="gestureFloatingPreviewTextLingerTimeout">@integer/config_gesture_floating_preview_text_linger_timeout</item>
         <item name="gesturePreviewTrailFadeoutStartDelay">@integer/config_gesture_preview_trail_fadeout_start_delay</item>
         <item name="gesturePreviewTrailFadeoutDuration">@integer/config_gesture_preview_trail_fadeout_duration</item>

java/src/com/android/inputmethod/keyboard/KeyboardView.java

@@ -71,12 +71,10 @@ import java.util.HashSet;
  * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextSize
  * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextColor
  * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextOffset
- * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextShadingColor
+ * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewColor
- * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextShadingBorder
+ * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewHorizontalPadding
- * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextShadowColor
+ * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewVerticalPadding
- * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextShadowBorder
+ * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewRoundRadius
- * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextConnectorColor
- * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextConnectorWidth
  * @attr ref R.styleable#KeyboardView_gestureFloatingPreviewTextLingerTimeout
  * @attr ref R.styleable#KeyboardView_gesturePreviewTrailFadeoutStartDelay
  * @attr ref R.styleable#KeyboardView_gesturePreviewTrailFadeoutDuration

java/src/com/android/inputmethod/keyboard/internal/PreviewPlacerView.java

@@ -21,6 +21,8 @@ import android.content.res.TypedArray;
 import android.graphics.Canvas;
 import android.graphics.Paint;
 import android.graphics.Paint.Align;
+import android.graphics.Rect;
+import android.graphics.RectF;
 import android.os.Message;
 import android.text.TextUtils;
 import android.util.AttributeSet;
@@ -38,12 +40,10 @@ public class PreviewPlacerView extends RelativeLayout {
     private final Paint mTextPaint;
     private final int mGestureFloatingPreviewTextColor;
     private final int mGestureFloatingPreviewTextOffset;
-    private final int mGestureFloatingPreviewTextShadowColor;
+    private final int mGestureFloatingPreviewColor;
-    private final int mGestureFloatingPreviewTextShadowBorder;
+    private final float mGestureFloatingPreviewHorizontalPadding;
-    private final int mGestureFloatingPreviewTextShadingColor;
+    private final float mGestureFloatingPreviewVerticalPadding;
-    private final int mGestureFloatingPreviewTextShadingBorder;
+    private final float mGestureFloatingPreviewRoundRadius;
-    private final int mGestureFloatingPreviewTextConnectorColor;
-    private final int mGestureFloatingPreviewTextConnectorWidth;
     /* package */ final int mGestureFloatingPreviewTextLingerTimeout;
 
     private int mXOrigin;
@@ -54,8 +54,12 @@ public class PreviewPlacerView extends RelativeLayout {
     private final GesturePreviewTrailParams mGesturePreviewTrailParams;
 
     private String mGestureFloatingPreviewText;
+    private final int mGestureFloatingPreviewTextHeight;
+    // {@link RectF} is needed for {@link Canvas#drawRoundRect(RectF, float, float, Paint)}.
+    private final RectF mGestureFloatingPreviewRectangle = new RectF();
     private int mLastPointerX;
     private int mLastPointerY;
+    private static final char[] TEXT_HEIGHT_REFERENCE_CHAR = { 'M' };
 
     private boolean mDrawsGesturePreviewTrail;
     private boolean mDrawsGestureFloatingPreviewText;
@@ -132,18 +136,14 @@ public class PreviewPlacerView extends RelativeLayout {
                 R.styleable.KeyboardView_gestureFloatingPreviewTextColor, 0);
         mGestureFloatingPreviewTextOffset = keyboardViewAttr.getDimensionPixelOffset(
                 R.styleable.KeyboardView_gestureFloatingPreviewTextOffset, 0);
-        mGestureFloatingPreviewTextShadowColor = keyboardViewAttr.getColor(
+        mGestureFloatingPreviewColor = keyboardViewAttr.getColor(
-                R.styleable.KeyboardView_gestureFloatingPreviewTextShadowColor, 0);
+                R.styleable.KeyboardView_gestureFloatingPreviewColor, 0);
-        mGestureFloatingPreviewTextShadowBorder = keyboardViewAttr.getDimensionPixelSize(
+        mGestureFloatingPreviewHorizontalPadding = keyboardViewAttr.getDimension(
-                R.styleable.KeyboardView_gestureFloatingPreviewTextShadowBorder, 0);
+                R.styleable.KeyboardView_gestureFloatingPreviewHorizontalPadding, 0.0f);
-        mGestureFloatingPreviewTextShadingColor = keyboardViewAttr.getColor(
+        mGestureFloatingPreviewVerticalPadding = keyboardViewAttr.getDimension(
-                R.styleable.KeyboardView_gestureFloatingPreviewTextShadingColor, 0);
+                R.styleable.KeyboardView_gestureFloatingPreviewVerticalPadding, 0.0f);
-        mGestureFloatingPreviewTextShadingBorder = keyboardViewAttr.getDimensionPixelSize(
+        mGestureFloatingPreviewRoundRadius = keyboardViewAttr.getDimension(
-                R.styleable.KeyboardView_gestureFloatingPreviewTextShadingBorder, 0);
+                R.styleable.KeyboardView_gestureFloatingPreviewRoundRadius, 0.0f);
-        mGestureFloatingPreviewTextConnectorColor = keyboardViewAttr.getColor(
-                R.styleable.KeyboardView_gestureFloatingPreviewTextConnectorColor, 0);
-        mGestureFloatingPreviewTextConnectorWidth = keyboardViewAttr.getDimensionPixelSize(
-                R.styleable.KeyboardView_gestureFloatingPreviewTextConnectorWidth, 0);
         mGestureFloatingPreviewTextLingerTimeout = keyboardViewAttr.getInt(
                 R.styleable.KeyboardView_gestureFloatingPreviewTextLingerTimeout, 0);
         final int gesturePreviewTrailColor = keyboardViewAttr.getColor(
@@ -155,18 +155,23 @@ public class PreviewPlacerView extends RelativeLayout {
 
         mDrawingHandler = new DrawingHandler(this, mGesturePreviewTrailParams);
 
-        mGesturePaint = new Paint();
+        final Paint gesturePaint = new Paint();
-        mGesturePaint.setAntiAlias(true);
+        gesturePaint.setAntiAlias(true);
-        mGesturePaint.setStyle(Paint.Style.STROKE);
+        gesturePaint.setStyle(Paint.Style.STROKE);
-        mGesturePaint.setStrokeJoin(Paint.Join.ROUND);
+        gesturePaint.setStrokeJoin(Paint.Join.ROUND);
-        mGesturePaint.setColor(gesturePreviewTrailColor);
+        gesturePaint.setColor(gesturePreviewTrailColor);
-        mGesturePaint.setStrokeWidth(gesturePreviewTrailWidth);
+        gesturePaint.setStrokeWidth(gesturePreviewTrailWidth);
+        mGesturePaint = gesturePaint;
 
-        mTextPaint = new Paint();
+        final Paint textPaint = new Paint();
-        mTextPaint.setAntiAlias(true);
+        textPaint.setAntiAlias(true);
-        mTextPaint.setStrokeJoin(Paint.Join.ROUND);
+        textPaint.setStyle(Paint.Style.FILL);
-        mTextPaint.setTextAlign(Align.CENTER);
+        textPaint.setTextAlign(Align.CENTER);
-        mTextPaint.setTextSize(gestureFloatingPreviewTextSize);
+        textPaint.setTextSize(gestureFloatingPreviewTextSize);
+        mTextPaint = textPaint;
+        final Rect textRect = new Rect();
+        textPaint.getTextBounds(TEXT_HEIGHT_REFERENCE_CHAR, 0, 1, textRect);
+        mGestureFloatingPreviewTextHeight = textRect.height();
     }
 
     public void setOrigin(final int x, final int y) {
@@ -242,45 +247,30 @@ public class PreviewPlacerView extends RelativeLayout {
         }
 
         final Paint paint = mTextPaint;
+        final RectF rectangle = mGestureFloatingPreviewRectangle;
         // TODO: Figure out how we should deal with the floating preview text with multiple moving
         // fingers.
-        final int lastX = mLastPointerX;
+
-        final int lastY = mLastPointerY;
+        // Paint the round rectangle background.
-        final int textSize = (int)paint.getTextSize();
+        final int textHeight = mGestureFloatingPreviewTextHeight;
+        final float textWidth = paint.measureText(gestureFloatingPreviewText);
+        final float hPad = mGestureFloatingPreviewHorizontalPadding;
+        final float vPad = mGestureFloatingPreviewVerticalPadding;
+        final float rectWidth = textWidth + hPad * 2.0f;
+        final float rectHeight = textHeight + vPad * 2.0f;
         final int canvasWidth = canvas.getWidth();
-
+        final float rectX = Math.min(Math.max(mLastPointerX - rectWidth / 2.0f, 0.0f),
-        final int halfTextWidth = (int)paint.measureText(gestureFloatingPreviewText) / 2 + textSize;
+                canvasWidth - rectWidth);
-        final int textX = Math.min(Math.max(lastX, halfTextWidth), canvasWidth - halfTextWidth);
+        final float rectY = mLastPointerY - mGestureFloatingPreviewTextOffset - rectHeight;
-
+        rectangle.set(rectX, rectY, rectX + rectWidth, rectY + rectHeight);
-        int textY = Math.max(-textSize, lastY - mGestureFloatingPreviewTextOffset);
+        final float round = mGestureFloatingPreviewRoundRadius;
-        if (textY < 0) {
+        paint.setColor(mGestureFloatingPreviewColor);
-            // Paint black text shadow if preview extends above keyboard region.
+        canvas.drawRoundRect(rectangle, round, round, paint);
-            paint.setStyle(Paint.Style.FILL_AND_STROKE);
-            paint.setColor(mGestureFloatingPreviewTextShadowColor);
-            paint.setStrokeWidth(mGestureFloatingPreviewTextShadowBorder);
-            canvas.drawText(gestureFloatingPreviewText, textX, textY, paint);
-        }
-
-        // Paint the vertical line connecting the touch point to the preview text.
-        paint.setStyle(Paint.Style.STROKE);
-        paint.setColor(mGestureFloatingPreviewTextConnectorColor);
-        paint.setStrokeWidth(mGestureFloatingPreviewTextConnectorWidth);
-        final int lineTopY = textY - textSize / 4;
-        canvas.drawLine(lastX, lastY, lastX, lineTopY, paint);
-        if (lastX != textX) {
-            // Paint the horizontal line connection the touch point to the preview text.
-            canvas.drawLine(lastX, lineTopY, textX, lineTopY, paint);
-        }
-
-        // Paint the shading for the text preview
-        paint.setStyle(Paint.Style.FILL_AND_STROKE);
-        paint.setColor(mGestureFloatingPreviewTextShadingColor);
-        paint.setStrokeWidth(mGestureFloatingPreviewTextShadingBorder);
-        canvas.drawText(gestureFloatingPreviewText, textX, textY, paint);
 
         // Paint the text preview
         paint.setColor(mGestureFloatingPreviewTextColor);
-        paint.setStyle(Paint.Style.FILL);
+        final float textX = rectX + hPad + textWidth / 2.0f;
+        final float textY = rectY + vPad + textHeight;
         canvas.drawText(gestureFloatingPreviewText, textX, textY, paint);
     }
 }