ThemePicker UI polish fixes

- Change the size of theme preview item header to 32dp
- Update the layout of the font preview screen
- Color the separator in the font preview step for custom
themes the same color as the text
- Change the size of color selector chips
- Update the layout of the custom theme steps screens

Bug: 135943112
Change-Id: Ib9cbfe16db61d21d7245ab3f309491b2607bfb3b

12 files changed, 44 insertions, 26 deletions

diff --git a/res/drawable/color_chip_hollow.xml b/res/drawable/color_chip_hollow.xml
index 76ab6b86..c0eab74a 100644
--- a/res/drawable/color_chip_hollow.xml
+++ b/res/drawable/color_chip_hollow.xml
@@ -17,8 +17,8 @@
 -->
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="ring"
-        android:innerRadius="13dp"
-        android:thickness="8dp"
+        android:innerRadius="10dp"
+        android:thickness="6dp"
         android:useLevel="false">
     <solid android:color="@android:color/black"/>
 </shape>
diff --git a/res/drawable/ic_colorize_24px.xml b/res/drawable/ic_colorize_24px.xml
index fb70972b..8363683f 100644
--- a/res/drawable/ic_colorize_24px.xml
+++ b/res/drawable/ic_colorize_24px.xml
@@ -14,8 +14,8 @@
      limitations under the License.
 -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
+    android:width="32dp"
+    android:height="32dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
     <path
diff --git a/res/drawable/ic_font.xml b/res/drawable/ic_font.xml
index f5df7ba5..6ce8308a 100644
--- a/res/drawable/ic_font.xml
+++ b/res/drawable/ic_font.xml
@@ -14,8 +14,8 @@
      limitations under the License.
 -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
+    android:width="32dp"
+    android:height="32dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
     <!-- This path represents a square with rounded corners -->
diff --git a/res/drawable/ic_nav_wallpaper.xml b/res/drawable/ic_nav_wallpaper.xml
index c9356662..a884a44a 100644
--- a/res/drawable/ic_nav_wallpaper.xml
+++ b/res/drawable/ic_nav_wallpaper.xml
@@ -15,8 +15,8 @@
 -->
 <!-- Represents the wallpaper icon (a "landscape" shape in a box) -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
+    android:width="32dp"
+    android:height="32dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
     <path
diff --git a/res/drawable/ic_shapes_24px.xml b/res/drawable/ic_shapes_24px.xml
index 525f7572..6debc533 100644
--- a/res/drawable/ic_shapes_24px.xml
+++ b/res/drawable/ic_shapes_24px.xml
@@ -14,8 +14,8 @@
      limitations under the License.
 -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
+    android:width="32dp"
+    android:height="32dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
     <path
diff --git a/res/drawable/ic_wifi_24px.xml b/res/drawable/ic_wifi_24px.xml
index 0e27c576..64834e0b 100644
--- a/res/drawable/ic_wifi_24px.xml
+++ b/res/drawable/ic_wifi_24px.xml
@@ -14,8 +14,8 @@
      limitations under the License.
 -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
+    android:width="32dp"
+    android:height="32dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
     <path
diff --git a/res/layout/fragment_custom_theme_component.xml b/res/layout/fragment_custom_theme_component.xml
index 314480f1..fb9c36cb 100644
--- a/res/layout/fragment_custom_theme_component.xml
+++ b/res/layout/fragment_custom_theme_component.xml
@@ -36,7 +36,6 @@
             app:layout_constraintBottom_toTopOf="@+id/guideline"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHeight_max="@dimen/preview_pager_max_height"
-            app:layout_constraintHeight_min="@dimen/preview_pager_min_height"
             app:layout_constraintHorizontal_bias="0.5"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
@@ -47,9 +46,9 @@
                 layout="@layout/theme_component_preview"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
+                android:layout_gravity="center_vertical"
                 android:layout_marginHorizontal="@dimen/preview_page_horizontal_margin"
-                android:layout_marginTop="@dimen/preview_page_top_margin"
-                android:layout_marginBottom="@dimen/indicator_container_height"/>
+                android:layout_marginTop="@dimen/preview_page_top_margin"/>
         </FrameLayout>
         <View
             android:id="@+id/divider"
@@ -81,7 +80,9 @@
             android:textSize="@dimen/component_options_title_size"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/guideline"/>
+            app:layout_constraintTop_toBottomOf="@+id/component_preview_container"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintVertical_bias=".15"/>
 
         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/options_container"
@@ -93,7 +94,7 @@
             app:layout_constraintHorizontal_bias="0.5"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/component_options_title"
-            app:layout_constraintVertical_bias=".2"/>
+            app:layout_constraintVertical_bias=".25"/>
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </LinearLayout>
diff --git a/res/layout/fragment_custom_theme_name.xml b/res/layout/fragment_custom_theme_name.xml
index 9ac0b213..6a3d1bab 100644
--- a/res/layout/fragment_custom_theme_name.xml
+++ b/res/layout/fragment_custom_theme_name.xml
@@ -36,7 +36,6 @@
             app:layout_constraintBottom_toTopOf="@+id/guideline"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHeight_max="@dimen/preview_pager_max_height"
-            app:layout_constraintHeight_min="@dimen/preview_pager_min_height"
             app:layout_constraintHorizontal_bias="0.5"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
@@ -69,9 +68,12 @@
             android:layout_marginBottom="10dp"
             android:textAlignment="center"
             android:textAppearance="@style/HeaderTextAppearance"
+            android:textSize="@dimen/component_options_title_size"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/guideline"/>
+            app:layout_constraintTop_toBottomOf="@+id/component_preview_container"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintVertical_bias=".15"/>
 
         <EditText
             android:id="@+id/custom_theme_name"
@@ -85,7 +87,7 @@
             app:layout_constraintHorizontal_bias="0.5"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/component_options_title"
-            app:layout_constraintVertical_bias=".2"/>
+            app:layout_constraintVertical_bias=".25"/>
 
 
     </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/res/layout/preview_card_font_content.xml b/res/layout/preview_card_font_content.xml
index 2a27b013..fb7879e7 100644
--- a/res/layout/preview_card_font_content.xml
+++ b/res/layout/preview_card_font_content.xml
@@ -20,26 +20,39 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_gravity="center"
-    android:gravity="center_horizontal"
+    android:weightSum="7"
     android:orientation="vertical"
     tools:showIn="@layout/theme_preview_card">
     <TextView
         style="@style/FontCardTitleStyle"
         android:id="@+id/font_card_title"
         android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
+        android:layout_height="16sp"
+        android:layout_weight="1.5"
+        android:layout_gravity="center"
         android:gravity="center_horizontal"
+        android:maxLines="1"
         android:text="@string/font_card_title"/>
+    <Space
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="0"/>
     <View
         android:id="@+id/font_card_divider"
         android:layout_width="15dp"
         android:layout_height="2dp"
-        android:layout_marginVertical="@dimen/font_preview_divider_gap"
+        android:layout_gravity="center"
         android:background="?android:colorAccent"/>
+    <Space
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="1"/>
     <TextView
         style="@style/FontCardBodyTextStyle"
         android:id="@+id/font_card_body"
-        android:layout_height="wrap_content"
+        android:layout_height="56sp"
+        android:layout_weight="2"
+        android:layout_gravity="bottom|center_horizontal"
         android:gravity="center_horizontal"
         android:text="@string/font_card_body"/>
 </LinearLayout>
\ No newline at end of file
diff --git a/res/layout/theme_color_option.xml b/res/layout/theme_color_option.xml
index 72acd8be..12fe623f 100644
--- a/res/layout/theme_color_option.xml
+++ b/res/layout/theme_color_option.xml
@@ -18,7 +18,7 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_gravity="center"
-    android:padding="4dp">
+    android:padding="8dp">
 
     <ImageView
         android:id="@+id/option_tile"
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 3b99dae6..5c98fda2 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -94,7 +94,7 @@
 
     <dimen name="component_icon_thumb_size">40dp</dimen>
 
-    <dimen name="component_color_chip_size">42dp</dimen>
+    <dimen name="component_color_chip_size">32dp</dimen>
 
     <dimen name="component_shape_thumb_size">72dp</dimen>
     <dimen name="option_border_width">2dp</dimen>
diff --git a/src/com/android/customization/model/theme/custom/ThemeComponentOption.java b/src/com/android/customization/model/theme/custom/ThemeComponentOption.java
index 78131cc9..1c0f76de 100644
--- a/src/com/android/customization/model/theme/custom/ThemeComponentOption.java
+++ b/src/com/android/customization/model/theme/custom/ThemeComponentOption.java
@@ -146,6 +146,8 @@ public abstract class ThemeComponentOption implements CustomizationOption<ThemeC
             title.setTypeface(mHeadlineFont);
             TextView bodyText = container.findViewById(R.id.font_card_body);
             bodyText.setTypeface(mBodyFont);
+            container.findViewById(R.id.font_card_divider).setBackgroundColor(
+                    title.getCurrentTextColor());
         }
 
         @Override