Query Tiles : Added rounded image with X button to the chip

This CL provides implements the query tile chip spec. The generic
ChipView class was augmented to support additional attributes such
as useRoundedIcon and optional endIcon concepts.

Bug: 1073793
Change-Id: I222ee46df0ab0a5d283cb0843278f7510854eb2f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2155494
Commit-Queue: Shakti Sahu <shaktisahu@chromium.org>
Reviewed-by: Theresa  <twellington@chromium.org>
Reviewed-by: David Trainor <dtrainor@chromium.org>
Cr-Commit-Position: refs/heads/master@{#762133}

chrome/android/java/res/layout/fake_search_box_layout.xml

@@ -42,14 +42,13 @@
             android:singleLine="true"
             android:hint="@string/search_or_type_web_address" />
 
-        <!-- TODO(shaktisahu): Create a QueryTileChip view with rounded image and X button. -->
         <org.chromium.ui.widget.ChipView
             android:id="@+id/query_tiles_chip"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:gravity="center_vertical"
             android:visibility="gone"
-            style="@style/SuggestionChipContacts" />
+            style="@style/InputChipWithRemoveIcon" />
     </RelativeLayout>
 
     <!-- Padding start is applied so that microphone icon appears in the same location as it

chrome/android/java/src/org/chromium/chrome/browser/ntp/search/SearchBoxViewBinder.java

@@ -75,11 +75,13 @@ class SearchBoxViewBinder
             chipView.setVisibility(
                     model.get(SearchBoxProperties.CHIP_VISIBILITY) ? View.VISIBLE : View.GONE);
         } else if (SearchBoxProperties.CHIP_DRAWABLE == propertyKey) {
-            chipView.setIcon(model.get(SearchBoxProperties.CHIP_DRAWABLE), false);
+            chipView.setIcon(model.get(SearchBoxProperties.CHIP_DRAWABLE), true);
         } else if (SearchBoxProperties.CHIP_CLICK_CALLBACK == propertyKey) {
             chipView.setOnClickListener(model.get(SearchBoxProperties.CHIP_CLICK_CALLBACK));
         } else if (SearchBoxProperties.CHIP_CANCEL_CALLBACK == propertyKey) {
-            // TODO(shaktisahu): Hook it up to the cancel button.
+            chipView.addRemoveIcon();
+            chipView.setRemoveIconClickListener(
+                    model.get(SearchBoxProperties.CHIP_CANCEL_CALLBACK));
         } else {
             assert false : "Unhandled property detected in SearchBoxViewBinder!";
         }

components/browser_ui/widget/android/BUILD.gn

@@ -114,35 +114,30 @@ android_resources("java_resources") {
     "java/res/anim/menu_exit_from_bottom.xml",
     "java/res/anim/textbubble_in.xml",
     "java/res/anim/textbubble_out.xml",
-    "java/res/drawable-hdpi/btn_close.png",
     "java/res/drawable-hdpi/btn_delete_24dp.png",
     "java/res/drawable-hdpi/btn_info.png",
     "java/res/drawable-hdpi/ic_arrow_back_white_24dp.png",
     "java/res/drawable-hdpi/ic_check_googblue_24dp.png",
     "java/res/drawable-hdpi/ic_more_vert_24dp_on_dark_bg.png",
     "java/res/drawable-hdpi/ic_more_vert_24dp_on_light_bg.png",
-    "java/res/drawable-mdpi/btn_close.png",
     "java/res/drawable-mdpi/btn_delete_24dp.png",
     "java/res/drawable-mdpi/btn_info.png",
     "java/res/drawable-mdpi/ic_arrow_back_white_24dp.png",
     "java/res/drawable-mdpi/ic_check_googblue_24dp.png",
     "java/res/drawable-mdpi/ic_more_vert_24dp_on_dark_bg.png",
     "java/res/drawable-mdpi/ic_more_vert_24dp_on_light_bg.png",
-    "java/res/drawable-xhdpi/btn_close.png",
     "java/res/drawable-xhdpi/btn_delete_24dp.png",
     "java/res/drawable-xhdpi/btn_info.png",
     "java/res/drawable-xhdpi/ic_arrow_back_white_24dp.png",
     "java/res/drawable-xhdpi/ic_check_googblue_24dp.png",
     "java/res/drawable-xhdpi/ic_more_vert_24dp_on_dark_bg.png",
     "java/res/drawable-xhdpi/ic_more_vert_24dp_on_light_bg.png",
-    "java/res/drawable-xxhdpi/btn_close.png",
     "java/res/drawable-xxhdpi/btn_delete_24dp.png",
     "java/res/drawable-xxhdpi/btn_info.png",
     "java/res/drawable-xxhdpi/ic_arrow_back_white_24dp.png",
     "java/res/drawable-xxhdpi/ic_check_googblue_24dp.png",
     "java/res/drawable-xxhdpi/ic_more_vert_24dp_on_dark_bg.png",
     "java/res/drawable-xxhdpi/ic_more_vert_24dp_on_light_bg.png",
-    "java/res/drawable-xxxhdpi/btn_close.png",
     "java/res/drawable-xxxhdpi/btn_delete_24dp.png",
     "java/res/drawable-xxxhdpi/btn_info.png",
     "java/res/drawable-xxxhdpi/ic_arrow_back_white_24dp.png",

ui/android/BUILD.gn

@@ -144,21 +144,26 @@ android_resources("ui_java_resources") {
     "java/res/color/filled_button_bg.xml",
     "java/res/color/filled_button_ripple_color.xml",
     "java/res/color/text_button_ripple_color.xml",
+    "java/res/drawable-hdpi/btn_close.png",
     "java/res/drawable-hdpi/ic_expand_less_black_24dp.png",
     "java/res/drawable-hdpi/ic_expand_more_black_24dp.png",
     "java/res/drawable-hdpi/popup_bg.9.png",
+    "java/res/drawable-mdpi/btn_close.png",
     "java/res/drawable-mdpi/ic_expand_less_black_24dp.png",
     "java/res/drawable-mdpi/ic_expand_more_black_24dp.png",
     "java/res/drawable-mdpi/popup_bg.9.png",
     "java/res/drawable-v21/popup_bg_tinted.xml",
     "java/res/drawable-v21/transition_expand_less_expand_more_black_24dp.xml",
     "java/res/drawable-v21/transition_expand_more_expand_less_black_24dp.xml",
+    "java/res/drawable-xhdpi/btn_close.png",
     "java/res/drawable-xhdpi/ic_expand_less_black_24dp.png",
     "java/res/drawable-xhdpi/ic_expand_more_black_24dp.png",
     "java/res/drawable-xhdpi/popup_bg.9.png",
+    "java/res/drawable-xxhdpi/btn_close.png",
     "java/res/drawable-xxhdpi/ic_expand_less_black_24dp.png",
     "java/res/drawable-xxhdpi/ic_expand_more_black_24dp.png",
     "java/res/drawable-xxhdpi/popup_bg.9.png",
+    "java/res/drawable-xxxhdpi/btn_close.png",
     "java/res/drawable-xxxhdpi/ic_expand_less_black_24dp.png",
     "java/res/drawable-xxxhdpi/ic_expand_more_black_24dp.png",
     "java/res/drawable-xxxhdpi/popup_bg.9.png",

ui/android/java/res/values-v17/styles.xml

@@ -83,6 +83,13 @@
     <style name="AssistiveChip" parent="Chip" tools:ignore="UnusedResources">
         <item name="cornerRadius">@dimen/chip_default_height</item>
     </style>
+    <style name="InputChipWithRemoveIcon" parent="InputChip" tools:ignore="UnusedResources">
+        <item name="iconWidth">28dp</item>
+        <item name="iconHeight">28dp</item>
+        <item name="useRoundedIcon">true</item>
+        <item name="endIconWidth">18dp</item>
+        <item name="endIconHeight">18dp</item>
+    </style>
     <style name="SearchShortcutChip" parent="Chip" tools:ignore="UnusedResources">
         <item name="cornerRadius">@dimen/chip_default_height</item>
         <item name="primaryTextAppearance">@style/TextAppearance.TextMediumThick.Primary</item>

ui/android/java/res/values/attrs.xml

@@ -24,7 +24,10 @@
         <attr name="cornerRadius" format="dimension"/>
         <attr name="iconWidth" format="reference|dimension"/>
         <attr name="iconHeight" format="reference|dimension"/>
+        <attr name="useRoundedIcon" format="boolean"/>
         <attr name="primaryTextAppearance" format="reference"/>
+        <attr name="endIconWidth" format="reference|dimension"/>
+        <attr name="endIconHeight" format="reference|dimension"/>
         <attr name="secondaryTextAppearance" format="reference"/>
         <attr name="rippleColor"/>
         <attr name="verticalInset"/>

ui/android/java/res/values/dimens.xml

@@ -45,6 +45,8 @@
     <dimen name="chip_bg_vertical_inset">8dp</dimen>
     <dimen name="chip_background_selected_alpha">@dimen/chip_background_selected_alpha_light</dimen>
     <dimen name="chip_icon_size">20dp</dimen>
+    <dimen name="chip_end_icon_margin_start">8dp</dimen>
+    <dimen name="chip_end_padding_with_end_icon">6dp</dimen>
 
     <!-- Dropdown default measures -->
     <dimen name="dropdown_item_height">50dp</dimen>

ui/android/java/res/values/ids.xml

@@ -7,4 +7,7 @@
     <item type="id" name="view_model" />
     <item type="id" name="view_type" />
     <item type="id" name="view_mcp" />
+
+    <!-- Widgets -->
+    <item type="id" name="chip_cancel_btn" />
 </resources>
\ No newline at end of file

ui/android/java/src/org/chromium/ui/widget/ChipView.java

@@ -21,16 +21,26 @@ import androidx.core.view.ViewCompat;
 import org.chromium.base.ApiCompatibilityUtils;
 import org.chromium.ui.R;
 
-/** The view responsible for displaying a material chip. */
+/**
+ * The view responsible for displaying a material chip. The chip has the following components :
+ * - A primary text to be shown.
+ * - An optional start icon that can be rounded as well.
+ * - An optional secondary text view that is shown to the right of the primary text view.
+ * - An optional remove icon at the end, intended for use with input chips.
+ */
 public class ChipView extends LinearLayout {
     /** An id to use for {@link #setIcon(int, boolean)} when there is no icon on the chip. */
     public static final int INVALID_ICON_ID = -1;
 
     private final RippleBackgroundHelper mRippleBackgroundHelper;
     private final TextView mPrimaryText;
-    private final ChromeImageView mIcon;
+    private final ChromeImageView mStartIcon;
+    private final boolean mUseRoundedStartIcon;
     private final @IdRes int mSecondaryTextAppearanceId;
+    private final int mEndIconWidth;
+    private final int mEndIconHeight;
 
+    private ChromeImageView mEndIcon;
     private TextView mSecondaryText;
 
     /**
@@ -50,9 +60,11 @@ public class ChipView extends LinearLayout {
     private ChipView(Context context, AttributeSet attrs, @StyleRes int themeOverlay) {
         super(new ContextThemeWrapper(context, themeOverlay), attrs, R.attr.chipStyle);
 
-        final @Px int leadingElementPadding =
+        @Px
+        int leadingElementPadding =
                 getResources().getDimensionPixelSize(R.dimen.chip_element_leading_padding);
-        final @Px int endPadding = getResources().getDimensionPixelSize(R.dimen.chip_end_padding);
+        @Px
+        int endPadding = getResources().getDimensionPixelSize(R.dimen.chip_end_padding);
 
         TypedArray a = getContext().obtainStyledAttributes(
                 attrs, R.styleable.ChipView, R.attr.chipStyle, 0);
@@ -66,17 +78,28 @@ public class ChipView extends LinearLayout {
                 getResources().getDimensionPixelSize(R.dimen.chip_icon_size));
         int iconHeight = a.getDimensionPixelSize(R.styleable.ChipView_iconHeight,
                 getResources().getDimensionPixelSize(R.dimen.chip_icon_size));
+        mUseRoundedStartIcon = a.getBoolean(R.styleable.ChipView_useRoundedIcon, false);
         int primaryTextAppearance = a.getResourceId(
                 R.styleable.ChipView_primaryTextAppearance, R.style.TextAppearance_ChipText);
+
+        mEndIconWidth = a.getDimensionPixelSize(R.styleable.ChipView_endIconWidth,
+                getResources().getDimensionPixelSize(R.dimen.chip_icon_size));
+        mEndIconHeight = a.getDimensionPixelSize(R.styleable.ChipView_endIconHeight,
+                getResources().getDimensionPixelSize(R.dimen.chip_icon_size));
         mSecondaryTextAppearanceId = a.getResourceId(
                 R.styleable.ChipView_secondaryTextAppearance, R.style.TextAppearance_ChipText);
         int verticalInset = a.getDimensionPixelSize(R.styleable.ChipView_verticalInset,
                 getResources().getDimensionPixelSize(R.dimen.chip_bg_vertical_inset));
         a.recycle();
 
-        mIcon = new ChromeImageView(getContext());
-        mIcon.setLayoutParams(new LayoutParams(iconWidth, iconHeight));
-        addView(mIcon);
+        mStartIcon = new ChromeImageView(getContext());
+        mStartIcon.setLayoutParams(new LayoutParams(iconWidth, iconHeight));
+        addView(mStartIcon);
+
+        if (mUseRoundedStartIcon) {
+            int chipHeight = getResources().getDimensionPixelOffset(R.dimen.chip_default_height);
+            leadingElementPadding = (chipHeight - iconHeight) / 2;
+        }
 
         // Setting this enforces 16dp padding at the end and 8dp at the start. For text, the start
         // padding needs to be 16dp which is why a ChipTextView contributes the remaining 8dp.
@@ -118,12 +141,12 @@ public class ChipView extends LinearLayout {
      */
     public void setIcon(@DrawableRes int icon, boolean tintWithTextColor) {
         if (icon == INVALID_ICON_ID) {
-            mIcon.setVisibility(ViewGroup.GONE);
+            mStartIcon.setVisibility(ViewGroup.GONE);
             return;
         }
 
-        mIcon.setVisibility(ViewGroup.VISIBLE);
-        mIcon.setImageResource(icon);
+        mStartIcon.setVisibility(ViewGroup.VISIBLE);
+        mStartIcon.setImageResource(icon);
         setTint(tintWithTextColor);
     }
 
@@ -132,11 +155,44 @@ public class ChipView extends LinearLayout {
      * @param drawable Drawable to display.
      */
     public void setIcon(Drawable drawable, boolean tintWithTextColor) {
-        mIcon.setVisibility(ViewGroup.VISIBLE);
-        mIcon.setImageDrawable(drawable);
+        mStartIcon.setVisibility(ViewGroup.VISIBLE);
+        mStartIcon.setImageDrawable(drawable);
         setTint(tintWithTextColor);
     }
 
+    /**
+     * Adds a remove icon (X button) at the trailing end of the chip next to the primary text.
+     */
+    public void addRemoveIcon() {
+        if (mEndIcon != null) return;
+
+        mEndIcon = new ChromeImageView(getContext());
+        mEndIcon.setId(R.id.chip_cancel_btn);
+        mEndIcon.setImageResource(R.drawable.btn_close);
+        ApiCompatibilityUtils.setImageTintList(mEndIcon, mPrimaryText.getTextColors());
+        LinearLayout.LayoutParams layoutParams =
+                new LinearLayout.LayoutParams(mEndIconWidth, mEndIconHeight);
+        layoutParams.setMarginStart(
+                getResources().getDimensionPixelSize(R.dimen.chip_end_icon_margin_start));
+        mEndIcon.setLayoutParams(layoutParams);
+        addView(mEndIcon);
+
+        // Setting an end icon enforces 6dp padding at the end.
+        int chipPaddingEnd =
+                getResources().getDimensionPixelSize(R.dimen.chip_end_padding_with_end_icon);
+        ViewCompat.setPaddingRelative(
+                this, getPaddingStart(), getPaddingTop(), chipPaddingEnd, getPaddingBottom());
+    }
+
+    /**
+     * Sets a {@link android.view.View.OnClickListener} for the remove icon.
+     * {@link ChipView#addRemoveIcon()} must be called prior to this method.
+     * @param listener The listener to be invoked on click events.
+     */
+    public void setRemoveIconClickListener(OnClickListener listener) {
+        mEndIcon.setOnClickListener(listener);
+    }
+
     /**
      * Returns the {@link TextView} that contains the label of the chip.
      * @return A {@link TextView}.
@@ -171,9 +227,9 @@ public class ChipView extends LinearLayout {
      */
     private void setTint(boolean tintWithTextColor) {
         if (mPrimaryText.getTextColors() != null && tintWithTextColor) {
-            ApiCompatibilityUtils.setImageTintList(mIcon, mPrimaryText.getTextColors());
+            ApiCompatibilityUtils.setImageTintList(mStartIcon, mPrimaryText.getTextColors());
         } else {
-            ApiCompatibilityUtils.setImageTintList(mIcon, null);
+            ApiCompatibilityUtils.setImageTintList(mStartIcon, null);
         }
     }
 }