Round the thumbnail corners at the edge of suggestion cards.

Bug: 739664 Change-Id: I158511a9d8ccd85561adc1f59d67ee7f9386d343 Reviewed-on: https://chromium-review.googlesource.com/568818 Reviewed-by: Bernhard Bauer <bauerb@chromium.org> Commit-Queue: Michael van Ouwerkerk <mvanouwerkerk@chromium.org> Cr-Commit-Position: refs/heads/master@{#486513}
marcosholgado · Jul 13, 2017 · f889f44 · f889f44
1 parent f68e45d
commit f889f44
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 4 deletions.
diff --git a/chrome/android/java/res/drawable/content_suggestions_card_corner_bottom.xml b/chrome/android/java/res/drawable/content_suggestions_card_corner_bottom.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2017 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. -->
+
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    tools:targetApi="21"
+    android:width="@dimen/content_suggestions_card_modern_corner_radius"
+    android:height="@dimen/content_suggestions_card_modern_corner_radius"
+    android:viewportWidth="10"
+    android:viewportHeight="10">
+    <path
+        android:fillColor="@color/suggestions_modern_bg"
+        android:pathData="M 0,0 A 10,10 0 0 0 10,10 L 0,10 Z" />
+</vector>
diff --git a/chrome/android/java/res/drawable/content_suggestions_card_corner_top.xml b/chrome/android/java/res/drawable/content_suggestions_card_corner_top.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2017 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. -->
+
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    tools:targetApi="21"
+    android:width="@dimen/content_suggestions_card_modern_corner_radius"
+    android:height="@dimen/content_suggestions_card_modern_corner_radius"
+    android:viewportWidth="10"
+    android:viewportHeight="10">
+    <path
+        android:fillColor="@color/suggestions_modern_bg"
+        android:pathData="M 0,10 A 10,10 0 0 1 10,0 L 0,0 Z" />
+</vector>
diff --git a/chrome/android/java/res/drawable/content_suggestions_card_modern_background.xml b/chrome/android/java/res/drawable/content_suggestions_card_modern_background.xml
@@ -7,5 +7,5 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle" >
     <solid android:color="@color/default_primary_color" />
-    <corners android:radius="10dp" />
+    <corners android:radius="@dimen/content_suggestions_card_modern_corner_radius" />
 </shape>
diff --git a/chrome/android/java/res/layout/content_suggestions_card_modern.xml b/chrome/android/java/res/layout/content_suggestions_card_modern.xml
@@ -37,6 +37,28 @@
         android:contentDescription="@null"
         app:srcCompat="@drawable/ic_play_circle_filled" />
 
+    <!-- It would have been nice to use RoundedBitmapDrawable on the thumbnail, but with that you
+         cannot select which corners must be rounded, they are all rounded. -->
+    <ImageView
+        android:id="@+id/corner_top"
+        android:layout_width="@dimen/content_suggestions_card_modern_corner_radius"
+        android:layout_height="@dimen/content_suggestions_card_modern_corner_radius"
+        android:layout_alignParentTop="true"
+        android:layout_alignParentStart="true"
+        android:contentDescription="@null"
+        android:scaleX="@integer/automirror_scale_x"
+        app:srcCompat="@drawable/content_suggestions_card_corner_top" />
+
+    <ImageView
+        android:id="@+id/corner_bottom"
+        android:layout_width="@dimen/content_suggestions_card_modern_corner_radius"
+        android:layout_height="@dimen/content_suggestions_card_modern_corner_radius"
+        android:layout_alignParentBottom="true"
+        android:layout_alignParentStart="true"
+        android:contentDescription="@null"
+        android:scaleX="@integer/automirror_scale_x"
+        app:srcCompat="@drawable/content_suggestions_card_corner_bottom" />
+
     <LinearLayout
         android:id="@+id/text_layout"
         android:layout_alignParentEnd="true"

diff --git a/chrome/android/java/res/values-ldrtl/values.xml b/chrome/android/java/res/values-ldrtl/values.xml
@@ -6,4 +6,7 @@
 <resources xmlns:android="http://schemas.android.com/apk/res/android">
     <!-- Menu Animation Constants -->
     <item type="fraction" format="fraction" name="menu_animation_pivot_x">5%</item>
+
+    <!-- Value for scaleX to mirror drawables correctly for LTR / RTL layouts. -->
+    <integer name="automirror_scale_x">-1</integer>
 </resources>
diff --git a/chrome/android/java/res/values/colors.xml b/chrome/android/java/res/values/colors.xml
@@ -129,6 +129,7 @@
     <color name="snippets_text_color">#646464</color>
     <color name="snippets_list_header_text_color">#646464</color>
     <color name="snippets_headline_text_color">#333333</color>
+    <color name="suggestions_modern_bg">@android:color/white</color>
 
     <!-- Incognito NTP Colors. -->
     <color name="incognito_text">#b3ffffff</color>

diff --git a/chrome/android/java/res/values/dimens.xml b/chrome/android/java/res/values/dimens.xml
@@ -337,6 +337,7 @@
     <dimen name="chrome_home_suggestions_footer_padding_top">24dp</dimen>
     <dimen name="chrome_home_suggestions_footer_padding_bottom">24dp</dimen>
     <dimen name="content_suggestions_card_modern_margin">16dp</dimen>
+    <dimen name="content_suggestions_card_modern_corner_radius">10dp</dimen>
 
     <!-- Recent tabs page -->
     <dimen name="recent_tabs_visible_separator_padding">8dp</dimen>

diff --git a/chrome/android/java/res/values/values.xml b/chrome/android/java/res/values/values.xml
@@ -67,4 +67,7 @@
          loaded. -->
     <bool name="is_tablet">false</bool>
     <bool name="is_large_tablet">false</bool>
+
+    <!-- Value for scaleX to mirror drawables correctly for LTR / RTL layouts. -->
+    <integer name="automirror_scale_x">1</integer>
 </resources>
diff --git a/chrome/android/java/src/org/chromium/chrome/browser/suggestions/SuggestionsConfig.java b/chrome/android/java/src/org/chromium/chrome/browser/suggestions/SuggestionsConfig.java
@@ -5,7 +5,6 @@
 package org.chromium.chrome.browser.suggestions;
 
 import android.content.res.Resources;
-import android.graphics.Color;
 
 import org.chromium.base.ApiCompatibilityUtils;
 import org.chromium.chrome.R;
@@ -29,7 +28,8 @@ public static boolean useModern() {
      * @return The background color for the suggestions sheet content.
      */
     public static int getBackgroundColor(Resources resources) {
-        return useModern() ? Color.WHITE
-                           : ApiCompatibilityUtils.getColor(resources, R.color.ntp_bg);
+        return useModern()
+                ? ApiCompatibilityUtils.getColor(resources, R.color.suggestions_modern_bg)
+                : ApiCompatibilityUtils.getColor(resources, R.color.ntp_bg);
     }
 }