[Explore sites]: Make explore category tiles pretty

Bug: 852075
Change-Id: Ieb6329d57005bdba63cdf7ed1f991b5da61bb362
Reviewed-on: https://chromium-review.googlesource.com/1103138
Commit-Queue: Cathy Li <chili@chromium.org>
Reviewed-by: Theresa <twellington@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569109}

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

@@ -7,15 +7,16 @@
 <org.chromium.chrome.browser.explore_sites.ExploreSitesCategoryTileView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:padding="10dp"
     android:layout_width="wrap_content"
-    android:layout_height="wrap_content" >
+    android:layout_height="wrap_content"
+    android:orientation="vertical"
+    android:layout_weight="0.33" >
 
     <!-- Main icon/image -->
     <ImageView
         android:id="@+id/explore_sites_category_tile_icon"
         android:layout_gravity="center_horizontal"
-        android:layout_marginTop="@dimen/tile_view_icon_margin_top_modern"
+        android:layout_marginTop="@dimen/explore_sites_padding"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:contentDescription="@null" />
@@ -26,5 +27,5 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:gravity="center_horizontal"
-        android:textAppearance="@style/BlackCaption" />
+        android:textAppearance="@style/BlackCaptionDefault" />
 </org.chromium.chrome.browser.explore_sites.ExploreSitesCategoryTileView>

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

@@ -7,14 +7,16 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:orientation="vertical" >
+    android:layout_marginTop="@dimen/explore_sites_margin"
+    android:orientation="vertical"
+    android:gravity="center" >
 
     <TextView
-        style="@style/BlackCaptionDefault"
+        style="@style/BlackCaption"
         android:id="@+id/explore_sites_title"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center_vertical"
+        android:gravity="center"
         android:text="@string/ntp_explore_sites_title" />
 
     <LinearLayout
@@ -24,10 +26,12 @@
         android:orientation="horizontal" />
 
     <Button
+        style="@style/SuggestionCardAction"
         android:id="@+id/explore_sites_more_button"
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_margin="12dp"
+        android:gravity="center"
+        android:layout_margin="@dimen/explore_sites_margin"
         android:text="@string/ntp_explore_sites_more" />
 
 </LinearLayout>

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

@@ -346,6 +346,9 @@
     <dimen name="ntp_search_box_transition_length">16dp</dimen>
     <dimen name="ntp_search_box_logo_padding">8dp</dimen>
     <dimen name="ntp_search_box_voice_search_margin_end_modern">6dp</dimen>
+    <dimen name="explore_sites_radius">8dp</dimen>
+    <dimen name="explore_sites_padding">6dp</dimen>
+    <dimen name="explore_sites_margin">12dp</dimen>
     <!-- Negative vertical inset added to the search box bounds when modern is enabled. 4dp is added
          to both the top and bottom bounds to bring the 48dp modern_toolbar_background_size to 56dp
          (matches toolbar_height_no_shadow). -->

chrome/android/java/src/org/chromium/chrome/browser/explore_sites/ExploreSitesCategoryTileView.java

@@ -5,28 +5,41 @@
 package org.chromium.chrome.browser.explore_sites;
 
 import android.content.Context;
+import android.content.res.Resources;
+import android.graphics.Bitmap;
+import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
 import android.util.AttributeSet;
-import android.widget.FrameLayout;
 import android.widget.ImageView;
+import android.widget.LinearLayout;
 import android.widget.TextView;
 
+import org.chromium.base.ApiCompatibilityUtils;
 import org.chromium.chrome.R;
+import org.chromium.chrome.browser.util.ViewUtils;
+import org.chromium.chrome.browser.widget.RoundedIconGenerator;
 
 /**
  * The View representing a single explore sites category.
  * Consists of a large image icon over descriptive text.
  */
-public class ExploreSitesCategoryTileView extends FrameLayout {
+public class ExploreSitesCategoryTileView extends LinearLayout {
     /** The data represented by this tile. */
     private ExploreSitesCategoryTile mCategoryData;
 
+    private Resources mResources;
+    private RoundedIconGenerator mIconGenerator;
+
     private TextView mTitleView;
     private ImageView mIconView;
 
+    private int mIconWidthPx;
+    private int mIconHeightPx;
+
     /** Constructor for inflating from XML. */
     public ExploreSitesCategoryTileView(Context context, AttributeSet attrs) {
         super(context, attrs);
+        mResources = context.getResources();
     }
 
     @Override
@@ -36,12 +49,29 @@ public class ExploreSitesCategoryTileView extends FrameLayout {
         mIconView = findViewById(R.id.explore_sites_category_tile_icon);
     }
 
-    public void initialize(ExploreSitesCategoryTile category) {
+    public void initialize(ExploreSitesCategoryTile category, int widthPx, int heightPx) {
         mCategoryData = category;
+        mIconWidthPx = widthPx;
+        mIconHeightPx = heightPx;
+        mIconGenerator = new RoundedIconGenerator(widthPx, heightPx,
+                mResources.getDimensionPixelSize(R.dimen.explore_sites_radius),
+                ApiCompatibilityUtils.getColor(
+                        mResources, R.color.default_favicon_background_color),
+                mResources.getDimensionPixelSize(R.dimen.headline_size_medium));
+        updateIcon(null);
         mTitleView.setText(mCategoryData.getCategoryName());
     }
 
-    public void updateIcon(Drawable drawable) {
+    public void updateIcon(Bitmap bitmap) {
+        Drawable drawable;
+        if (bitmap == null) {
+            drawable = new BitmapDrawable(mResources,
+                    mIconGenerator.generateIconForText(mCategoryData.getCategoryName()));
+        } else {
+            drawable = ViewUtils.createRoundedBitmapDrawable(
+                    Bitmap.createScaledBitmap(bitmap, mIconWidthPx, mIconHeightPx, false),
+                    mResources.getDimensionPixelSize(R.dimen.explore_sites_radius));
+        }
         mCategoryData.setIconDrawable(drawable);
         mIconView.setImageDrawable(drawable);
     }

chrome/android/java/src/org/chromium/chrome/browser/explore_sites/ExploreSitesSection.java

@@ -12,25 +12,22 @@ import android.widget.LinearLayout;
 import org.chromium.chrome.R;
 import org.chromium.chrome.browser.profiles.Profile;
 import org.chromium.chrome.browser.suggestions.SuggestionsNavigationDelegate;
-import org.chromium.chrome.browser.util.ViewUtils;
 import org.chromium.ui.mojom.WindowOpenDisposition;
 
 import java.util.List;
-import java.util.concurrent.atomic.AtomicInteger;
 
 /**
  * Describes a portion of UI responsible for rendering a group of categories.
  * It abstracts general tasks related to initializing and fetching data for the UI.
  */
 public class ExploreSitesSection {
-    private static final int ICON_CORNER_RADIUS = 5;
+    private static final int MAX_TILES = 3;
 
     private Profile mProfile;
     private SuggestionsNavigationDelegate mNavigationDelegate;
     private View mExploreSection;
     private LinearLayout mCategorySection;
 
-    private AtomicInteger mCategoryIconFetchesInFlight;
     public ExploreSitesSection(
             View view, Profile profile, SuggestionsNavigationDelegate navigationDelegate) {
         mProfile = profile;
@@ -42,19 +39,37 @@ public class ExploreSitesSection {
     private void initialize() {
         mCategorySection = mExploreSection.findViewById(R.id.explore_sites_tiles);
         ExploreSitesBridge.getNtpCategories(mProfile, this::initializeTiles);
+
+        View moreCategoriesButton = mExploreSection.findViewById(R.id.explore_sites_more_button);
+        moreCategoriesButton.setOnClickListener(
+                (View v)
+                        -> mNavigationDelegate.navigateToSuggestionUrl(
+                                WindowOpenDisposition.CURRENT_TAB,
+                                ExploreSitesBridge.nativeGetCatalogUrl()));
     }
 
     private void initializeTiles(List<ExploreSitesCategoryTile> tileList) {
-        if (tileList.isEmpty()) {
-            return;
-        }
-        mCategoryIconFetchesInFlight = new AtomicInteger(tileList.size());
+        if (tileList == null) return;
+
+        int parentWidth = mExploreSection.getWidth();
+        int tileWidth = (parentWidth
+                                - (mExploreSection.getResources().getDimensionPixelSize(
+                                           R.dimen.explore_sites_padding)
+                                          * 2))
+                / MAX_TILES;
+        int tileHeight = tileWidth / 3 * 2;
+
+        int tileCount = 0;
         for (final ExploreSitesCategoryTile tile : tileList) {
+            // Ensures only 3 tiles are shown.
+            tileCount++;
+            if (tileCount > MAX_TILES) break;
+
             final ExploreSitesCategoryTileView tileView =
                     (ExploreSitesCategoryTileView) LayoutInflater.from(mExploreSection.getContext())
                             .inflate(R.layout.explore_sites_category_tile_view, mCategorySection,
                                     false);
-            tileView.initialize(tile);
+            tileView.initialize(tile, tileWidth, tileHeight);
             mCategorySection.addView(tileView);
             tileView.setOnClickListener(
                     (View v)
@@ -66,7 +81,6 @@ public class ExploreSitesSection {
     }
 
     private void onIconRetrieved(ExploreSitesCategoryTileView tileView, Bitmap icon) {
-        tileView.updateIcon(ViewUtils.createRoundedBitmapDrawable(icon, ICON_CORNER_RADIUS));
-        mCategoryIconFetchesInFlight.decrementAndGet();
+        tileView.updateIcon(icon);
     }
 }