[go: up one dir, main page]

Rounded images and transition animations for Entity Suggestions.

This change addresses styling issues with Entity suggestions:
- introduces rounded corners and
- transition animation for Entity suggestions.

Bug: 973986
Change-Id: I3151a6b5718bf5324dba844c62dc19ca34f71819
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1659617
Reviewed-by: Matthew Jones <mdjones@chromium.org>
Cr-Commit-Position: refs/branch-heads/3809@{#314}
Cr-Branched-From: d82dec1a818f378c464ba307ddd9c92133eac355-refs/heads/master@{#665002}
diff --git a/chrome/android/java/src/org/chromium/chrome/browser/omnibox/suggestions/entity/EntitySuggestionView.java b/chrome/android/java/src/org/chromium/chrome/browser/omnibox/suggestions/entity/EntitySuggestionView.java
index c29704f..c8ef243 100644
--- a/chrome/android/java/src/org/chromium/chrome/browser/omnibox/suggestions/entity/EntitySuggestionView.java
+++ b/chrome/android/java/src/org/chromium/chrome/browser/omnibox/suggestions/entity/EntitySuggestionView.java
@@ -5,8 +5,13 @@
 package org.chromium.chrome.browser.omnibox.suggestions.entity;
 
 import android.content.Context;
+import android.content.res.Resources;
+import android.graphics.Bitmap;
 import android.graphics.drawable.Drawable;
+import android.graphics.drawable.TransitionDrawable;
 import android.support.v4.graphics.drawable.DrawableCompat;
+import android.support.v4.graphics.drawable.RoundedBitmapDrawable;
+import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;
 import android.util.AttributeSet;
 import android.view.MotionEvent;
 import android.view.View;
@@ -45,6 +50,9 @@
         void onRefine();
     }
 
+    /** Length of the transition animation used to animate appearance of the entity image. */
+    private static final int IMAGE_TRANSITION_ANIMATION_LENGTH_MS = 300;
+
     private EventListener mEventListener;
     private View mEntityView;
     private TextView mSubjectText;
@@ -53,6 +61,7 @@
     private ImageView mRefineView;
     private boolean mUseDarkColors;
     private boolean mUseSuggestionImage;
+    private Drawable mCurrentImage;
 
     /**
      * Container view for omnibox suggestions allowing soft focus from keyboard.
@@ -82,7 +91,6 @@
         mEntityImageView = findViewById(R.id.omnibox_entity_image);
         mEntityView = findViewById(R.id.omnibox_entity);
         mRefineView = findViewById(R.id.omnibox_entity_refine_icon);
-
         showSearchIcon();
     }
 
@@ -145,13 +153,34 @@
     }
 
     /**
-     * Specify image to be shown beside suggestion text.
-     * @param drawable Image to be rendered.
+     * Specify image bitmap to be shown beside suggestion text.
+     * Image will be resized and decorated with rounded corners.
+     *
+     * @param bitmap Image to be rendered.
      */
-    void setSuggestionImage(Drawable drawable) {
+    void setSuggestionImage(Bitmap bitmap) {
+        Resources res = getContext().getResources();
+        int edgeLength = res.getDimensionPixelSize(R.dimen.omnibox_suggestion_entity_icon_size);
+        int radiusLength = res.getDimensionPixelSize(R.dimen.default_rounded_corner_radius);
+
+        Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, edgeLength, edgeLength, true);
+        RoundedBitmapDrawable roundedDrawable =
+                RoundedBitmapDrawableFactory.create(res, scaledBitmap);
+        roundedDrawable.setCornerRadius(radiusLength);
         mUseSuggestionImage = true;
-        mEntityImageView.setImageDrawable(drawable);
+
+        Drawable presentedDrawable = roundedDrawable;
+
+        if (mCurrentImage != null && !(mCurrentImage instanceof TransitionDrawable)) {
+            TransitionDrawable transition =
+                    new TransitionDrawable(new Drawable[] {mCurrentImage, roundedDrawable});
+            transition.setCrossFadeEnabled(true);
+            transition.startTransition(IMAGE_TRANSITION_ANIMATION_LENGTH_MS);
+            presentedDrawable = transition;
+        }
+        mEntityImageView.setImageDrawable(presentedDrawable);
         mEntityImageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
+        mCurrentImage = roundedDrawable;
     }
 
     /**
@@ -163,6 +192,7 @@
     }
 
     private void showSearchIcon() {
+        mCurrentImage = null;
         mEntityImageView.setImageDrawable(TintedDrawable.constructTintedDrawable(getContext(),
                 R.drawable.ic_suggestion_magnifier,
                 mUseDarkColors ? R.color.default_icon_color_secondary_list
diff --git a/chrome/android/java/src/org/chromium/chrome/browser/omnibox/suggestions/entity/EntitySuggestionViewBinder.java b/chrome/android/java/src/org/chromium/chrome/browser/omnibox/suggestions/entity/EntitySuggestionViewBinder.java
index bb544c67f..44bcf82 100644
--- a/chrome/android/java/src/org/chromium/chrome/browser/omnibox/suggestions/entity/EntitySuggestionViewBinder.java
+++ b/chrome/android/java/src/org/chromium/chrome/browser/omnibox/suggestions/entity/EntitySuggestionViewBinder.java
@@ -6,8 +6,6 @@
 
 import android.graphics.Bitmap;
 import android.graphics.Color;
-import android.graphics.drawable.BitmapDrawable;
-import android.graphics.drawable.ColorDrawable;
 import android.os.Handler;
 import android.view.MotionEvent;
 
@@ -78,9 +76,14 @@
         int color = model.get(EntitySuggestionViewProperties.IMAGE_DOMINANT_COLOR);
 
         if (bitmap != null) {
-            view.setSuggestionImage(new BitmapDrawable(bitmap));
+            view.setSuggestionImage(bitmap);
         } else if (color != NO_DOMINANT_COLOR) {
-            view.setSuggestionImage(new ColorDrawable(color));
+            // Note: we deliberately don't use ColorDrawable here to allow presenting
+            // fallback color as a rounded-corners rectangle.
+            // See EntitySuggestionView#setSuggestionImage for more details.
+            bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888);
+            bitmap.eraseColor(color);
+            view.setSuggestionImage(bitmap);
         } else {
             view.clearSuggestionImage();
         }