Change the layout of TP pages and previews

Change the position of the "Keep my wallpaper" checkbox and
make the bottom panel larger, as well as restrict how much
a preview card can grow or shrink depending on the screen
size.

Note that the UX spec cannot be met 100% on all screen
sizes, so for some cases we round to the closest
approximation.

(ConstraintLayout FTW!)

Fixes: 130763357
Fixes: 130398264
Change-Id: I15bece84fb4ce1018676f57d32e0fc533bcdec92
diff --git a/res/layout/fragment_clock_picker.xml b/res/layout/fragment_clock_picker.xml
index da4f891..630d37a 100644
--- a/res/layout/fragment_clock_picker.xml
+++ b/res/layout/fragment_clock_picker.xml
@@ -23,40 +23,60 @@
     android:background="?android:colorPrimary">
     <include layout="@layout/section_header"/>
 
-    <com.android.customization.widget.PreviewPager
-        android:id="@+id/clock_preview_pager"
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_weight="1"
-        android:background="@color/secondary_color"
-        app:card_style="screen_aspect_ratio"/>
+        android:layout_height="match_parent">
 
-    <LinearLayout
-        android:id="@+id/options_section"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:paddingVertical="10dp"
-        android:orientation="vertical">
+        <com.android.customization.widget.PreviewPager
+            android:id="@+id/clock_preview_pager"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="10dp"
+            android:background="@color/secondary_color"
+            app:layout_constrainedHeight="true"
+            app:layout_constraintBottom_toTopOf="@id/options_container"
+            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_constraintVertical_bias="0.0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintVertical_chainStyle="spread_inside"/>
 
         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/options_container"
             android:layout_width="match_parent"
             android:layout_height="@dimen/options_container_height"
-            android:layout_gravity="center_horizontal"/>
+            android:layout_gravity="center_horizontal"
+            android:layout_marginTop="10dp"
+            app:layout_constraintBottom_toTopOf="@id/placeholder"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/clock_preview_pager"
+            app:layout_constraintVertical_bias="1.0"/>
 
-        <RelativeLayout
+        <Space
+            android:id="@+id/placeholder"
             android:layout_width="match_parent"
+            android:layout_height="@dimen/min_taptarget_height"
+            app:layout_constraintBottom_toTopOf="@id/apply_button"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/options_container"
+            app:layout_constraintVertical_bias="1.0"/>
+
+        <Button
+            android:id="@+id/apply_button"
+            style="@style/ActionPrimaryButton"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:paddingHorizontal="10dp">
-            <Button
-                android:id="@+id/apply_button"
-                style="@style/ActionPrimaryButton"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_alignParentEnd="true"
-                android:text="@string/apply_btn"/>
-        </RelativeLayout>
+            android:layout_gravity="end"
+            android:layout_marginEnd="10dp"
+            android:layout_marginVertical="10dp"
+            android:layout_weight="1"
+            android:text="@string/apply_theme_btn"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/placeholder"/>
 
-    </LinearLayout>
-
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </LinearLayout>
diff --git a/res/layout/fragment_custom_theme_component.xml b/res/layout/fragment_custom_theme_component.xml
index e9dd927..13b0b33 100644
--- a/res/layout/fragment_custom_theme_component.xml
+++ b/res/layout/fragment_custom_theme_component.xml
@@ -16,54 +16,83 @@
 -->
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     android:background="?android:colorPrimary">
     <include layout="@layout/section_header"/>
 
-    <FrameLayout
-        android:id="@+id/component_preview_container"
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_weight="1"
-        android:background="?android:colorPrimary">
-        <include
-            android:id="@+id/component_preview_content"
+        android:layout_height="match_parent">
+
+        <FrameLayout
+            android:id="@+id/component_preview_container"
             android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_marginHorizontal="@dimen/preview_page_horizontal_margin"
-            android:layout_marginTop="@dimen/preview_page_top_margin"
-            android:layout_marginBottom="@dimen/component_preview_page_bottom_margin"
-            layout="@layout/theme_component_preview"/>
-    </FrameLayout>
-    <View
-        android:layout_width="match_parent"
-        android:layout_height="1dp"
-        android:background="@color/divider_color"/>
-    <LinearLayout
-        android:id="@+id/options_section"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:paddingVertical="10dp"
-        android:clipToPadding="false"
-        android:orientation="vertical">
+            android:layout_height="0dp"
+            android:background="?android:colorPrimary"
+            app:layout_constrainedHeight="true"
+            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"
+            app:layout_constraintVertical_bias="0.0">
+
+            <include
+                android:id="@+id/component_preview_content"
+                layout="@layout/theme_component_preview"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_marginHorizontal="@dimen/preview_page_horizontal_margin"
+                android:layout_marginTop="@dimen/preview_page_top_margin"
+                android:layout_marginBottom="@dimen/indicator_container_height"/>
+        </FrameLayout>
+        <View
+            android:id="@+id/divider"
+            android:layout_width="match_parent"
+            android:layout_height="1dp"
+            android:background="@color/divider_color"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/component_preview_container"/>
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guideline"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            app:layout_constraintGuide_percent=".7"/>
+
 
         <TextView
             android:id="@+id/component_options_title"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_gravity="center"
-            android:layout_margin="10dp"
+            android:layout_marginTop="10dp"
+            android:layout_marginStart="10dp"
+            android:layout_marginEnd="10dp"
+            android:layout_marginBottom="10dp"
             android:textAlignment="center"
-            android:textAppearance="@style/HeaderTextAppearance"/>
+            android:textAppearance="@style/HeaderTextAppearance"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/guideline"/>
 
         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/options_container"
             android:layout_width="match_parent"
             android:layout_height="@dimen/options_container_height"
-            android:layout_gravity="center_horizontal"/>
+            android:layout_gravity="center_horizontal"
+            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/component_options_title"
+            app:layout_constraintVertical_bias=".2"/>
 
-    </LinearLayout>
-
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </LinearLayout>
diff --git a/res/layout/fragment_custom_theme_name.xml b/res/layout/fragment_custom_theme_name.xml
index 98feb60..9ac0b21 100644
--- a/res/layout/fragment_custom_theme_name.xml
+++ b/res/layout/fragment_custom_theme_name.xml
@@ -16,59 +16,78 @@
 -->
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:orientation="vertical"
     android:background="?android:colorPrimary">
     <include layout="@layout/section_header"/>
 
-    <FrameLayout
-        android:id="@+id/component_preview_container"
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_weight="1"
-        android:background="@color/secondary_color">
-        <include
-            android:id="@+id/component_preview_content"
+        android:layout_height="match_parent">
+
+        <FrameLayout
+            android:id="@+id/component_preview_container"
             android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_marginHorizontal="@dimen/preview_page_horizontal_margin"
-            android:layout_marginTop="@dimen/preview_page_top_margin"
-            android:layout_marginBottom="@dimen/component_preview_page_bottom_margin"
-            layout="@layout/theme_preview_card"/>
-    </FrameLayout>
-    <LinearLayout
-        android:id="@+id/options_section"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:paddingVertical="10dp"
-        android:clipToPadding="false"
-        android:orientation="vertical">
+            android:layout_height="0dp"
+            android:background="@color/secondary_color"
+            app:layout_constrainedHeight="true"
+            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"
+            app:layout_constraintVertical_bias="0.0">
+
+            <include
+                android:id="@+id/component_preview_content"
+                layout="@layout/theme_preview_card"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_marginHorizontal="@dimen/preview_page_horizontal_margin"
+                android:layout_marginTop="@dimen/preview_page_top_margin"
+                android:layout_marginBottom="@dimen/indicator_container_height"/>
+        </FrameLayout>
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guideline"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            app:layout_constraintGuide_percent=".7"/>
 
         <TextView
             android:id="@+id/component_options_title"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_gravity="center"
-            android:layout_margin="10dp"
+            android:layout_marginTop="10dp"
+            android:layout_marginStart="10dp"
+            android:layout_marginEnd="10dp"
+            android:layout_marginBottom="10dp"
             android:textAlignment="center"
-            android:textAppearance="@style/HeaderTextAppearance"/>
+            android:textAppearance="@style/HeaderTextAppearance"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/guideline"/>
 
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="@dimen/options_container_height"
-            android:layout_gravity="center">
+        <EditText
+            android:id="@+id/custom_theme_name"
+            style="@style/CustomThemeNameEditText"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:importantForAutofill="no"
+            android:minWidth="300dp"
+            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/component_options_title"
+            app:layout_constraintVertical_bias=".2"/>
 
-            <EditText
-                style="@style/CustomThemeNameEditText"
-                android:id="@+id/custom_theme_name"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center"
-                android:minWidth="300dp"/>
-        </FrameLayout>
 
-    </LinearLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
 
 </LinearLayout>
diff --git a/res/layout/fragment_grid_picker.xml b/res/layout/fragment_grid_picker.xml
index d7618f3..d55b5c9 100644
--- a/res/layout/fragment_grid_picker.xml
+++ b/res/layout/fragment_grid_picker.xml
@@ -16,46 +16,68 @@
 -->
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
-    android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_height="match_parent"
     android:orientation="vertical"
     android:background="?android:colorPrimary">
     <include layout="@layout/section_header"/>
 
-    <com.android.customization.widget.PreviewPager
-        android:id="@+id/grid_preview_pager"
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_weight="1"
-        android:background="@color/secondary_color"
-        app:card_style="screen_aspect_ratio"/>
+        android:layout_height="match_parent">
 
-    <LinearLayout
-        android:id="@+id/options_section"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:paddingVertical="10dp"
-        android:orientation="vertical">
+        <com.android.customization.widget.PreviewPager
+            android:id="@+id/grid_preview_pager"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="10dp"
+            android:background="@color/secondary_color"
+            app:card_style="screen_aspect_ratio"
+            app:layout_constrainedHeight="true"
+            app:layout_constraintBottom_toTopOf="@id/options_container"
+            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_constraintVertical_bias="0.0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintVertical_chainStyle="spread_inside"/>
 
         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/options_container"
             android:layout_width="match_parent"
             android:layout_height="@dimen/options_container_height"
-            android:layout_gravity="center_horizontal"/>
+            android:layout_gravity="center_horizontal"
+            android:layout_marginTop="10dp"
+            app:layout_constraintBottom_toTopOf="@id/placeholder"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/grid_preview_pager"
+            app:layout_constraintVertical_bias="1.0"/>
 
-        <RelativeLayout
+        <Space
+            android:id="@+id/placeholder"
             android:layout_width="match_parent"
+            android:layout_height="@dimen/min_taptarget_height"
+            app:layout_constraintBottom_toTopOf="@id/apply_button"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/options_container"
+            app:layout_constraintVertical_bias="1.0"/>
+
+        <Button
+            android:id="@+id/apply_button"
+            style="@style/ActionPrimaryButton"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:paddingHorizontal="10dp">
-            <Button
-                android:id="@+id/apply_button"
-                style="@style/ActionPrimaryButton"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_alignParentEnd="true"
-                android:text="@string/apply_btn"/>
-        </RelativeLayout>
+            android:layout_gravity="end"
+            android:layout_marginEnd="10dp"
+            android:layout_marginVertical="10dp"
+            android:layout_weight="1"
+            android:text="@string/apply_theme_btn"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/placeholder"/>
 
-    </LinearLayout>
-
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </LinearLayout>
diff --git a/res/layout/fragment_theme_picker.xml b/res/layout/fragment_theme_picker.xml
index 2cfac1d..84c5516 100644
--- a/res/layout/fragment_theme_picker.xml
+++ b/res/layout/fragment_theme_picker.xml
@@ -16,56 +16,73 @@
 -->
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     android:background="?android:colorPrimary">
     <include layout="@layout/section_header"/>
 
-    <com.android.customization.widget.PreviewPager
-        android:id="@+id/theme_preview_pager"
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_weight="1"
-        android:background="@color/secondary_color"/>
+        android:layout_height="match_parent">
 
-    <LinearLayout
-        android:id="@+id/options_section"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:paddingVertical="10dp"
-        android:orientation="vertical">
+        <com.android.customization.widget.PreviewPager
+            android:id="@+id/theme_preview_pager"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/secondary_color"
+            app:layout_constrainedHeight="true"
+            app:layout_constraintBottom_toTopOf="@id/options_container"
+            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_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintVertical_bias="0.0"
+            app:layout_constraintVertical_chainStyle="spread_inside"/>
 
         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/options_container"
             android:layout_width="match_parent"
             android:layout_height="@dimen/options_container_height"
-            android:layout_gravity="center_horizontal"/>
+            android:layout_gravity="bottom|center_horizontal"
+            android:layout_marginTop="10dp"
+            android:layout_weight="1"
+            app:layout_constraintBottom_toTopOf="@id/use_my_wallpaper"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/theme_preview_pager"
+            app:layout_constraintVertical_bias="1.0"/>
 
-        <RelativeLayout
-            android:layout_width="match_parent"
+        <CheckBox
+            android:id="@+id/use_my_wallpaper"
+            android:layout_width="wrap_content"
+            android:layout_height="@dimen/min_taptarget_height"
+            android:layout_marginStart="10dp"
+            android:ellipsize="end"
+            android:gravity="start|center_vertical"
+            android:paddingLeft="4dp"
+            android:text="@string/keep_my_wallpaper"
+            app:layout_constraintBottom_toTopOf="@id/apply_button"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHeight_min="@dimen/min_taptarget_height"
+            app:layout_constraintHorizontal_bias="0.0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/options_container"
+            app:layout_constraintVertical_bias="1.0"/>
+
+        <Button
+            android:id="@+id/apply_button"
+            style="@style/ActionPrimaryButton"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:paddingHorizontal="10dp">
-            <CheckBox
-                android:id="@+id/use_my_wallpaper"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_alignParentStart="true"
-                android:layout_centerVertical="true"
-                android:layout_toStartOf="@+id/apply_button"
-                android:ellipsize="end"
-                android:paddingLeft="4dp"
-                android:minHeight="@dimen/min_taptarget_height"
-                android:text="@string/keep_my_wallpaper"/>
-            <Button
-                android:id="@+id/apply_button"
-                style="@style/ActionPrimaryButton"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_alignParentEnd="true"
-                android:text="@string/apply_theme_btn"/>
-        </RelativeLayout>
+            android:layout_gravity="end"
+            android:layout_marginEnd="10dp"
+            android:layout_marginBottom="10dp"
+            android:text="@string/apply_theme_btn"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"/>
 
-    </LinearLayout>
-
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </LinearLayout>
diff --git a/res/layout/theme_component_preview.xml b/res/layout/theme_component_preview.xml
index a087c0d..32d3f20 100644
--- a/res/layout/theme_component_preview.xml
+++ b/res/layout/theme_component_preview.xml
@@ -14,55 +14,47 @@
      See the License for the specific language governing permissions and
      limitations under the License.
 -->
-<FrameLayout
-    xmlns:app="http://schemas.android.com/apk/res-auto"
+
+
+<androidx.constraintlayout.widget.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/theme_preview_card_background"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/theme_preview_card_background"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:focusable="true" tools:showIn="@layout/theme_preview_card">
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:paddingHorizontal="@dimen/preview_card_padding"
-        android:paddingTop="@dimen/preview_card_padding"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toStartOf="parent">
+    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_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_constraintTop_toTopOf="parent"
+            app:layout_constraintVertical_chainStyle="spread_inside"/>
 
         <TextView
             android:id="@+id/theme_preview_card_header"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_horizontal"
-            android:layout_marginVertical="@dimen/card_header_top_margin"
-            android:drawablePadding="12dp"
+            android:drawablePadding="@dimen/theme_preview_header_drawable_padding"
             android:textAppearance="@style/CardTitleTextAppearance"
+            app:layout_constraintBottom_toTopOf="@id/theme_preview_card_body_container"
             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"/>
-
-        <Space
-            android:id="@+id/theme_preview_content_spacer"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintHeight_max="48dp"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/theme_preview_card_header"/>
+            app:layout_goneMarginTop="@dimen/card_header_top_margin"
+            app:layout_constraintVertical_chainStyle="spread_inside"
+            tools:text="Default"/>
 
         <FrameLayout
             android:id="@+id/theme_preview_card_body_container"
@@ -76,23 +68,23 @@
             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_content_spacer">
-
-        </FrameLayout>
+            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_constraintGuide_end="40dp"
-        />
+            app:layout_constraintBottom_toTopOf="@+id/edit_label"
+            app:layout_constraintGuide_end="@dimen/min_taptarget_height"
+            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"
@@ -102,8 +94,7 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.5"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/theme_preview_card_body_container"
+            app:layout_constraintTop_toBottomOf="@+id/guideline"
             app:layout_constraintVertical_bias="0.5"/>
 
-    </androidx.constraintlayout.widget.ConstraintLayout>
-</FrameLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/res/layout/theme_icon_option.xml b/res/layout/theme_icon_option.xml
index 4872ffc..62925ad 100644
--- a/res/layout/theme_icon_option.xml
+++ b/res/layout/theme_icon_option.xml
@@ -38,6 +38,7 @@
             android:id="@+id/option_icon"
             android:layout_width="@dimen/component_icon_thumb_size"
             android:layout_height="@dimen/component_icon_thumb_size"
-            android:layout_gravity="center"/>
+            android:layout_gravity="center"
+            android:tint="?android:colorForeground"/>
     </FrameLayout>
 </LinearLayout>
diff --git a/res/layout/theme_option.xml b/res/layout/theme_option.xml
index de81231..1cb9ffa 100644
--- a/res/layout/theme_option.xml
+++ b/res/layout/theme_option.xml
@@ -45,7 +45,8 @@
             android:layout_height="@dimen/theme_option_icon_sample_height"
             android:layout_alignParentTop="true"
             android:layout_alignParentLeft="true"
-            android:layout_margin="@dimen/theme_option_sample_padding"/>
+            android:layout_margin="@dimen/theme_option_sample_padding"
+            android:tint="?android:colorForeground"/>
         <ImageView
             android:id="@+id/theme_option_shape"
             android:layout_width="@dimen/theme_option_shape_sample_width"
diff --git a/res/layout/theme_preview_topbar.xml b/res/layout/theme_preview_topbar.xml
index 2422064..5642668 100644
--- a/res/layout/theme_preview_topbar.xml
+++ b/res/layout/theme_preview_topbar.xml
@@ -20,7 +20,8 @@
     android:id="@+id/theme_preview_top_bar"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    tools:visibility="visible" tools:showIn="@layout/theme_preview_card">
+    tools:visibility="visible"
+    tools:showIn="@layout/theme_preview_card">
     <TextView
         android:id="@+id/theme_preview_clock"
         android:layout_width="wrap_content"
diff --git a/res/values-h740dp/dimens.xml b/res/values-h740dp/dimens.xml
new file mode 100644
index 0000000..a752b6b
--- /dev/null
+++ b/res/values-h740dp/dimens.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+     Copyright (C) 2019 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<resources>
+    <dimen name="preview_theme_content_margin">12dp</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_cover_content_extra_margin">8dp</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/dimens.xml b/res/values/dimens.xml
index ed05ee5..0c7f502 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -65,15 +65,20 @@
 
     <dimen name="card_title_text_size">16sp</dimen>
     <dimen name="card_cover_title_text_size">24sp</dimen>
-    <dimen name="card_header_top_margin">16dp</dimen>
-    <dimen name="preview_theme_content_margin">40dp</dimen>
+    <dimen name="card_header_top_margin">0dp</dimen>
+    <dimen name="preview_pager_max_height">450dp</dimen>
+    <dimen name="preview_pager_min_height">350dp</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_min_height">152dp</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_cover_topbar_icon_size">20dp</dimen>
-    <dimen name="preview_theme_cover_content_extra_margin">8dp</dimen>
+    <dimen name="preview_theme_content_min_height">120dp</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>
+    <dimen name="preview_theme_cover_topbar_icon_size">16dp</dimen>
+    <dimen name="preview_theme_cover_content_extra_margin">16dp</dimen>
 
     <dimen name="font_preview_body_width">200dp</dimen>
     <dimen name="font_preview_divider_gap">30dp</dimen>