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
diff --git a/res/drawable/color_chip_hollow.xml b/res/drawable/color_chip_hollow.xml
index 76ab6b8..c0eab74 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 fb70972..8363683 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 f5df7ba..6ce8308 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 c935666..a884a44 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 525f757..6debc53 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 0e27c57..64834e0 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 314480f..fb9c36c 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 9ac0b21..6a3d1ba 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 2a27b01..fb7879e 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 72acd8b..12fe623 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 3b99dae..5c98fda 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 78131cc..1c0f76d 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 @@
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