Add extra preview pages for themes

Add preview pages for icons, color and shape to the theme section.

See go/theming-guidelines-theme for specs

Bug: 120559294

Change-Id: I9dabbbb33d670e7f02aebd66e3555e6785a17b7d
diff --git a/res/color/indicator_arrow_color.xml b/res/color/indicator_arrow_color.xml
new file mode 100644
index 0000000..4c73307
--- /dev/null
+++ b/res/color/indicator_arrow_color.xml
@@ -0,0 +1,24 @@
+<?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.
+-->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item
+        android:state_enabled="false"
+        android:color="@color/preview_pager_arrow_disabled" />
+    <item
+        android:state_enabled="true"
+        android:color="?android:attr/colorForeground" />
+</selector>
\ No newline at end of file
diff --git a/res/color/option_border_color.xml b/res/color/option_border_color.xml
index 1dd8d5f..b84891f 100644
--- a/res/color/option_border_color.xml
+++ b/res/color/option_border_color.xml
@@ -16,10 +16,10 @@
 -->
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item
-        android:state_selected="true"
+        android:state_activated="true"
         android:color="?android:colorAccent" />
     <item
-        android:state_selected="false"
+        android:state_activated="false"
         android:color="@color/material_grey500" />
     <item
         android:color="@color/material_grey500"/>
diff --git a/res/color/option_title_color.xml b/res/color/option_title_color.xml
index caa8dd9..febfd0c 100644
--- a/res/color/option_title_color.xml
+++ b/res/color/option_title_color.xml
@@ -16,10 +16,10 @@
 -->
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item
-        android:state_selected="true"
+        android:state_activated="true"
         android:color="?android:colorAccent" />
     <item
-        android:state_selected="false"
+        android:state_activated="false"
         android:color="?android:colorForeground" />
     <item
         android:color="?android:colorForeground"/>
diff --git a/res/drawable/ic_colorize_24px.xml b/res/drawable/ic_colorize_24px.xml
new file mode 100644
index 0000000..6c9f320
--- /dev/null
+++ b/res/drawable/ic_colorize_24px.xml
@@ -0,0 +1,24 @@
+<!--
+     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.
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M17.67,3c-0.26,0 -0.51,0.1 -0.71,0.29l-3.12,3.12L11.91,4.5L10.5,5.91l1.42,1.42L3,16.25V21h4.75l8.92,-8.92l1.42,1.42l1.41,-1.41l-1.92,-1.92l3.12,-3.12c0.4,-0.4 0.4,-1.03 0.01,-1.42l-2.34,-2.34C18.17,3.1 17.92,3 17.67,3L17.67,3zM6.92,19H5v-1.92l8.06,-8.06l1.92,1.92L6.92,19L6.92,19z"/>
+</vector>
diff --git a/res/drawable/ic_font.xml b/res/drawable/ic_font.xml
index 559d267..206b5b0 100644
--- a/res/drawable/ic_font.xml
+++ b/res/drawable/ic_font.xml
@@ -18,12 +18,12 @@
     android:height="36dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
-  <!-- This path represents a square with rounded corners -->
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M20,2H4C2.9,2 2,2.9 2,4v16c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2V4C22,2.9 21.1,2 20,2zM20,20H4V4h16V20z"/>
-  <!-- This path represents a letter "A" inside the square -->
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M10.69,6h2.6l4.51,12h-2.5l-1.01,-2.87H9.7L8.7,18H6.2L10.69,6zM13.56,13.06l-1.06,-3.02L12.07,8.6h-0.13l-0.44,1.44l-1.07,3.02H13.56z"/>
+    <!-- This path represents a square with rounded corners -->
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M20,2H4C2.9,2 2,2.9 2,4v16c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2V4C22,2.9 21.1,2 20,2zM20,20H4V4h16V20z"/>
+    <!-- This path represents a letter "A" inside the square -->
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M10.69,6h2.6l4.51,12h-2.5l-1.01,-2.87H9.7L8.7,18H6.2L10.69,6zM13.56,13.06l-1.06,-3.02L12.07,8.6h-0.13l-0.44,1.44l-1.07,3.02H13.56z"/>
 </vector>
diff --git a/res/drawable/ic_nav_clock.xml b/res/drawable/ic_nav_clock.xml
index 4fa1d05..73a91d5 100644
--- a/res/drawable/ic_nav_clock.xml
+++ b/res/drawable/ic_nav_clock.xml
@@ -19,12 +19,12 @@
     android:height="24dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
-  <!-- This path corresponds to the outside circle -->
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M11.99,2C6.47,2 2,6.48 2,12c0,5.52 4.47,10 9.99,10C17.52,22 22,17.52 22,12C22,6.48 17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8c0,-4.42 3.58,-8 8,-8s8,3.58 8,8C20,16.42 16.42,20 12,20z"/>
-  <!-- This draws two lines at an angle representing the clock hands -->
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M16.49,16.36l-5.49,-3.29l0,-6.65l2,0l0,5.51l4.51,2.71z"/>
+    <!-- This path corresponds to the outside circle -->
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M11.99,2C6.47,2 2,6.48 2,12c0,5.52 4.47,10 9.99,10C17.52,22 22,17.52 22,12C22,6.48 17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8c0,-4.42 3.58,-8 8,-8s8,3.58 8,8C20,16.42 16.42,20 12,20z"/>
+    <!-- This draws two lines at an angle representing the clock hands -->
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M16.49,16.36l-5.49,-3.29l0,-6.65l2,0l0,5.51l4.51,2.71z"/>
 </vector>
diff --git a/res/drawable/ic_nav_grid.xml b/res/drawable/ic_nav_grid.xml
index fd946ed..51f255e 100644
--- a/res/drawable/ic_nav_grid.xml
+++ b/res/drawable/ic_nav_grid.xml
@@ -19,7 +19,7 @@
     android:height="24dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M22,7V5h-3V2h-2v3h-4V2h-2v3H7V2H5v3H2v2h3v4H2v2h3v4H2v2h3v3h2v-3h4v3h2v-3h4v3h2v-3h3v-2h-3v-4h3v-2h-3V7H22zM7,7h4v4H7V7zM7,17v-4h4v4H7zM17,17h-4v-4h4V17zM17,11h-4V7h4V11z"/>
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M22,7V5h-3V2h-2v3h-4V2h-2v3H7V2H5v3H2v2h3v4H2v2h3v4H2v2h3v3h2v-3h4v3h2v-3h4v3h2v-3h3v-2h-3v-4h3v-2h-3V7H22zM7,7h4v4H7V7zM7,17v-4h4v4H7zM17,17h-4v-4h4V17zM17,11h-4V7h4V11z"/>
 </vector>
diff --git a/res/drawable/ic_nav_wallpaper.xml b/res/drawable/ic_nav_wallpaper.xml
index b18a36f..1338ee3 100644
--- a/res/drawable/ic_nav_wallpaper.xml
+++ b/res/drawable/ic_nav_wallpaper.xml
@@ -19,7 +19,7 @@
     android:height="24dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M9,12.71l2.14,2.58l3,-3.87L18,16.57H6L9,12.71zM5,5h6V3H5C3.9,3 3,3.9 3,5v6h2V5zM19,19h-6v2h6c1.1,0 2,-0.9 2,-2v-6h-2V19zM5,19v-6H3v6c0,1.1 0.9,2 2,2h6v-2H5zM19,5v6h2V5c0,-1.1 -0.9,-2 -2,-2h-6v2H19zM16,9c0.55,0 1,-0.45 1,-1s-0.45,-1 -1,-1c-0.55,0 -1,0.45 -1,1S15.45,9 16,9z"/>
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M9,12.71l2.14,2.58l3,-3.87L18,16.57H6L9,12.71zM5,5h6V3H5C3.9,3 3,3.9 3,5v6h2V5zM19,19h-6v2h6c1.1,0 2,-0.9 2,-2v-6h-2V19zM5,19v-6H3v6c0,1.1 0.9,2 2,2h6v-2H5zM19,5v6h2V5c0,-1.1 -0.9,-2 -2,-2h-6v2H19zM16,9c0.55,0 1,-0.45 1,-1s-0.45,-1 -1,-1c-0.55,0 -1,0.45 -1,1S15.45,9 16,9z"/>
 </vector>
diff --git a/res/drawable/ic_shapes_24px.xml b/res/drawable/ic_shapes_24px.xml
new file mode 100644
index 0000000..d2838d2
--- /dev/null
+++ b/res/drawable/ic_shapes_24px.xml
@@ -0,0 +1,24 @@
+<!--
+     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.
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M22,11v9c0,1.1 -0.9,2 -2,2H10c-1.1,0 -2,-0.9 -2,-2v-2.19h0.06c0.67,0 1.32,-0.08 1.94,-0.22V20h10v-9h-3.41c0.14,-0.63 0.22,-1.27 0.22,-1.94V9H20C21.1,9 22,9.9 22,11zM8.06,4C5.27,4 3,6.27 3,9.06s2.27,5.06 5.06,5.06s5.06,-2.27 5.06,-5.06C13.12,6.27 10.85,4 8.06,4M8.06,2c3.9,0 7.06,3.16 7.06,7.06s-3.16,7.06 -7.06,7.06S1,12.96 1,9.06S4.16,2 8.06,2z"/>
+</vector>
diff --git a/res/drawable/ic_wallpaper_24px.xml b/res/drawable/ic_wallpaper_24px.xml
new file mode 100644
index 0000000..737b309
--- /dev/null
+++ b/res/drawable/ic_wallpaper_24px.xml
@@ -0,0 +1,24 @@
+<!--
+     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.
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M9,12.71l2.14,2.58l3,-3.87L18,16.57H6L9,12.71zM5,5h6V3H5C3.9,3 3,3.9 3,5v6h2V5zM19,19h-6v2h6c1.1,0 2,-0.9 2,-2v-6h-2V19zM5,19v-6H3v6c0,1.1 0.9,2 2,2h6v-2H5zM19,5v6h2V5c0,-1.1 -0.9,-2 -2,-2h-6v2H19zM16,9c0.55,0 1,-0.45 1,-1s-0.45,-1 -1,-1c-0.55,0 -1,0.45 -1,1S15.45,9 16,9z"/>
+</vector>
diff --git a/res/drawable/ic_wifi_24px.xml b/res/drawable/ic_wifi_24px.xml
new file mode 100644
index 0000000..cf44585
--- /dev/null
+++ b/res/drawable/ic_wifi_24px.xml
@@ -0,0 +1,24 @@
+<!--
+     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.
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M1,9l2,2c4.97,-4.97 13.03,-4.97 18,0l2,-2C16.93,2.93 7.08,2.93 1,9zM9,17l3,3l3,-3C13.35,15.34 10.66,15.34 9,17zM5,13l2,2c2.76,-2.76 7.24,-2.76 10,0l2,-2C15.14,9.14 8.87,9.14 5,13z"/>
+</vector>
diff --git a/res/layout/preview_card_icon_content.xml b/res/layout/preview_card_icon_content.xml
new file mode 100644
index 0000000..260d212
--- /dev/null
+++ b/res/layout/preview_card_icon_content.xml
@@ -0,0 +1,71 @@
+<?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.
+-->
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="200dp"
+    android:layout_height="136dp"
+    android:layout_gravity="center"
+    android:gravity="center_horizontal"
+    android:orientation="vertical"
+    tools:showIn="@layout/theme_preview_card">
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_weight="1"
+        android:orientation="horizontal">
+        <ImageView
+            android:id="@+id/preview_icon_0"
+            android:layout_width="@dimen/preview_theme_icon_size"
+            android:layout_height="@dimen/preview_theme_icon_size"
+            android:tint="@color/theme_preview_icon_color"/>
+        <ImageView
+            android:id="@+id/preview_icon_1"
+            android:layout_width="@dimen/preview_theme_icon_size"
+            android:layout_height="@dimen/preview_theme_icon_size"
+            android:layout_marginHorizontal="40dp"
+            android:tint="@color/theme_preview_icon_color"/>
+        <ImageView
+            android:id="@+id/preview_icon_2"
+            android:layout_width="@dimen/preview_theme_icon_size"
+            android:layout_height="@dimen/preview_theme_icon_size"
+            android:tint="@color/theme_preview_icon_color"/>
+    </LinearLayout>
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_weight="1"
+        android:gravity="bottom"
+        android:orientation="horizontal">
+        <ImageView
+            android:id="@+id/preview_icon_3"
+            android:layout_width="@dimen/preview_theme_icon_size"
+            android:layout_height="@dimen/preview_theme_icon_size"
+            android:tint="@color/theme_preview_icon_color"/>
+        <ImageView
+            android:id="@+id/preview_icon_4"
+            android:layout_width="@dimen/preview_theme_icon_size"
+            android:layout_height="@dimen/preview_theme_icon_size"
+            android:layout_marginHorizontal="40dp"
+            android:tint="@color/theme_preview_icon_color"/>
+        <ImageView
+            android:id="@+id/preview_icon_5"
+            android:layout_width="@dimen/preview_theme_icon_size"
+            android:layout_height="@dimen/preview_theme_icon_size"
+            android:tint="@color/theme_preview_icon_color"/>
+    </LinearLayout>
+</LinearLayout>
\ No newline at end of file
diff --git a/res/layout/preview_card_static_content.xml b/res/layout/preview_card_static_content.xml
new file mode 100644
index 0000000..1e04444
--- /dev/null
+++ b/res/layout/preview_card_static_content.xml
@@ -0,0 +1,25 @@
+<?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.
+-->
+<ImageView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/preview_static_image"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_gravity="center"
+    android:scaleType="centerInside"
+    tools:showIn="@layout/theme_preview_card"/>
\ No newline at end of file
diff --git a/res/layout/preview_pager.xml b/res/layout/preview_pager.xml
index a165e56..cddf647 100644
--- a/res/layout/preview_pager.xml
+++ b/res/layout/preview_pager.xml
@@ -54,6 +54,7 @@
                 android:layout_height="@dimen/indicator_arrow_size"
                 android:layout_gravity="center"
                 android:contentDescription="@null"
+                android:tint="@color/indicator_arrow_color"
                 android:src="@drawable/ic_arrow_back_24px" />
         </FrameLayout>
 
@@ -72,6 +73,7 @@
                 android:layout_height="@dimen/indicator_arrow_size"
                 android:layout_gravity="center"
                 android:contentDescription="@null"
+                android:tint="@color/indicator_arrow_color"
                 android:src="@drawable/ic_arrow_forward_24px" />
         </FrameLayout>
     </FrameLayout>
diff --git a/res/layout/theme_preview_card.xml b/res/layout/theme_preview_card.xml
index 0f2e2ea..fcb9e1e 100644
--- a/res/layout/theme_preview_card.xml
+++ b/res/layout/theme_preview_card.xml
@@ -36,8 +36,7 @@
             android:id="@+id/theme_preview_card_body_container"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            android:layout_marginHorizontal="24dp">
-        </FrameLayout>
+            android:layout_marginHorizontal="8dp"/>
     </LinearLayout>
 
 </androidx.cardview.widget.CardView>
\ No newline at end of file
diff --git a/res/values/colors.xml b/res/values/colors.xml
index 4755c37..66ef501 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -16,6 +16,8 @@
      limitations under the License.
 -->
 <resources>
+    <color name="google_grey700">#5f6368</color>
+
     <color name="status_bar_color">#ffffffff</color>
 
     <color name="system_navigation_bar_background">@android:color/white</color>
@@ -25,4 +27,8 @@
     <color name="icon_thumbnail_color">@android:color/black</color>
 
     <color name="clockface_preview_background">@android:color/black</color>
-</resources>
\ No newline at end of file
+
+    <color name="theme_preview_icon_color">@color/google_grey700</color>
+
+    <color name="preview_pager_arrow_disabled">@android:color/darker_gray</color>
+</resources>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 9405314..1070deb 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -49,4 +49,11 @@
     <dimen name="preview_card_padding">24dp</dimen>
 
     <dimen name="card_title_text_size">16sp</dimen>
+    <dimen name="preview_theme_icon_size">40dp</dimen>
+
+    <dimen name="color_preview_image_width">182dp</dimen>
+    <dimen name="color_preview_image_height">194dp</dimen>
+
+    <dimen name="shape_preview_image_width">236dp</dimen>
+    <dimen name="shape_preview_image_height">153dp</dimen>
 </resources>
diff --git a/res/values/strings.xml b/res/values/strings.xml
index 7d94334..0a6ac98 100755
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -55,8 +55,21 @@
     <!-- Name for the Android Theme that comes preset with the device [CHAR LIMIT=10]-->
     <string name="default_theme_title">Default</string>
 
+    <!-- Title of a page that shows the user the preview of a font selection [CHAR_LIMIT=20] -->
     <string name="preview_name_font">Font</string>
 
+    <!-- Title of a page that shows the user the preview of a set of icons [CHAR_LIMIT=20] -->
+    <string name="preview_name_icon">Icon</string>
+
+    <!-- Title of a page that shows the user the preview of a color [CHAR_LIMIT=20] -->
+    <string name="preview_name_color">Color</string>
+
+    <!-- Title of a page that shows the user the preview of a set of icons' shape [CHAR_LIMIT=20] -->
+    <string name="preview_name_shape">Shape</string>
+
+    <!-- Title of a page that shows the user the preview of a wallpaper associated with a theme [CHAR_LIMIT=20] -->
+    <string name="preview_name_wallpaper">Wallpaper</string>
+
     <!-- Title text for previewing a font [CHAR LIMIT=30] -->
     <string name="font_card_title">Personalize your Device</string>
 
diff --git a/src/com/android/customization/model/ResourceConstants.java b/src/com/android/customization/model/ResourceConstants.java
index 3158e60..a13df5b 100644
--- a/src/com/android/customization/model/ResourceConstants.java
+++ b/src/com/android/customization/model/ResourceConstants.java
@@ -26,6 +26,11 @@
     String ANDROID_PACKAGE = "android";
 
     /**
+     * Package name for android sysui resources.
+     */
+    String SYSUI_PACKAGE = "com.android.systemui";
+
+    /**
      * Name of the system resource for icon mask
      */
     String CONFIG_ICON_MASK = "config_icon_mask";
diff --git a/src/com/android/customization/model/theme/DefaultThemeProvider.java b/src/com/android/customization/model/theme/DefaultThemeProvider.java
index 4330ec6..d909523 100644
--- a/src/com/android/customization/model/theme/DefaultThemeProvider.java
+++ b/src/com/android/customization/model/theme/DefaultThemeProvider.java
@@ -17,6 +17,7 @@
 
 import static com.android.customization.model.ResourceConstants.ANDROID_PACKAGE;
 import static com.android.customization.model.ResourceConstants.CONFIG_ICON_MASK;
+import static com.android.customization.model.ResourceConstants.SYSUI_PACKAGE;
 
 import android.content.Context;
 import android.content.pm.PackageManager.NameNotFoundException;
@@ -31,6 +32,9 @@
 import com.android.customization.model.ResourcesApkProvider;
 import com.android.customization.model.theme.ThemeBundle.Builder;
 import com.android.wallpaper.R;
+import com.android.wallpaper.asset.ResourceAsset;
+
+import com.bumptech.glide.request.RequestOptions;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -49,8 +53,10 @@
     private static final String SHAPE_PREFIX = "theme_overlay_shape_";
     private static final String ICON_ANDROID_PREFIX = "theme_overlay_icon_android_";
     private static final String ICON_SETTINGS_PREFIX = "theme_overlay_icon_settings_";
-    private static final String ICON_SYSTEM_PREFIX = "theme_overlay_icon_system_";
+    private static final String ICON_SYSUI_PREFIX = "theme_overlay_icon_sysui_";
     private static final String ICON_PREVIEW_DRAWABLE_NAME = "ic_wifi_signal_3";
+    private static final String PREVIEW_COLOR_PREFIX = "theme_preview_color_";
+    private static final String PREVIEW_SHAPE_PREFIX = "theme_preview_shape_";
 
     private static final String DEFAULT_THEME_NAME= "default";
 
@@ -58,6 +64,13 @@
     private static final String ACCENT_COLOR_DARK_NAME = "accent_device_default_dark";
     private static final String CONFIG_BODY_FONT_FAMILY = "config_bodyFontFamily";
     private static final String CONFIG_HEADLINE_FONT_FAMILY = "config_headlineFontFamily";
+    private static final String[] SYSUI_ICONS_FOR_PREVIEW = {
+            "ic_qs_bluetooth_on",
+            "ic_qs_dnd_on",
+            "ic_signal_flashlight",
+            "ic_qs_auto_rotate",
+            "ic_signal_airplane"
+    };
 
     private List<ThemeBundle> mThemes;
 
@@ -110,21 +123,26 @@
                             .setColorAccentLight(loadColor(ACCENT_COLOR_LIGHT_NAME,
                                     colorOverlayPackage))
                             .setColorAccentDark(loadColor(ACCENT_COLOR_DARK_NAME,
-                                    colorOverlayPackage));
+                                    colorOverlayPackage))
+                            .setColorPreview(getDrawableResourceAsset(
+                                    PREVIEW_COLOR_PREFIX, themeName));
                 }
 
                 String shapeOverlayPackage = getOverlayPackage(SHAPE_PREFIX, themeName);
 
                 if (!TextUtils.isEmpty(shapeOverlayPackage)) {
                     builder.setShapePackage(shapeOverlayPackage)
-                            .setShapePath(loadString(CONFIG_ICON_MASK, shapeOverlayPackage));
+                            .setShapePath(loadString(CONFIG_ICON_MASK, shapeOverlayPackage))
+                            .setShapePreview(getDrawableResourceAsset(
+                                    PREVIEW_SHAPE_PREFIX, themeName));
                 } else {
                     builder.setShapePath(mContext.getResources().getString(
                             Resources.getSystem().getIdentifier(CONFIG_ICON_MASK, "string",
                                     ANDROID_PACKAGE)));
                 }
 
-                String iconAndroidOverlayPackage = getOverlayPackage(ICON_ANDROID_PREFIX, themeName);
+                String iconAndroidOverlayPackage = getOverlayPackage(ICON_ANDROID_PREFIX,
+                        themeName);
 
                 if (!TextUtils.isEmpty(iconAndroidOverlayPackage)) {
                     builder.addIconPackage(iconAndroidOverlayPackage)
@@ -136,10 +154,13 @@
                                     "drawable", ANDROID_PACKAGE), null));
                 }
 
-                String iconSystemOverlayPackage = getOverlayPackage(ICON_SYSTEM_PREFIX, themeName);
+                String iconSysUiOverlayPackage = getOverlayPackage(ICON_SYSUI_PREFIX, themeName);
 
-                if (!TextUtils.isEmpty(iconSystemOverlayPackage)) {
-                    builder.addIconPackage(iconSystemOverlayPackage);
+                if (!TextUtils.isEmpty(iconSysUiOverlayPackage)) {
+                    builder.addIconPackage(iconSysUiOverlayPackage);
+                    for (String iconName : SYSUI_ICONS_FOR_PREVIEW) {
+                        builder.addIcon(loadIconPreviewDrawable(iconName, iconSysUiOverlayPackage));
+                    }
                 }
 
                 String iconSettingsOverlayPackage = getOverlayPackage(ICON_SETTINGS_PREFIX,
@@ -179,17 +200,21 @@
         try {
             builder.setColorPackage(colorOverlayPackage)
                     .setColorAccentLight(loadColor(ACCENT_COLOR_LIGHT_NAME, colorOverlayPackage))
-                    .setColorAccentDark(loadColor(ACCENT_COLOR_DARK_NAME, colorOverlayPackage));
+                    .setColorAccentDark(loadColor(ACCENT_COLOR_DARK_NAME, colorOverlayPackage))
+                    .setColorPreview(getDrawableResourceAsset(PREVIEW_COLOR_PREFIX,
+                            DEFAULT_THEME_NAME));
         } catch (NameNotFoundException | NotFoundException e) {
-            Log.i(TAG, "Didn't find color overlay for default theme, will use system default", e);
+            Log.d(TAG, "Didn't find color overlay for default theme, will use system default", e);
             int colorAccentLight = system.getColor(
                     system.getIdentifier(ACCENT_COLOR_LIGHT_NAME, "color", ANDROID_PACKAGE), null);
             builder.setColorAccentLight(colorAccentLight);
 
             int colorAccentDark = system.getColor(
                     system.getIdentifier(ACCENT_COLOR_DARK_NAME, "color", ANDROID_PACKAGE), null);
-            builder.setColorAccentDark(colorAccentDark);
-            builder.setColorPackage(null);
+            builder.setColorAccentDark(colorAccentDark)
+                    .setColorPackage(null)
+                    .setColorPreview(getDrawableResourceAsset(PREVIEW_COLOR_PREFIX,
+                            DEFAULT_THEME_NAME));
         }
 
         String fontOverlayPackage = getOverlayPackage(FONT_PREFIX, DEFAULT_THEME_NAME);
@@ -201,7 +226,7 @@
                     .setHeadlineFontFamily(loadTypeface(CONFIG_HEADLINE_FONT_FAMILY,
                             fontOverlayPackage));
         } catch (NameNotFoundException | NotFoundException e) {
-            Log.i(TAG, "Didn't find font overlay for default theme, will use system default", e);
+            Log.d(TAG, "Didn't find font overlay for default theme, will use system default", e);
             String headlineFontFamily = system.getString(system.getIdentifier(
                     CONFIG_HEADLINE_FONT_FAMILY,"string", ANDROID_PACKAGE));
             String bodyFontFamily = system.getString(system.getIdentifier(CONFIG_BODY_FONT_FAMILY,
@@ -213,12 +238,16 @@
 
         try {
             builder.setShapePackage(getOverlayPackage(SHAPE_PREFIX, DEFAULT_THEME_NAME))
-                    .setShapePath(loadString(ICON_PREVIEW_DRAWABLE_NAME, colorOverlayPackage));
+                    .setShapePath(loadString(ICON_PREVIEW_DRAWABLE_NAME, colorOverlayPackage))
+                    .setShapePreview(getDrawableResourceAsset(PREVIEW_SHAPE_PREFIX,
+                            DEFAULT_THEME_NAME));
         } catch (NameNotFoundException | NotFoundException e) {
-            Log.i(TAG, "Didn't find shape overlay for default theme, will use system default", e);
+            Log.d(TAG, "Didn't find shape overlay for default theme, will use system default", e);
             String iconMaskPath = system.getString(system.getIdentifier(CONFIG_ICON_MASK,
                     "string", ANDROID_PACKAGE));
-            builder.setShapePath(iconMaskPath);
+            builder.setShapePath(iconMaskPath)
+                    .setShapePreview(getDrawableResourceAsset(PREVIEW_SHAPE_PREFIX,
+                            DEFAULT_THEME_NAME));
         }
 
 
@@ -229,12 +258,33 @@
                     .addIcon(loadIconPreviewDrawable(ICON_ANDROID_PREFIX,
                             iconAndroidOverlayPackage));
         } catch (NameNotFoundException | NotFoundException e) {
-            Log.i(TAG, "Didn't find Android icons overlay for default theme, using system default",
+            Log.d(TAG, "Didn't find Android icons overlay for default theme, using system default",
                     e);
             builder.addIcon(system.getDrawable(system.getIdentifier(ICON_PREVIEW_DRAWABLE_NAME,
                             "drawable", ANDROID_PACKAGE), null));
         }
 
+        try {
+            String iconSysUiOverlayPackage = getOverlayPackage(ICON_SYSUI_PREFIX,
+                    DEFAULT_THEME_NAME);
+            if (!TextUtils.isEmpty(iconSysUiOverlayPackage)) {
+                builder.addIconPackage(iconSysUiOverlayPackage);
+                for (String iconName : SYSUI_ICONS_FOR_PREVIEW) {
+                    builder.addIcon(loadIconPreviewDrawable(iconName, iconSysUiOverlayPackage));
+                }
+            }
+        } catch (NameNotFoundException | NotFoundException e) {
+            Log.d(TAG, "Didn't find SystemUi icons overlay for default theme, using system default",
+                    e);
+            try {
+                for (String iconName : SYSUI_ICONS_FOR_PREVIEW) {
+                    builder.addIcon(loadIconPreviewDrawable(iconName, SYSUI_PACKAGE));
+                }
+            } catch (NameNotFoundException | NotFoundException e2) {
+                Log.w(TAG, "Didn't find SystemUi package icons, will skip preview", e);
+            }
+        }
+
         mThemes.add(builder.build());
     }
 
@@ -242,6 +292,13 @@
         return getItemStringFromStub(prefix, themeName);
     }
 
+    private ResourceAsset getDrawableResourceAsset(String prefix, String themeName) {
+        int drawableResId = mStubApkResources.getIdentifier(prefix + themeName,
+                "drawable", mStubPackageName);
+        return drawableResId == 0 ? null : new ResourceAsset(mStubApkResources, drawableResId,
+                RequestOptions.fitCenterTransform());
+    }
+
     private Typeface loadTypeface(String configName, String fontOverlayPackage)
             throws NameNotFoundException, NotFoundException {
 
diff --git a/src/com/android/customization/model/theme/ThemeBundle.java b/src/com/android/customization/model/theme/ThemeBundle.java
index d95828b..6958f75 100644
--- a/src/com/android/customization/model/theme/ThemeBundle.java
+++ b/src/com/android/customization/model/theme/ThemeBundle.java
@@ -34,6 +34,7 @@
 
 import com.android.customization.model.CustomizationOption;
 import com.android.wallpaper.R;
+import com.android.wallpaper.asset.ResourceAsset;
 
 import java.util.ArrayList;
 import java.util.Collections;
@@ -135,11 +136,13 @@
         public final List<Drawable> icons;
         public final Drawable shapeDrawable;
         @DrawableRes public final int wallpaperDrawableRes;
+        public final ResourceAsset colorPreviewDrawable;
+        public final ResourceAsset shapePreviewDrawable;
 
-        public PreviewInfo(Typeface bodyFontFamily, Typeface headlineFontFamily,
-                int colorAccentLight,
-                int colorAccentDark, List<Drawable> icons, Drawable shapeDrawable,
-                int wallpaperDrawableRes) {
+        private PreviewInfo(Typeface bodyFontFamily, Typeface headlineFontFamily,
+                int colorAccentLight, int colorAccentDark, List<Drawable> icons,
+                Drawable shapeDrawable, int wallpaperDrawableRes,
+                ResourceAsset colorPreviewDrawable, ResourceAsset shapePreviewDrawable) {
             this.bodyFontFamily = bodyFontFamily;
             this.headlineFontFamily = headlineFontFamily;
             this.colorAccentLight = colorAccentLight;
@@ -147,6 +150,8 @@
             this.icons = icons;
             this.shapeDrawable = shapeDrawable;
             this.wallpaperDrawableRes = wallpaperDrawableRes;
+            this.colorPreviewDrawable = colorPreviewDrawable;
+            this.shapePreviewDrawable = shapePreviewDrawable;
         }
     }
 
@@ -161,6 +166,8 @@
         private String mShapePath;
         private boolean mIsDefault;
         @DrawableRes private int mWallpaperDrawableResId;
+        private ResourceAsset mColorPreview;
+        private ResourceAsset mShapePreview;
 
         private String mFontOverlayPackage;
         private String mColorsPackage;
@@ -179,7 +186,8 @@
             return new ThemeBundle(mTitle, mFontOverlayPackage, mColorsPackage, mShapePackage,
                     mIconPackages, mIsDefault,
                     new PreviewInfo(mBodyFontFamily, mHeadlineFontFamily, mColorAccentLight,
-                            mColorAccentDark, mIcons, shapeDrawable, mWallpaperDrawableResId));
+                            mColorAccentDark, mIcons, shapeDrawable, mWallpaperDrawableResId,
+                            mColorPreview, mShapePreview));
         }
 
         public Builder setTitle(String title) {
@@ -237,6 +245,16 @@
             return this;
         }
 
+        public Builder setColorPreview(ResourceAsset colorPreview) {
+            mColorPreview = colorPreview;
+            return this;
+        }
+
+        public Builder setShapePreview(ResourceAsset shapePreview) {
+            mShapePreview = shapePreview;
+            return this;
+        }
+
         public Builder asDefault() {
             mIsDefault = true;
             return this;
diff --git a/src/com/android/customization/picker/theme/ThemeFragment.java b/src/com/android/customization/picker/theme/ThemeFragment.java
index f89df60..ed7da44 100644
--- a/src/com/android/customization/picker/theme/ThemeFragment.java
+++ b/src/com/android/customization/picker/theme/ThemeFragment.java
@@ -15,12 +15,15 @@
  */
 package com.android.customization.picker.theme;
 
+import android.app.Activity;
 import android.content.Context;
 import android.content.res.ColorStateList;
+import android.content.res.Resources;
 import android.os.Bundle;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.ImageView;
 import android.widget.TextView;
 import android.widget.Toast;
 
@@ -93,7 +96,7 @@
     }
 
     private void createAdapter() {
-        mAdapter = new ThemePreviewAdapter(getContext(), mSelectedTheme);
+        mAdapter = new ThemePreviewAdapter(getActivity(), mSelectedTheme);
         mPreviewPager.setAdapter(mAdapter);
     }
 
@@ -159,9 +162,15 @@
      */
     private static class ThemePreviewAdapter extends BasePreviewAdapter<ThemePreviewPage> {
 
-        ThemePreviewAdapter(Context context, ThemeBundle theme) {
-            super(context, R.layout.theme_preview_card);
-            addPage(new ThemePreviewPage(context, R.string.preview_name_font, R.drawable.ic_font,
+        private int[] mIconIds = {
+                R.id.preview_icon_0, R.id.preview_icon_1, R.id.preview_icon_2, R.id.preview_icon_3,
+                R.id.preview_icon_4, R.id.preview_icon_5
+        };
+
+        ThemePreviewAdapter(Activity activity, ThemeBundle theme) {
+            super(activity, R.layout.theme_preview_card);
+            final Resources res = activity.getResources();
+            addPage(new ThemePreviewPage(activity, R.string.preview_name_font, R.drawable.ic_font,
                     R.layout.preview_card_font_content, theme.getPreviewInfo().colorAccentLight) {
                 @Override
                 protected void bindBody() {
@@ -171,6 +180,53 @@
                     body.setTypeface(theme.getPreviewInfo().bodyFontFamily);
                 }
             });
+            if (theme.getPreviewInfo().icons.size() >= mIconIds.length) {
+                addPage(new ThemePreviewPage(activity, R.string.preview_name_icon,
+                        R.drawable.ic_wifi_24px, R.layout.preview_card_icon_content,
+                        theme.getPreviewInfo().colorAccentLight) {
+                    @Override
+                    protected void bindBody() {
+                        for (int i = 0; i < mIconIds.length; i++) {
+                            ((ImageView) card.findViewById(mIconIds[i])).setImageDrawable(
+                                    theme.getPreviewInfo().icons.get(i));
+                        }
+                    }
+                });
+            }
+            if (theme.getPreviewInfo().colorPreviewDrawable != null) {
+                addPage(new ThemePreviewPage(activity, R.string.preview_name_color,
+                        R.drawable.ic_colorize_24px, R.layout.preview_card_static_content,
+                        theme.getPreviewInfo().colorAccentLight) {
+                    @Override
+                    protected void bindBody() {
+                        ImageView staticImage = card.findViewById(R.id.preview_static_image);
+
+                        theme.getPreviewInfo().colorPreviewDrawable.loadDrawable(activity,
+                                staticImage, card.getCardBackgroundColor().getDefaultColor());
+                        staticImage.getLayoutParams().width = res.getDimensionPixelSize(
+                                R.dimen.color_preview_image_width);
+                        staticImage.getLayoutParams().height = res.getDimensionPixelSize(
+                                R.dimen.color_preview_image_height);
+                    }
+                });
+            }
+            if (theme.getPreviewInfo().shapePreviewDrawable != null) {
+                addPage(new ThemePreviewPage(activity, R.string.preview_name_shape,
+                        R.drawable.ic_shapes_24px, R.layout.preview_card_static_content,
+                        theme.getPreviewInfo().colorAccentLight) {
+                    @Override
+                    protected void bindBody() {
+                        ImageView staticImage = card.findViewById(R.id.preview_static_image);
+                        theme.getPreviewInfo().shapePreviewDrawable.loadDrawable(activity,
+                                staticImage, card.getCardBackgroundColor().getDefaultColor());
+
+                        staticImage.getLayoutParams().width = res.getDimensionPixelSize(
+                                R.dimen.shape_preview_image_width);
+                        staticImage.getLayoutParams().height = res.getDimensionPixelSize(
+                                R.dimen.shape_preview_image_height);
+                    }
+                });
+            }
         }
     }
 }
diff --git a/src/com/android/customization/widget/OptionSelectorController.java b/src/com/android/customization/widget/OptionSelectorController.java
index 8c17cad..6b426e3 100644
--- a/src/com/android/customization/widget/OptionSelectorController.java
+++ b/src/com/android/customization/widget/OptionSelectorController.java
@@ -107,7 +107,7 @@
                     holder.labelView.setText(option.getTitle());
                 }
                 option.bindThumbnailTile(holder.tileView);
-                holder.itemView.setSelected(option.equals(mSelectedOption));
+                holder.itemView.setActivated(option.equals(mSelectedOption));
                 holder.itemView.setOnClickListener(view -> setSelectedOption(option));
             }
 
diff --git a/src/com/android/customization/widget/PreviewPager.java b/src/com/android/customization/widget/PreviewPager.java
index ff13284..e8ae012 100644
--- a/src/com/android/customization/widget/PreviewPager.java
+++ b/src/com/android/customization/widget/PreviewPager.java
@@ -21,6 +21,7 @@
 import android.util.AttributeSet;
 import android.view.LayoutInflater;
 import android.view.View;
+import android.view.ViewGroup;
 import android.widget.LinearLayout;
 
 import androidx.annotation.Nullable;
@@ -131,7 +132,10 @@
              @Override
              public void onPageScrolled(
                      int position, float positionOffset, int positionOffsetPixels) {
-                 mPageIndicator.setLocation(position + positionOffset);
+                 // For certain sizes, positionOffset never makes it to 1, so round it as we don't
+                 // need that much precision
+                 float location = (float)Math.round((position + positionOffset) * 100) / 100;
+                 mPageIndicator.setLocation(location);
                  if (mExternalPageListener != null) {
                      mExternalPageListener.onPageScrolled(position, positionOffset,
                              positionOffsetPixels);
@@ -162,10 +166,13 @@
 
     private void updateIndicator(int position) {
         int adapterCount = mAdapter.getCount();
-        if (adapterCount > 0) {
-            mPreviousArrow.setVisibility(position == 0 ? View.GONE : View.VISIBLE);
-            mNextArrow.setVisibility(
-                    position == (adapterCount - 1) ? View.GONE : View.VISIBLE);
+        if (adapterCount > 1) {
+            mPreviousArrow.setVisibility(View.VISIBLE);
+            mNextArrow.setVisibility(View.VISIBLE);
+            mPreviousArrow.setEnabled(position != 0);
+            ((ViewGroup) mPreviousArrow).getChildAt(0).setEnabled(position != 0);
+            mNextArrow.setEnabled(position != (adapterCount - 1));
+            ((ViewGroup) mNextArrow).getChildAt(0).setEnabled(position != (adapterCount - 1));
         } else {
             mPageIndicator.setVisibility(View.GONE);
             mPreviousArrow.setVisibility(View.GONE);