Adjust custom theme flow's preview layout
- Adjust the layout to fit the spec, go/custom-r-guidelines slide#159 &
160
video: https://drive.google.com/file/d/1FSx9BQo_JJPhxX6CdKPdpzai8U9LUIEo/view?usp=sharing
Bug: 160939676
Test: manually
Change-Id: Iaaf8848f869b9e54e574283762ebb97276483c18
diff --git a/res/layout/fragment_custom_theme_component.xml b/res/layout/fragment_custom_theme_component.xml
index 26feab8..039f781 100644
--- a/res/layout/fragment_custom_theme_component.xml
+++ b/res/layout/fragment_custom_theme_component.xml
@@ -45,10 +45,7 @@
android:id="@+id/component_preview_content"
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_height="match_parent"/>
</FrameLayout>
<View
diff --git a/res/layout/preview_card_color_content.xml b/res/layout/preview_card_color_content.xml
index 1de2cd4..9ab90c1 100644
--- a/res/layout/preview_card_color_content.xml
+++ b/res/layout/preview_card_color_content.xml
@@ -22,9 +22,8 @@
android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
- android:layout_width="match_parent"
+ android:layout_width="@dimen/preview_theme_color_component_size"
android:layout_height="wrap_content"
- android:layout_weight="0"
android:gravity="center|bottom"
android:orientation="horizontal">
<FrameLayout
@@ -89,7 +88,7 @@
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
- android:layout_width="match_parent"
+ android:layout_width="@dimen/preview_theme_color_component_size"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal"
@@ -109,9 +108,8 @@
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
- android:layout_width="match_parent"
+ android:layout_width="@dimen/preview_theme_color_component_size"
android:layout_height="wrap_content"
- android:layout_weight="0"
android:gravity="center"
android:orientation="horizontal">
<FrameLayout
@@ -159,8 +157,4 @@
android:enabled="false"/>
</FrameLayout>
</LinearLayout>
- <Space
- android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_weight="1" />
</LinearLayout>
diff --git a/res/layout/preview_card_font_content.xml b/res/layout/preview_card_font_content.xml
index fb7879e..408778e 100644
--- a/res/layout/preview_card_font_content.xml
+++ b/res/layout/preview_card_font_content.xml
@@ -20,15 +20,13 @@
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
- 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="16sp"
- android:layout_weight="1.5"
+ android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:maxLines="1"
@@ -36,10 +34,10 @@
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
- android:layout_weight="0"/>
+ android:layout_weight="1"/>
<View
android:id="@+id/font_card_divider"
- android:layout_width="15dp"
+ android:layout_width="16dp"
android:layout_height="2dp"
android:layout_gravity="center"
android:background="?android:colorAccent"/>
@@ -50,8 +48,7 @@
<TextView
style="@style/FontCardBodyTextStyle"
android:id="@+id/font_card_body"
- android:layout_height="56sp"
- android:layout_weight="2"
+ android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:gravity="center_horizontal"
android:text="@string/font_card_body"/>
diff --git a/res/layout/preview_card_icon_content.xml b/res/layout/preview_card_icon_content.xml
index ce40c48..29620c8 100644
--- a/res/layout/preview_card_icon_content.xml
+++ b/res/layout/preview_card_icon_content.xml
@@ -22,7 +22,7 @@
android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
- android:layout_width="match_parent"
+ android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal">
@@ -33,7 +33,7 @@
android:layout_weight="1"
android:tint="@color/theme_preview_icon_color"/>
<Space
- android:layout_width="0dp"
+ android:layout_width="@dimen/preview_theme_icon_size"
android:layout_height="match_parent"
android:layout_weight="0" />
<ImageView
@@ -43,7 +43,7 @@
android:layout_weight="1"
android:tint="@color/theme_preview_icon_color"/>
<Space
- android:layout_width="0dp"
+ android:layout_width="@dimen/preview_theme_icon_size"
android:layout_height="match_parent"
android:layout_weight="0" />
<ImageView
@@ -55,10 +55,9 @@
</LinearLayout>
<Space
android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_weight="1" />
+ android:layout_height="68dp" />
<LinearLayout
- android:layout_width="match_parent"
+ android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom|center_horizontal"
android:orientation="horizontal">
@@ -69,7 +68,7 @@
android:layout_weight="1"
android:tint="@color/theme_preview_icon_color"/>
<Space
- android:layout_width="0dp"
+ android:layout_width="@dimen/preview_theme_icon_size"
android:layout_height="match_parent"
android:layout_weight="0" />
<ImageView
@@ -79,7 +78,7 @@
android:layout_weight="1"
android:tint="@color/theme_preview_icon_color"/>
<Space
- android:layout_width="0dp"
+ android:layout_width="@dimen/preview_theme_icon_size"
android:layout_height="match_parent"
android:layout_weight="0" />
<ImageView
@@ -89,8 +88,4 @@
android:layout_weight="1"
android:tint="@color/theme_preview_icon_color"/>
</LinearLayout>
- <Space
- android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_weight="1" />
</LinearLayout>
\ No newline at end of file
diff --git a/res/layout/preview_card_shape_content.xml b/res/layout/preview_card_shape_content.xml
index 67d3526..0afa6bc 100644
--- a/res/layout/preview_card_shape_content.xml
+++ b/res/layout/preview_card_shape_content.xml
@@ -22,7 +22,7 @@
android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
- android:layout_width="match_parent"
+ android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal">
@@ -39,7 +39,7 @@
android:elevation="4dp"/>
</FrameLayout>
<Space
- android:layout_width="0dp"
+ android:layout_width="@dimen/preview_theme_shape_size"
android:layout_height="match_parent"
android:layout_weight="0" />
<FrameLayout
@@ -55,7 +55,7 @@
android:elevation="4dp"/>
</FrameLayout>
<Space
- android:layout_width="0dp"
+ android:layout_width="@dimen/preview_theme_shape_size"
android:layout_height="match_parent"
android:layout_weight="0" />
<FrameLayout
@@ -73,10 +73,9 @@
</LinearLayout>
<Space
android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_weight="1" />
+ android:layout_height="60dp" />
<LinearLayout
- android:layout_width="match_parent"
+ android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom|center_horizontal"
android:orientation="horizontal">
@@ -93,7 +92,7 @@
android:elevation="4dp"/>
</FrameLayout>
<Space
- android:layout_width="0dp"
+ android:layout_width="@dimen/preview_theme_shape_size"
android:layout_height="match_parent"
android:layout_weight="0" />
<FrameLayout
@@ -109,7 +108,7 @@
android:elevation="4dp"/>
</FrameLayout>
<Space
- android:layout_width="0dp"
+ android:layout_width="@dimen/preview_theme_shape_size"
android:layout_height="match_parent"
android:layout_weight="0" />
<FrameLayout
@@ -125,8 +124,4 @@
android:elevation="4dp"/>
</FrameLayout>
</LinearLayout>
- <Space
- android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_weight="1" />
</LinearLayout>
\ No newline at end of file
diff --git a/res/layout/theme_component_preview.xml b/res/layout/theme_component_preview.xml
index bf3255d..67abe6b 100644
--- a/res/layout/theme_component_preview.xml
+++ b/res/layout/theme_component_preview.xml
@@ -14,8 +14,6 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-
-
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
@@ -26,20 +24,7 @@
android:clipToPadding="false"
android:maxHeight="@dimen/preview_theme_max_height"
android:minHeight="@dimen/preview_theme_min_height"
- android:paddingHorizontal="@dimen/preview_card_padding"
- android:paddingTop="@dimen/preview_card_top_padding">
-
- <ViewStub
- android:id="@+id/theme_preview_top_bar"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout="@layout/theme_preview_topbar"
- app:layout_constraintBottom_toTopOf="@+id/theme_preview_card_header"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintHorizontal_bias="0.5"
- app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toTopOf="parent"
- app:layout_constraintVertical_chainStyle="spread_inside"/>
+ android:paddingTop="64dp">
<TextView
android:id="@+id/theme_preview_card_header"
@@ -53,8 +38,7 @@
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toBottomOf="@+id/theme_preview_top_bar"
- app:layout_goneMarginTop="@dimen/card_header_top_margin"
+ app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside"
tools:text="Default"/>
@@ -62,43 +46,13 @@
android:id="@+id/theme_preview_card_body_container"
android:layout_width="match_parent"
android:layout_height="0dp"
- android:layout_marginHorizontal="8dp"
android:layout_marginTop="@dimen/preview_theme_content_margin"
android:clipChildren="false"
android:importantForAccessibility="noHideDescendants"
- app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_max="@dimen/preview_theme_content_max_height"
app:layout_constraintHeight_min="@dimen/preview_theme_content_min_height"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/theme_preview_card_header"/>
-
- <androidx.constraintlayout.widget.Guideline
- android:id="@+id/guideline"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:orientation="horizontal"
- app:layout_constraintBottom_toTopOf="@+id/edit_label"
- app:layout_constraintGuide_end="@dimen/preview_theme_content_bottom"
- app:layout_constraintTop_toBottomOf="@+id/theme_preview_card_body_container"/>
-
- <TextView
- android:id="@+id/edit_label"
- style="@style/EditLabelStyle"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:minHeight="@dimen/min_taptarget_height"
- android:drawableStart="@drawable/ic_tune"
- android:drawablePadding="8dp"
- android:gravity="center"
- android:text="@string/edit_custom_theme_lbl"
- android:visibility="invisible"
- app:layout_constraintBottom_toBottomOf="parent"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintHorizontal_bias="0.5"
- app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toBottomOf="@+id/guideline"
- app:layout_constraintVertical_bias="0.5"/>
-
</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/res/values-h740dp/dimens.xml b/res/values-h740dp/dimens.xml
index 250262f..3f2eb93 100644
--- a/res/values-h740dp/dimens.xml
+++ b/res/values-h740dp/dimens.xml
@@ -16,15 +16,14 @@
limitations under the License.
-->
<resources>
- <dimen name="preview_theme_content_margin">12dp</dimen>
+ <dimen name="preview_theme_content_margin">76dp</dimen>
- <dimen name="preview_theme_icon_size">40dp</dimen>
- <dimen name="preview_theme_tile_size">20dp</dimen>
- <dimen name="preview_theme_shape_size">52dp</dimen>
+ <dimen name="preview_theme_color_component_size">272dp</dimen>
+ <dimen name="preview_theme_icon_size">48dp</dimen>
+ <dimen name="preview_theme_tile_size">24dp</dimen>
+ <dimen name="preview_theme_shape_size">48dp</dimen>
<dimen name="preview_theme_content_min_height">152dp</dimen>
<dimen name="theme_preview_header_drawable_padding">12dp</dimen>
-
- <dimen name="card_header_top_margin">16dp</dimen>
</resources>
\ No newline at end of file
diff --git a/res/values-land/dimens.xml b/res/values-land/dimens.xml
index 134bfa7..26c67ea 100644
--- a/res/values-land/dimens.xml
+++ b/res/values-land/dimens.xml
@@ -19,7 +19,6 @@
<dimen name="card_title_text_size">12sp</dimen>
<dimen name="card_cover_title_text_size">14sp</dimen>
<dimen name="card_header_icon_size">24dp</dimen>
- <dimen name="card_header_top_margin">6dp</dimen>
<dimen name="preview_card_top_padding">6dp</dimen>
<dimen name="preview_theme_content_margin">8dp</dimen>
<dimen name="preview_theme_content_max_height">140dp</dimen>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 280c187..53b4e39 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -56,13 +56,13 @@
<dimen name="card_title_text_size">16sp</dimen>
<dimen name="card_cover_title_text_size">24sp</dimen>
<dimen name="card_header_icon_size">32dp</dimen>
- <dimen name="card_header_top_margin">0dp</dimen>
<dimen name="preview_theme_max_height">400dp</dimen>
<dimen name="preview_theme_min_height">180dp</dimen>
<dimen name="theme_preview_header_drawable_padding">8dp</dimen>
- <dimen name="preview_theme_content_margin">18dp</dimen>
- <dimen name="preview_theme_content_max_height">192dp</dimen>
+ <dimen name="preview_theme_content_margin">38dp</dimen>
+ <dimen name="preview_theme_content_max_height">200dp</dimen>
<dimen name="preview_theme_content_min_height">120dp</dimen>
+ <dimen name="preview_theme_color_component_size">170dp</dimen>
<dimen name="preview_theme_icon_size">30dp</dimen>
<dimen name="preview_theme_tile_size">16dp</dimen>
<dimen name="preview_theme_shape_size">36dp</dimen>
@@ -92,7 +92,7 @@
<dimen name="preview_content_padding_top">@dimen/preview_page_top_margin</dimen>
<dimen name="preview_content_padding_bottom">@dimen/indicator_container_height</dimen>
- <dimen name="font_preview_body_width">200dp</dimen>
+ <dimen name="font_preview_body_width">220dp</dimen>
<dimen name="font_preview_divider_gap">24dp</dimen>
<dimen name="custom_theme_nav_height">56dp</dimen>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index b4e1971..af7afb6 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -81,12 +81,14 @@
<style name="FontCardTitleStyle" parent="TitleTextAppearance">
<item name="android:textAlignment">center</item>
+ <item name="android:textSize">28dp</item>
</style>
<style name="FontCardBodyTextStyle">
<item name="android:layout_width">wrap_content</item>
<item name="android:maxWidth">@dimen/font_preview_body_width</item>
<item name="android:textAlignment">center</item>
+ <item name="android:textSize">20dp</item>
<item name="android:textAppearance">@android:style/TextAppearance.DeviceDefault</item>
</style>