Merge "Update the preview image in 'Accessibility button & gesture' page." into sc-v2-dev am: f38931fd98

Original change: https://googleplex-android-review.googlesource.com/c/platform/packages/apps/Settings/+/15401732

Change-Id: I8e2444b9cb74262298dd290adeaf783198901cb1
diff --git a/res/drawable-night/accessibility_button_preview_base.xml b/res/drawable-night/accessibility_button_preview_base.xml
new file mode 100644
index 0000000..a5b0bfa
--- /dev/null
+++ b/res/drawable-night/accessibility_button_preview_base.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2021 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="412dp"
+    android:height="300dp"
+    android:viewportWidth="412"
+    android:viewportHeight="300">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M384.2,300H27.8C12.5,300 0,287.2 0,271.5v-243C0,12.8 12.5,0 27.8,0h356.5C399.5,0 412,12.8 412,28.5v243.2C412,287.2 399.5,300 384.2,300z"/>
+  <path
+      android:pathData="M325.4,231.9c0,9.8 -7.9,17.7 -17.7,17.7H103.9c-9.8,0 -17.7,-7.9 -17.7,-17.7V0h-4.4v231.9c0,12.2 9.9,22.2 22.1,22.2h203.8c12.2,0 22.1,-9.9 22.1,-22.2V14.8c2.4,0 4.4,-2 4.4,-4.4V0h-8.9L325.4,231.9L325.4,231.9z"
+      android:fillColor="#808589"/>
+</vector>
diff --git a/res/drawable-night/accessibility_button_preview_large_floating_menu.xml b/res/drawable-night/accessibility_button_preview_large_floating_menu.xml
new file mode 100644
index 0000000..74ecbfc
--- /dev/null
+++ b/res/drawable-night/accessibility_button_preview_large_floating_menu.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2021 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="412dp"
+    android:height="300dp"
+    android:viewportWidth="412"
+    android:viewportHeight="300">
+    <path
+        android:pathData="M325.4,198.2h-40.9c-22.1,0 -40,-18 -40,-40s18,-40 40,-40h40.9v2.6h-40.9c-20.7,0 -37.5,16.8 -37.5,37.5s16.8,37.5 37.5,37.5h40.9V198.2z"
+        android:fillColor="#808589"/>
+    <path
+        android:pathData="M284.3,128.4c-16.5,0 -29.8,13.4 -29.8,29.8c0,16.5 13.4,29.8 29.8,29.8s29.8,-13.4 29.8,-29.8C314.2,141.7 300.9,128.4 284.3,128.4zM284.3,142.7c1.7,0 3.1,1.4 3.1,3.1c0,1.7 -1.4,3.1 -3.1,3.1s-3.1,-1.4 -3.1,-3.1C281.2,144.1 282.7,142.7 284.3,142.7zM289.1,153.7V174H286v-9.4h-3.1v9.4h-3.2v-20.3c-3.1,-0.3 -6.5,-0.8 -9.4,-1.5l0.8,-3.1c4.1,1 8.9,1.5 13.3,1.5s9.2,-0.5 13.3,-1.5l0.8,3.1C295.6,152.9 292.2,153.4 289.1,153.7z"
+        android:fillColor="#D9DBDF"/>
+</vector>
diff --git a/res/drawable-night/accessibility_button_preview_small_floating_menu.xml b/res/drawable-night/accessibility_button_preview_small_floating_menu.xml
new file mode 100644
index 0000000..4226086
--- /dev/null
+++ b/res/drawable-night/accessibility_button_preview_small_floating_menu.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2021 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="412dp"
+    android:height="300dp"
+    android:viewportWidth="412"
+    android:viewportHeight="300">
+    <path
+        android:pathData="M325.4,189.2h-31.7c-17.1,0 -31,-13.9 -31,-31s13.9,-31 31,-31h31.7v2h-31.7c-16,0 -29,13 -29,29s13,29 29,29h31.7V189.2z"
+        android:fillColor="#808589"/>
+    <path
+        android:pathData="M293.6,135.1c-12.8,0 -23.1,10.4 -23.1,23.1c0,12.8 10.4,23.1 23.1,23.1s23.1,-10.4 23.1,-23.1C316.7,145.4 306.4,135.1 293.6,135.1zM293.6,146.2c1.3,0 2.4,1.1 2.4,2.4s-1.1,2.4 -2.4,2.4s-2.4,-1.1 -2.4,-2.4S292.3,146.2 293.6,146.2zM297.3,154.7v15.7h-2.4v-7.3h-2.4v7.3H290v-15.7c-2.4,-0.2 -5,-0.6 -7.3,-1.2l0.6,-2.4c3.2,0.8 6.9,1.2 10.3,1.2s7.1,-0.4 10.3,-1.2l0.6,2.4C302.3,154.1 299.7,154.5 297.3,154.7z"
+        android:fillColor="#D9DBDF"/>
+</vector>
diff --git a/res/drawable-night/accessibility_button_preview_three_finger.xml b/res/drawable-night/accessibility_button_preview_three_finger.xml
new file mode 100644
index 0000000..7afb0f7
--- /dev/null
+++ b/res/drawable-night/accessibility_button_preview_three_finger.xml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2021 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="412dp"
+    android:height="300dp"
+    android:viewportWidth="412"
+    android:viewportHeight="300">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M384.2,300H27.8C12.5,300 0,287.2 0,271.5v-243C0,12.8 12.5,0 27.8,0h356.5C399.5,0 412,12.8 412,28.5v243.2C412,287.2 399.5,300 384.2,300z"/>
+  <path
+      android:pathData="M242.5,226.9h-73.3c-1.7,0 -3.1,1.4 -3.1,3.1s1.4,3.1 3.1,3.1h73.3c1.7,0 3.1,-1.4 3.1,-3.1S244.2,226.9 242.5,226.9z"
+      android:fillColor="#80868B"/>
+  <path
+      android:pathData="M182.7,222.6v-17.5h7.5l-10.6,-18.7l-10.6,18.7h7.5v17.5c-2.9,1.2 -4.9,4 -4.9,7.4c0,4.4 3.5,8 8,8c4.4,0 8,-3.5 8,-8C187.6,226.7 185.6,223.8 182.7,222.6z"
+      android:fillColor="#669DF6"/>
+  <path
+      android:pathData="M209,222.6v-17.5h7.5l-10.6,-18.7l-10.6,18.7h7.5v17.5c-2.9,1.2 -4.9,4 -4.9,7.4c0,4.4 3.5,8 8,8c4.4,0 8,-3.5 8,-8C213.9,226.7 211.9,223.8 209,222.6z"
+      android:fillColor="#669DF6"/>
+  <path
+      android:pathData="M235.2,222.6v-17.5h7.5l-10.6,-18.7l-10.6,18.7h7.5v17.5c-2.9,1.2 -4.9,4 -4.9,7.4c0,4.4 3.5,8 8,8c4.4,0 8,-3.5 8,-8C240,226.7 238,223.8 235.2,222.6z"
+      android:fillColor="#669DF6"/>
+  <path
+      android:pathData="M325.4,231.9c0,9.8 -7.9,17.7 -17.7,17.7H103.9c-9.8,0 -17.7,-7.9 -17.7,-17.7V0h-4.4v231.9c0,12.2 9.9,22.2 22.1,22.2h203.8c12.2,0 22.1,-9.9 22.1,-22.2V14.8c2.4,0 4.4,-2 4.4,-4.4V0h-8.9V231.9z"
+      android:fillColor="#80868B"/>
+</vector>
diff --git a/res/drawable-night/accessibility_button_preview_two_finger.xml b/res/drawable-night/accessibility_button_preview_two_finger.xml
new file mode 100644
index 0000000..05871d9
--- /dev/null
+++ b/res/drawable-night/accessibility_button_preview_two_finger.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2021 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="412dp"
+    android:height="300dp"
+    android:viewportWidth="412"
+    android:viewportHeight="300">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M384.2,300H27.8C12.5,300 0,287.2 0,271.5v-243C0,12.8 12.5,0 27.8,0h356.5C399.5,0 412,12.8 412,28.5v243.2C412,287.2 399.5,300 384.2,300z"/>
+  <path
+      android:pathData="M325.4,231.9c0,9.8 -7.9,17.7 -17.7,17.7H103.9c-9.8,0 -17.7,-7.9 -17.7,-17.7V0h-4.4v231.9c0,12.2 9.9,22.2 22.1,22.2h203.8c12.2,0 22.1,-9.9 22.1,-22.2V14.8c2.4,0 4.4,-2 4.4,-4.4V0h-8.9V231.9z"
+      android:fillColor="#80868B"/>
+  <path
+      android:pathData="M242.4,226.9h-9.3h-5.6h-43.4h-4.7h-10.2c-1.7,0 -3.1,1.4 -3.1,3.1s1.4,3.1 3.1,3.1h10.2h3.9h45h4.8h9.3c1.7,0 3.1,-1.4 3.1,-3.1S244.1,226.9 242.4,226.9z"
+      android:fillColor="#80868B"/>
+  <path
+      android:pathData="M194,223.5v-17.5h7.5l-10.6,-18.7l-10.6,18.7h7.5v17.5c-1.6,0.7 -2.9,1.9 -3.8,3.4c-0.7,1.2 -1.1,2.5 -1.1,4c0,0.7 0.1,1.5 0.3,2.2c0.9,3.3 4,5.8 7.7,5.8c3.6,0 6.7,-2.5 7.7,-5.8c0.2,-0.7 0.3,-1.4 0.3,-2.2c0,-1.5 -0.4,-2.8 -1.1,-4C197,225.4 195.6,224.2 194,223.5z"
+      android:fillColor="#669DF6"/>
+  <path
+      android:pathData="M223.7,223.5v-17.5h7.5l-10.6,-18.7l-10.6,18.7h7.5v17.5c-1.6,0.7 -2.9,1.9 -3.8,3.4c-0.7,1.2 -1.1,2.5 -1.1,4c0,0.7 0.1,1.5 0.3,2.2c0.9,3.3 4,5.8 7.7,5.8c3.6,0 6.7,-2.5 7.7,-5.8c0.2,-0.7 0.3,-1.4 0.3,-2.2c0,-1.5 -0.4,-2.8 -1.1,-4C226.6,225.4 225.3,224.2 223.7,223.5z"
+      android:fillColor="#669DF6"/>
+</vector>
diff --git a/res/drawable/accessibility_button_preview_base.xml b/res/drawable/accessibility_button_preview_base.xml
index 9e3ec59..b75b1a8 100644
--- a/res/drawable/accessibility_button_preview_base.xml
+++ b/res/drawable/accessibility_button_preview_base.xml
@@ -15,28 +15,14 @@
 -->
 
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="125dp"
-    android:height="153dp"
-    android:viewportWidth="125"
-    android:viewportHeight="153">
-  <group>
-    <clip-path
-        android:pathData="M0,0h125v153h-125z"/>
-    <path
-        android:pathData="M7.4,-62.9L117.6,-62.9A6.3,6.3 0,0 1,123.9 -56.6L123.9,145.6A6.3,6.3 0,0 1,117.6 151.9L7.4,151.9A6.3,6.3 0,0 1,1.1 145.6L1.1,-56.6A6.3,6.3 0,0 1,7.4 -62.9z"
-        android:strokeWidth="1.8"
-        android:fillColor="#DADCE0"
-        android:strokeColor="#BDC1C6"/>
-    <group>
-      <clip-path
-          android:pathData="M7.4,-62.9L116.6,-62.9A6.3,6.3 0,0 1,122.9 -56.6L122.9,145.6A6.3,6.3 0,0 1,116.6 151.9L7.4,151.9A6.3,6.3 0,0 1,1.1 145.6L1.1,-56.6A6.3,6.3 0,0 1,7.4 -62.9z"/>
-      <path
-          android:pathData="M12.4,-61L112.6,-61A5.4,5.4 0,0 1,118 -55.6L118,140.6A5.4,5.4 0,0 1,112.6 146L12.4,146A5.4,5.4 0,0 1,7 140.6L7,-55.6A5.4,5.4 0,0 1,12.4 -61z"
-          android:fillColor="#F8F9FA"/>
-      <group>
-        <clip-path
-            android:pathData="M12.4,-61L112.6,-61A5.4,5.4 0,0 1,118 -55.6L118,140.6A5.4,5.4 0,0 1,112.6 146L12.4,146A5.4,5.4 0,0 1,7 140.6L7,-55.6A5.4,5.4 0,0 1,12.4 -61z"/>
-      </group>
-    </group>
-  </group>
+    android:width="412dp"
+    android:height="300dp"
+    android:viewportWidth="412"
+    android:viewportHeight="300">
+  <path
+      android:pathData="M384.2,300H27.8C12.5,300 0,287.2 0,271.5v-243C0,12.8 12.5,0 27.8,0h356.5C399.5,0 412,12.8 412,28.5v243.2C412,287.2 399.5,300 384.2,300z"
+      android:fillColor="#FFFFFF"/>
+  <path
+      android:pathData="M325.4,231.9c0,9.8 -7.9,17.7 -17.7,17.7H103.9c-9.8,0 -17.7,-7.9 -17.7,-17.7V0h-4.4v231.9c0,12.2 9.9,22.2 22.1,22.2h203.8c12.2,0 22.1,-9.9 22.1,-22.2V14.8c2.4,0 4.4,-2 4.4,-4.4V0h-8.9L325.4,231.9L325.4,231.9z"
+      android:fillColor="#DADCE0"/>
 </vector>
diff --git a/res/drawable/accessibility_button_preview_large_floating_menu.xml b/res/drawable/accessibility_button_preview_large_floating_menu.xml
index e003dc7..794f3ca 100644
--- a/res/drawable/accessibility_button_preview_large_floating_menu.xml
+++ b/res/drawable/accessibility_button_preview_large_floating_menu.xml
@@ -15,27 +15,14 @@
 -->
 
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="125dp"
-    android:height="153dp"
-    android:viewportWidth="125"
-    android:viewportHeight="153">
+    android:width="412dp"
+    android:height="300dp"
+    android:viewportWidth="412"
+    android:viewportHeight="300">
     <path
-        android:pathData="M0,0h125v153h-125z"
-        android:fillColor="#00000000"/>
-    <group>
-        <clip-path
-            android:pathData="M89,95h29v34h-29z"/>
-        <path
-            android:strokeWidth="1"
-            android:pathData="M105,97.5L131,97.5A14.5,14.5 0,0 1,145.5 112L145.5,112A14.5,14.5 0,0 1,131 126.5L105,126.5A14.5,14.5 0,0 1,90.5 112L90.5,112A14.5,14.5 0,0 1,105 97.5z"
-            android:fillColor="#ffffff"
-            android:strokeColor="#DADCE0"/>
-        <path
-            android:pathData="M105.4,112m-11.2,0a11.2,11.2 0,1 1,22.4 0a11.2,11.2 0,1 1,-22.4 0"
-            android:fillColor="#80868B"/>
-        <path
-            android:pathData="M106.467,107.733C106.467,108.32 105.987,108.8 105.4,108.8C104.814,108.8 104.334,108.32 104.334,107.733C104.334,107.147 104.814,106.667 105.4,106.667C105.987,106.667 106.467,107.147 106.467,107.733ZM105.4,109.333C106.91,109.333 108.542,109.173 109.934,108.8L110.2,109.867C109.208,110.133 108.067,110.309 107,110.4V117.333H105.934V114.133H104.867V117.333H103.8V110.4C102.734,110.309 101.592,110.133 100.6,109.867L100.867,108.8C102.259,109.173 103.891,109.333 105.4,109.333Z"
-            android:fillColor="#ffffff"
-            android:fillType="evenOdd"/>
-    </group>
-</vector>
\ No newline at end of file
+        android:pathData="M325.4,198.2h-40.9c-22.1,0 -40,-18 -40,-40s18,-40 40,-40h40.9v2.6h-40.9c-20.7,0 -37.5,16.8 -37.5,37.5s16.8,37.5 37.5,37.5h40.9V198.2z"
+        android:fillColor="#DADCE0"/>
+    <path
+        android:pathData="M284.3,128.4c-16.5,0 -29.8,13.4 -29.8,29.8c0,16.5 13.4,29.8 29.8,29.8s29.8,-13.4 29.8,-29.8C314.2,141.7 300.9,128.4 284.3,128.4zM284.3,142.7c1.7,0 3.1,1.4 3.1,3.1c0,1.7 -1.4,3.1 -3.1,3.1s-3.1,-1.4 -3.1,-3.1C281.2,144.1 282.7,142.7 284.3,142.7zM289.1,153.7V174H286v-9.4h-3.1v9.4h-3.2v-20.3c-3.1,-0.3 -6.5,-0.8 -9.4,-1.5l0.8,-3.1c4.1,1 8.9,1.5 13.3,1.5s9.2,-0.5 13.3,-1.5l0.8,3.1C295.6,152.9 292.2,153.4 289.1,153.7z"
+        android:fillColor="#606368"/>
+</vector>
diff --git a/res/drawable/accessibility_button_preview_small_floating_menu.xml b/res/drawable/accessibility_button_preview_small_floating_menu.xml
index 3ff8e4b..670a516 100644
--- a/res/drawable/accessibility_button_preview_small_floating_menu.xml
+++ b/res/drawable/accessibility_button_preview_small_floating_menu.xml
@@ -15,27 +15,14 @@
 -->
 
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="125dp"
-    android:height="153dp"
-    android:viewportWidth="125"
-    android:viewportHeight="153">
+    android:width="412dp"
+    android:height="300dp"
+    android:viewportWidth="412"
+    android:viewportHeight="300">
     <path
-        android:pathData="M0,0h125v153h-125z"
-        android:fillColor="#00000000"/>
-    <group>
-        <clip-path
-            android:pathData="M89,106h29v22h-29z"/>
-        <path
-            android:strokeWidth="1"
-            android:pathData="M111,107.5L137,107.5A9.5,9.5 0,0 1,146.5 117L146.5,117A9.5,9.5 0,0 1,137 126.5L111,126.5A9.5,9.5 0,0 1,101.5 117L101.5,117A9.5,9.5 0,0 1,111 107.5z"
-            android:fillColor="#ffffff"
-            android:strokeColor="#DADCE0"/>
-        <path
-            android:pathData="M111.168,116.968m-7.168,0a7.168,7.168 0,1 1,14.336 0a7.168,7.168 0,1 1,-14.336 0"
-            android:fillColor="#80868B"/>
-        <path
-            android:pathData="M111.851,114.237C111.851,114.612 111.543,114.92 111.168,114.92C110.792,114.92 110.485,114.612 110.485,114.237C110.485,113.861 110.792,113.554 111.168,113.554C111.543,113.554 111.851,113.861 111.851,114.237ZM111.168,115.261C112.134,115.261 113.178,115.158 114.069,114.92L114.24,115.602C113.605,115.773 112.875,115.886 112.192,115.944V120.381H111.509V118.333H110.827V120.381H110.144V115.944C109.461,115.886 108.731,115.773 108.096,115.602L108.267,114.92C109.157,115.158 110.202,115.261 111.168,115.261Z"
-            android:fillColor="#ffffff"
-            android:fillType="evenOdd"/>
-    </group>
-</vector>
\ No newline at end of file
+        android:pathData="M325.4,189.2h-31.7c-17.1,0 -31,-13.9 -31,-31s13.9,-31 31,-31h31.7v2h-31.7c-16,0 -29,13 -29,29s13,29 29,29h31.7V189.2z"
+        android:fillColor="#DADCE0"/>
+    <path
+        android:pathData="M293.6,135.1c-12.8,0 -23.1,10.4 -23.1,23.1c0,12.8 10.4,23.1 23.1,23.1s23.1,-10.4 23.1,-23.1C316.7,145.4 306.4,135.1 293.6,135.1zM293.6,146.2c1.3,0 2.4,1.1 2.4,2.4s-1.1,2.4 -2.4,2.4s-2.4,-1.1 -2.4,-2.4S292.3,146.2 293.6,146.2zM297.3,154.7v15.7h-2.4v-7.3h-2.4v7.3H290v-15.7c-2.4,-0.2 -5,-0.6 -7.3,-1.2l0.6,-2.4c3.2,0.8 6.9,1.2 10.3,1.2s7.1,-0.4 10.3,-1.2l0.6,2.4C302.3,154.1 299.7,154.5 297.3,154.7z"
+        android:fillColor="#606368"/>
+</vector>
diff --git a/res/drawable/accessibility_button_preview_three_finger.xml b/res/drawable/accessibility_button_preview_three_finger.xml
index 0fe6710..d18ce60 100644
--- a/res/drawable/accessibility_button_preview_three_finger.xml
+++ b/res/drawable/accessibility_button_preview_three_finger.xml
@@ -15,26 +15,26 @@
 -->
 
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="125dp"
-    android:height="153dp"
-    android:viewportWidth="125"
-    android:viewportHeight="153">
+    android:width="412dp"
+    android:height="300dp"
+    android:viewportWidth="412"
+    android:viewportHeight="300">
   <path
-      android:pathData="M0,0h125v153h-125z"
-      android:fillColor="#ffffff"/>
+      android:pathData="M384.2,300H27.8C12.5,300 0,287.2 0,271.5v-243C0,12.8 12.5,0 27.8,0h356.5C399.5,0 412,12.8 412,28.5v243.2C412,287.2 399.5,300 384.2,300z"
+      android:fillColor="#FFFFFF"/>
   <path
-      android:pathData="M41.266,134.754L84.047,134.754A1.735,1.735 0,0 1,85.781 136.489L85.781,136.489A1.735,1.735 0,0 1,84.047 138.223L41.266,138.223A1.735,1.735 0,0 1,39.531 136.489L39.531,136.489A1.735,1.735 0,0 1,41.266 134.754z"
+      android:pathData="M242.5,226.9h-73.3c-1.7,0 -3.1,1.4 -3.1,3.1s1.4,3.1 3.1,3.1h73.3c1.7,0 3.1,-1.4 3.1,-3.1S244.2,226.9 242.5,226.9z"
       android:fillColor="#DADCE0"/>
   <path
-      android:pathData="M48.359,107L54.719,119.721H50.672V131.87C52.385,132.722 53.563,134.49 53.563,136.533C53.563,139.407 51.233,141.737 48.359,141.737C45.486,141.737 43.156,139.407 43.156,136.533C43.156,134.49 44.333,132.722 46.047,131.87V119.721H42L48.359,107Z"
-      android:fillColor="#1A73E8"
-      android:fillType="evenOdd"/>
+      android:pathData="M182.7,222.6v-17.5h7.5l-10.6,-18.7l-10.6,18.7h7.5v17.5c-2.9,1.2 -4.9,4 -4.9,7.4c0,4.4 3.5,8 8,8c4.4,0 8,-3.5 8,-8C187.6,226.7 185.6,223.8 182.7,222.6z"
+      android:fillColor="#1A73E8"/>
   <path
-      android:pathData="M62.703,107L69.063,119.721H65.016V131.87C66.729,132.722 67.906,134.49 67.906,136.533C67.906,139.407 65.577,141.737 62.703,141.737C59.829,141.737 57.5,139.407 57.5,136.533C57.5,134.49 58.677,132.722 60.39,131.87V119.721H56.344L62.703,107Z"
-      android:fillColor="#1A73E8"
-      android:fillType="evenOdd"/>
+      android:pathData="M209,222.6v-17.5h7.5l-10.6,-18.7l-10.6,18.7h7.5v17.5c-2.9,1.2 -4.9,4 -4.9,7.4c0,4.4 3.5,8 8,8c4.4,0 8,-3.5 8,-8C213.9,226.7 211.9,223.8 209,222.6z"
+      android:fillColor="#1A73E8"/>
   <path
-      android:pathData="M76.891,107L83.25,119.721H79.203V131.87C80.916,132.722 82.094,134.49 82.094,136.533C82.094,139.407 79.764,141.737 76.891,141.737C74.017,141.737 71.688,139.407 71.688,136.533C71.688,134.49 72.865,132.722 74.578,131.87V119.721H70.531L76.891,107Z"
-      android:fillColor="#1A73E8"
-      android:fillType="evenOdd"/>
+      android:pathData="M235.2,222.6v-17.5h7.5l-10.6,-18.7l-10.6,18.7h7.5v17.5c-2.9,1.2 -4.9,4 -4.9,7.4c0,4.4 3.5,8 8,8c4.4,0 8,-3.5 8,-8C240,226.7 238,223.8 235.2,222.6z"
+      android:fillColor="#1A73E8"/>
+  <path
+      android:pathData="M325.4,231.9c0,9.8 -7.9,17.7 -17.7,17.7H103.9c-9.8,0 -17.7,-7.9 -17.7,-17.7V0h-4.4v231.9c0,12.2 9.9,22.2 22.1,22.2h203.8c12.2,0 22.1,-9.9 22.1,-22.2V14.8c2.4,0 4.4,-2 4.4,-4.4V0h-8.9V231.9z"
+      android:fillColor="#DADCE0"/>
 </vector>
diff --git a/res/drawable/accessibility_button_preview_two_finger.xml b/res/drawable/accessibility_button_preview_two_finger.xml
index e61e3e8..bec95af 100644
--- a/res/drawable/accessibility_button_preview_two_finger.xml
+++ b/res/drawable/accessibility_button_preview_two_finger.xml
@@ -15,22 +15,23 @@
 -->
 
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="125dp"
-    android:height="153dp"
-    android:viewportWidth="125"
-    android:viewportHeight="153">
+    android:width="412dp"
+    android:height="300dp"
+    android:viewportWidth="412"
+    android:viewportHeight="300">
   <path
-      android:pathData="M0,0h125v153h-125z"
-      android:fillColor="#ffffff"/>
+      android:pathData="M384.2,300H27.8C12.5,300 0,287.2 0,271.5v-243C0,12.8 12.5,0 27.8,0h356.5C399.5,0 412,12.8 412,28.5v243.2C412,287.2 399.5,300 384.2,300z"
+      android:fillColor="#FFFFFF"/>
   <path
-      android:pathData="M41.266,134.754L84.047,134.754A1.735,1.735 0,0 1,85.781 136.489L85.781,136.489A1.735,1.735 0,0 1,84.047 138.223L41.266,138.223A1.735,1.735 0,0 1,39.531 136.489L39.531,136.489A1.735,1.735 0,0 1,41.266 134.754z"
+      android:pathData="M325.4,231.9c0,9.8 -7.9,17.7 -17.7,17.7H103.9c-9.8,0 -17.7,-7.9 -17.7,-17.7V0h-4.4v231.9c0,12.2 9.9,22.2 22.1,22.2h203.8c12.2,0 22.1,-9.9 22.1,-22.2V14.8c2.4,0 4.4,-2 4.4,-4.4V0h-8.9V231.9z"
       android:fillColor="#DADCE0"/>
   <path
-      android:pathData="M52.828,107L59.188,119.721H55.141V131.87C56.854,132.722 58.031,134.49 58.031,136.533C58.031,139.407 55.702,141.737 52.828,141.737C49.954,141.737 47.625,139.407 47.625,136.533C47.625,134.49 48.802,132.722 50.515,131.87V119.721H46.469L52.828,107Z"
-      android:fillColor="#1A73E8"
-      android:fillType="evenOdd"/>
+      android:pathData="M242.4,226.9h-9.3h-5.6h-43.4h-4.7h-10.2c-1.7,0 -3.1,1.4 -3.1,3.1s1.4,3.1 3.1,3.1h10.2h3.9h45h4.8h9.3c1.7,0 3.1,-1.4 3.1,-3.1S244.1,226.9 242.4,226.9z"
+      android:fillColor="#DADCE0"/>
   <path
-      android:pathData="M70.172,107L76.531,119.721H72.485V131.87C74.198,132.722 75.375,134.49 75.375,136.533C75.375,139.407 73.046,141.737 70.172,141.737C67.298,141.737 64.969,139.407 64.969,136.533C64.969,134.49 66.146,132.722 67.859,131.87V119.721H63.813L70.172,107Z"
-      android:fillColor="#1A73E8"
-      android:fillType="evenOdd"/>
+      android:pathData="M194,223.5v-17.5h7.5l-10.6,-18.7l-10.6,18.7h7.5v17.5c-1.6,0.7 -2.9,1.9 -3.8,3.4c-0.7,1.2 -1.1,2.5 -1.1,4c0,0.7 0.1,1.5 0.3,2.2c0.9,3.3 4,5.8 7.7,5.8c3.6,0 6.7,-2.5 7.7,-5.8c0.2,-0.7 0.3,-1.4 0.3,-2.2c0,-1.5 -0.4,-2.8 -1.1,-4C197,225.4 195.6,224.2 194,223.5z"
+      android:fillColor="#1A73E8"/>
+  <path
+      android:pathData="M223.7,223.5v-17.5h7.5l-10.6,-18.7l-10.6,18.7h7.5v17.5c-1.6,0.7 -2.9,1.9 -3.8,3.4c-0.7,1.2 -1.1,2.5 -1.1,4c0,0.7 0.1,1.5 0.3,2.2c0.9,3.3 4,5.8 7.7,5.8c3.6,0 6.7,-2.5 7.7,-5.8c0.2,-0.7 0.3,-1.4 0.3,-2.2c0,-1.5 -0.4,-2.8 -1.1,-4C226.6,225.4 225.3,224.2 223.7,223.5z"
+      android:fillColor="#1A73E8"/>
 </vector>
diff --git a/res/layout/accessibility_button_preview.xml b/res/layout/accessibility_button_preview.xml
deleted file mode 100644
index 07cb0ff..0000000
--- a/res/layout/accessibility_button_preview.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2021 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.
--->
-
-<FrameLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:clipToPadding="false"
-    android:importantForAccessibility="noHideDescendants">
-
-    <ImageView
-        android:id="@+id/preview_image"
-        android:layout_width="match_parent"
-        android:layout_height="@dimen/accessibility_button_preview_height"
-        android:layout_gravity="center"
-        android:scaleType="fitCenter"
-        android:focusable="false"
-        android:clickable="false"
-        android:adjustViewBounds="true"/>
-</FrameLayout>
\ No newline at end of file
diff --git a/res/xml/accessibility_button_settings.xml b/res/xml/accessibility_button_settings.xml
index 9f32714..86dd087 100644
--- a/res/xml/accessibility_button_settings.xml
+++ b/res/xml/accessibility_button_settings.xml
@@ -18,10 +18,8 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:settings="http://schemas.android.com/apk/res-auto">
 
-    <com.android.settingslib.widget.LayoutPreference
-        android:key="caption_preview"
-        android:title="@string/summary_placeholder"
-        android:layout="@layout/accessibility_button_preview"
+    <com.android.settingslib.widget.IllustrationPreference
+        android:key="accessibility_button_preview"
         android:selectable="false"
         settings:searchable="false"
         android:persistent="false"
diff --git a/src/com/android/settings/accessibility/AccessibilityButtonPreviewPreferenceController.java b/src/com/android/settings/accessibility/AccessibilityButtonPreviewPreferenceController.java
index 8a840a1..c9f3c43 100644
--- a/src/com/android/settings/accessibility/AccessibilityButtonPreviewPreferenceController.java
+++ b/src/com/android/settings/accessibility/AccessibilityButtonPreviewPreferenceController.java
@@ -24,7 +24,6 @@
 import android.os.Looper;
 import android.provider.Settings;
 import android.view.accessibility.AccessibilityManager;
-import android.widget.ImageView;
 
 import androidx.annotation.VisibleForTesting;
 import androidx.preference.PreferenceScreen;
@@ -34,7 +33,7 @@
 import com.android.settingslib.core.lifecycle.LifecycleObserver;
 import com.android.settingslib.core.lifecycle.events.OnPause;
 import com.android.settingslib.core.lifecycle.events.OnResume;
-import com.android.settingslib.widget.LayoutPreference;
+import com.android.settingslib.widget.IllustrationPreference;
 
 /** Preference controller that controls the preview effect in accessibility button page. */
 public class AccessibilityButtonPreviewPreferenceController extends BasePreferenceController
@@ -48,9 +47,8 @@
     @VisibleForTesting
     final ContentObserver mContentObserver;
     private AccessibilityLayerDrawable mAccessibilityPreviewDrawable;
-
     @VisibleForTesting
-    ImageView mPreview;
+    IllustrationPreference mIllustrationPreference;
 
     private AccessibilityManager.TouchExplorationStateChangeListener
             mTouchExplorationStateChangeListener;
@@ -77,8 +75,7 @@
     @Override
     public void displayPreference(PreferenceScreen screen) {
         super.displayPreference(screen);
-        final LayoutPreference preference = screen.findPreference(getPreferenceKey());
-        mPreview = preference.findViewById(R.id.preview_image);
+        mIllustrationPreference = screen.findPreference(getPreferenceKey());
 
         updatePreviewPreference();
     }
@@ -116,17 +113,15 @@
             final int floatingMenuIconId = (size == SMALL_SIZE)
                     ? R.drawable.accessibility_button_preview_small_floating_menu
                     : R.drawable.accessibility_button_preview_large_floating_menu;
-            mPreview.setImageDrawable(getAccessibilityPreviewDrawable(floatingMenuIconId, opacity));
-            mPreview.invalidate();
+            mIllustrationPreference.setImageDrawable(
+                    getAccessibilityPreviewDrawable(floatingMenuIconId, opacity));
         } else if (AccessibilityUtil.isGestureNavigateEnabled(mContext)) {
-            // TODO(b/193081959): Use static illustartion instead.
-            final int resId = AccessibilityUtil.isTouchExploreEnabled(mContext)
-                    ? R.drawable.accessibility_button_preview_three_finger
-                    : R.drawable.accessibility_button_preview_two_finger;
-            mPreview.setImageDrawable(getAccessibilityPreviewDrawable(resId, /* opacity= */ 100));
-            mPreview.invalidate();
+            mIllustrationPreference.setImageDrawable(mContext.getDrawable(
+                    AccessibilityUtil.isTouchExploreEnabled(mContext)
+                            ? R.drawable.accessibility_button_preview_three_finger
+                            : R.drawable.accessibility_button_preview_two_finger));
         } else {
-            mPreview.setImageDrawable(
+            mIllustrationPreference.setImageDrawable(
                     mContext.getDrawable(R.drawable.accessibility_button_navigation));
         }
     }
@@ -137,8 +132,10 @@
                     mContext, resId, opacity);
         } else {
             mAccessibilityPreviewDrawable.updateLayerDrawable(mContext, resId, opacity);
+            // Only change alpha (opacity) value did not change drawable id. It needs to force to
+            // redraw.
+            mAccessibilityPreviewDrawable.invalidateSelf();
         }
-
         return mAccessibilityPreviewDrawable;
     }
 }
diff --git a/tests/robotests/src/com/android/settings/accessibility/AccessibilityButtonPreviewPreferenceControllerTest.java b/tests/robotests/src/com/android/settings/accessibility/AccessibilityButtonPreviewPreferenceControllerTest.java
index 61808bd..05aba99 100644
--- a/tests/robotests/src/com/android/settings/accessibility/AccessibilityButtonPreviewPreferenceControllerTest.java
+++ b/tests/robotests/src/com/android/settings/accessibility/AccessibilityButtonPreviewPreferenceControllerTest.java
@@ -19,6 +19,8 @@
 import static android.provider.Settings.Secure.ACCESSIBILITY_BUTTON_MODE_FLOATING_MENU;
 import static android.provider.Settings.Secure.ACCESSIBILITY_BUTTON_MODE_NAVIGATION_BAR;
 
+import static com.android.settings.testutils.ImageTestUtils.drawableToBitmap;
+
 import static com.google.common.truth.Truth.assertThat;
 
 import static org.mockito.Mockito.verify;
@@ -28,12 +30,11 @@
 import android.content.Context;
 import android.graphics.drawable.Drawable;
 import android.provider.Settings;
-import android.widget.ImageView;
 
 import androidx.test.core.app.ApplicationProvider;
 
 import com.android.settings.R;
-import com.android.settings.testutils.ImageTestUtils;
+import com.android.settingslib.widget.IllustrationPreference;
 
 import org.junit.Before;
 import org.junit.Rule;
@@ -62,7 +63,7 @@
     public void setUp() {
         when(mContext.getContentResolver()).thenReturn(mContentResolver);
         mController = new AccessibilityButtonPreviewPreferenceController(mContext, "test_key");
-        mController.mPreview = new ImageView(mContext);
+        mController.mIllustrationPreference = new IllustrationPreference(mContext);
     }
 
     @Test
@@ -74,8 +75,8 @@
 
         final Drawable navigationBarDrawable = mContext.getDrawable(
                 R.drawable.accessibility_button_navigation);
-        assertThat(ImageTestUtils.drawableToBitmap(mController.mPreview.getDrawable()).sameAs(
-                ImageTestUtils.drawableToBitmap(navigationBarDrawable))).isTrue();
+        assertThat(drawableToBitmap(mController.mIllustrationPreference.getImageDrawable()).sameAs(
+                drawableToBitmap(navigationBarDrawable))).isTrue();
     }
 
     @Test
@@ -92,8 +93,9 @@
         final Drawable smallFloatingMenuWithTenOpacityDrawable =
                 AccessibilityLayerDrawable.createLayerDrawable(mContext,
                         R.drawable.accessibility_button_preview_small_floating_menu, 10);
-        assertThat(mController.mPreview.getDrawable().getConstantState()).isEqualTo(
-                smallFloatingMenuWithTenOpacityDrawable.getConstantState());
+        assertThat(
+                mController.mIllustrationPreference.getImageDrawable().getConstantState())
+                .isEqualTo(smallFloatingMenuWithTenOpacityDrawable.getConstantState());
     }
 
     @Test