From 38c59cfe4ab5689b88c7ac7e0d5cd4a3e4f8e0af Mon Sep 17 00:00:00 2001
From: Schneider Victor-tulias <victortulias@google.com>
Date: Thu, 3 Feb 2022 16:07:04 -0800
Subject: [PATCH] Update gesture nav tutorial with updated phone landscape
 layouts

- Updated layout files to support landscape mode on phones
- Updated All Set page to say "tablet" rather than "phone" on tablets
- Hiding feedback view during gestures for better visibility
- Renamed files and resources to say "tablet" rather than "foldable"
- Added custom layout logic for the mock hotseat on foldables
- Updated feedback view margins

Test: manual
Fixes: 215063763
Fixes: 206895841
Fixes: 219251891
Change-Id: I56f7f33dd0617bdeeca4863f7d5de0143376c8bf
---
 .../res/drawable/bg_sandbox_feedback.xml      |   3 +-
 .../gesture_tutorial_mock_hotseat.xml         |  80 +++
 .../gesture_tutorial_tablet_mock_hotseat.xml  | 123 ++++
 quickstep/res/layout/activity_allset.xml      |   7 +-
 ...gesture_tutorial_foldable_mock_hotseat.xml |  18 +-
 .../res/layout/gesture_tutorial_fragment.xml  |  41 +-
 .../gesture_tutorial_mock_conversation.xml    |  16 +-
 ...esture_tutorial_mock_conversation_list.xml | 557 +++++++++---------
 .../layout/gesture_tutorial_mock_webpage.xml  |  24 +-
 ...ure_tutorial_tablet_mock_conversation.xml} |  24 +-
 ...utorial_tablet_mock_conversation_list.xml} |  34 +-
 .../gesture_tutorial_tablet_mock_hotseat.xml  | 122 ++++
 ... gesture_tutorial_tablet_mock_taskbar.xml} |   0
 ... gesture_tutorial_tablet_mock_webpage.xml} |   0
 quickstep/res/values-land/dimens.xml          |  57 ++
 quickstep/res/values/dimens.xml               |  50 +-
 quickstep/res/values/strings.xml              |   4 +-
 quickstep/res/values/styles.xml               |  15 +-
 .../quickstep/interaction/AllSetActivity.java |   7 +
 .../BackGestureTutorialController.java        |   4 +-
 .../HomeGestureTutorialController.java        |   2 +-
 .../OverviewGestureTutorialController.java    |   2 +-
 .../SwipeUpGestureTutorialController.java     |   9 +
 .../interaction/TutorialController.java       |  61 +-
 .../interaction/TutorialFragment.java         |  29 +-
 .../interaction/TutorialStepIndicator.java    |  10 +-
 .../quickstep/util/RecentsOrientedState.java  |   9 +-
 27 files changed, 910 insertions(+), 398 deletions(-)
 create mode 100644 quickstep/res/layout-land/gesture_tutorial_mock_hotseat.xml
 create mode 100644 quickstep/res/layout-land/gesture_tutorial_tablet_mock_hotseat.xml
 rename quickstep/res/layout/{gesture_tutorial_foldable_mock_conversation.xml => gesture_tutorial_tablet_mock_conversation.xml} (93%)
 rename quickstep/res/layout/{gesture_tutorial_foldable_mock_conversation_list.xml => gesture_tutorial_tablet_mock_conversation_list.xml} (95%)
 create mode 100644 quickstep/res/layout/gesture_tutorial_tablet_mock_hotseat.xml
 rename quickstep/res/layout/{gesture_tutorial_foldable_mock_taskbar.xml => gesture_tutorial_tablet_mock_taskbar.xml} (100%)
 rename quickstep/res/layout/{gesture_tutorial_foldable_mock_webpage.xml => gesture_tutorial_tablet_mock_webpage.xml} (100%)

diff --git a/quickstep/res/drawable/bg_sandbox_feedback.xml b/quickstep/res/drawable/bg_sandbox_feedback.xml
index 83a3deada8..83d7e4396c 100644
--- a/quickstep/res/drawable/bg_sandbox_feedback.xml
+++ b/quickstep/res/drawable/bg_sandbox_feedback.xml
@@ -14,7 +14,8 @@
     limitations under the License.
 -->
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
     android:shape="rectangle">
   <corners android:radius="28dp"/>
-  <solid android:color="?android:attr/colorBackgroundFloating"/>
+  <solid android:color="?androidprv:attr/colorSurface"/>
 </shape>
diff --git a/quickstep/res/layout-land/gesture_tutorial_mock_hotseat.xml b/quickstep/res/layout-land/gesture_tutorial_mock_hotseat.xml
new file mode 100644
index 0000000000..20d2ecc59f
--- /dev/null
+++ b/quickstep/res/layout-land/gesture_tutorial_mock_hotseat.xml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+    Copyright (C) 2022 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.
+-->
+<androidx.constraintlayout.widget.ConstraintLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="wrap_content"
+    android:layout_height="match_parent"
+    android:paddingTop="26dp"
+    android:paddingBottom="26dp"
+    android:paddingStart="56dp"
+    android:paddingEnd="56dp">
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_1"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_1"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintVertical_chainStyle="spread_inside"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toTopOf="@id/hotseat_icon_2"
+        app:layout_constraintStart_toStartOf="parent"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_2"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_2"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toBottomOf="@id/hotseat_icon_1"
+        app:layout_constraintBottom_toTopOf="@id/hotseat_icon_3"
+        app:layout_constraintStart_toStartOf="parent"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_3"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_3"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toBottomOf="@id/hotseat_icon_2"
+        app:layout_constraintBottom_toTopOf="@id/hotseat_icon_4"
+        app:layout_constraintStart_toStartOf="parent"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_4"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_4"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toBottomOf="@id/hotseat_icon_3"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"/>
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/quickstep/res/layout-land/gesture_tutorial_tablet_mock_hotseat.xml b/quickstep/res/layout-land/gesture_tutorial_tablet_mock_hotseat.xml
new file mode 100644
index 0000000000..6877b89716
--- /dev/null
+++ b/quickstep/res/layout-land/gesture_tutorial_tablet_mock_hotseat.xml
@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2022 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.
+-->
+<androidx.constraintlayout.widget.ConstraintLayout
+    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="wrap_content"
+    android:paddingBottom="32dp"
+    android:paddingStart="@dimen/gesture_tutorial_hotseat_padding_start_end"
+    android:paddingEnd="@dimen/gesture_tutorial_hotseat_padding_start_end">
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_search_bar"
+        android:layout_width="200dp"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_search_height"
+
+        app:layout_constraintHorizontal_chainStyle="spread_inside"
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_search_corner_radius"
+        app:cardBackgroundColor="@color/mock_search_bar"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_1"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_1"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_1"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/hotseat_search_bar"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_2"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_2"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_2"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/hotseat_icon_1"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_3"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_3"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_3"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/hotseat_icon_2"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_4"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_4"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_1"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/hotseat_icon_3"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_5"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_5"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_4"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/hotseat_icon_4"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_6"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_6"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_2"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/hotseat_icon_5"
+        app:layout_constraintEnd_toEndOf="parent"/>
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/quickstep/res/layout/activity_allset.xml b/quickstep/res/layout/activity_allset.xml
index 9ad10dc54e..06dfa37263 100644
--- a/quickstep/res/layout/activity_allset.xml
+++ b/quickstep/res/layout/activity_allset.xml
@@ -60,7 +60,7 @@
 
             <TextView
                 android:id="@+id/title"
-                style="@style/TextAppearance.GestureTutorial.Feedback.Title"
+                style="@style/TextAppearance.GestureTutorial.Feedback.Title.AllSet"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="@dimen/allset_title_margin_top"
@@ -71,15 +71,14 @@
 
             <TextView
                 android:id="@+id/subtitle"
-                style="@style/TextAppearance.GestureTutorial.Feedback.Subtitle"
+                style="@style/TextAppearance.GestureTutorial.Feedback.Subtitle.AllSet"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="@dimen/allset_subtitle_margin_top"
                 app:layout_constraintTop_toBottomOf="@id/title"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintWidth_max="@dimen/allset_subtitle_width_max"
-                android:gravity="start"
-                android:text="@string/allset_description"/>
+                android:gravity="start"/>
 
             <androidx.constraintlayout.widget.Guideline
                 android:id="@+id/navigation_settings_guideline_bottom"
diff --git a/quickstep/res/layout/gesture_tutorial_foldable_mock_hotseat.xml b/quickstep/res/layout/gesture_tutorial_foldable_mock_hotseat.xml
index 5612666b69..027e4a05b0 100644
--- a/quickstep/res/layout/gesture_tutorial_foldable_mock_hotseat.xml
+++ b/quickstep/res/layout/gesture_tutorial_foldable_mock_hotseat.xml
@@ -1,12 +1,26 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2022 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.
+-->
 <androidx.constraintlayout.widget.ConstraintLayout
     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="wrap_content"
     android:paddingBottom="32dp"
-    android:paddingStart="170dp"
-    android:paddingEnd="170dp">
+    android:paddingStart="@dimen/gesture_tutorial_hotseat_padding_start_end"
+    android:paddingEnd="@dimen/gesture_tutorial_hotseat_padding_start_end">
 
     <androidx.cardview.widget.CardView
         android:id="@+id/hotseat_search_bar"
diff --git a/quickstep/res/layout/gesture_tutorial_fragment.xml b/quickstep/res/layout/gesture_tutorial_fragment.xml
index 08e6178bdb..b3ca297888 100644
--- a/quickstep/res/layout/gesture_tutorial_fragment.xml
+++ b/quickstep/res/layout/gesture_tutorial_fragment.xml
@@ -27,10 +27,8 @@
 
         <FrameLayout
             android:id="@+id/gesture_tutorial_fake_hotseat_view"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_centerHorizontal="true"
-            android:layout_alignParentBottom="true"/>
+            android:layout_width="@dimen/gesture_tutorial_hotseat_width"
+            android:layout_height="@dimen/gesture_tutorial_hotseat_height"/>
 
     </RelativeLayout>
 
@@ -102,7 +100,7 @@
         android:background="@drawable/gesture_tutorial_ripple"/>
 
     <include
-        layout="@layout/gesture_tutorial_foldable_mock_taskbar"
+        layout="@layout/gesture_tutorial_tablet_mock_taskbar"
         android:id="@+id/gesture_tutorial_fake_taskbar_view"
         android:layout_width="match_parent"
         android:layout_height="@dimen/gesture_tutorial_mock_taskbar_height"
@@ -121,33 +119,23 @@
         android:scaleType="fitXY"
         android:visibility="gone"/>
 
-    <ImageView
-        android:id="@+id/gesture_tutorial_finger_dot"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:src="@drawable/gesture_tutorial_finger_dot"
-        android:layout_centerHorizontal="true"
-        android:layout_centerVertical="true"
-        android:visibility="gone"/>
-
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/gesture_tutorial_fragment_feedback_view"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentTop="true"
         android:layout_centerHorizontal="true"
-        android:layout_marginTop="24dp"
         android:paddingTop="24dp"
         android:paddingBottom="16dp"
+        android:paddingStart="24dp"
+        android:paddingEnd="24dp"
         android:background="@drawable/bg_sandbox_feedback">
 
         <TextView
             android:id="@+id/gesture_tutorial_fragment_feedback_title"
             style="@style/TextAppearance.GestureTutorial.Feedback.Title"
-            android:layout_width="0dp"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginStart="24dp"
-            android:layout_marginEnd="24dp"
 
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
@@ -158,9 +146,7 @@
             style="@style/TextAppearance.GestureTutorial.Feedback.Subtitle"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginTop="24dp"
-            android:layout_marginStart="24dp"
-            android:layout_marginEnd="24dp"
+            android:layout_marginTop="16dp"
 
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
@@ -182,7 +168,6 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="32dp"
-            android:layout_marginEnd="16dp"
             android:paddingTop="16dp"
             android:paddingBottom="16dp"
             android:paddingStart="26dp"
@@ -201,11 +186,8 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="32dp"
-            android:layout_marginEnd="16dp"
             android:paddingTop="16dp"
             android:paddingBottom="16dp"
-            android:paddingStart="26dp"
-            android:paddingEnd="26dp"
             android:text="@string/gesture_tutorial_action_button_label_skip"
             android:background="?android:attr/selectableItemBackgroundBorderless"
 
@@ -214,4 +196,13 @@
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
+    <ImageView
+        android:id="@+id/gesture_tutorial_finger_dot"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:src="@drawable/gesture_tutorial_finger_dot"
+        android:layout_centerHorizontal="true"
+        android:layout_centerVertical="true"
+        android:visibility="gone"/>
+
 </com.android.quickstep.interaction.RootSandboxLayout>
\ No newline at end of file
diff --git a/quickstep/res/layout/gesture_tutorial_mock_conversation.xml b/quickstep/res/layout/gesture_tutorial_mock_conversation.xml
index e8d5d79a58..5550389e25 100644
--- a/quickstep/res/layout/gesture_tutorial_mock_conversation.xml
+++ b/quickstep/res/layout/gesture_tutorial_mock_conversation.xml
@@ -34,8 +34,8 @@
             android:layout_height="0dp"
             android:layout_marginTop="43dp"
             android:layout_marginBottom="22dp"
-            android:layout_marginStart="34dp"
-            android:layout_marginEnd="211dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_top_bar_margin_start"
+            android:layout_marginEnd="@dimen/gesture_tutorial_top_bar_margin_end"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="4dp"
@@ -84,7 +84,7 @@
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:background="@color/mock_conversation_background"
-        android:paddingBottom="66dp"
+        android:paddingBottom="@dimen/gesture_tutorial_conversation_bottom_padding"
 
         app:layout_constraintTop_toBottomOf="@id/top_bar"
         app:layout_constraintBottom_toBottomOf="parent"
@@ -108,6 +108,7 @@
                 android:layout_marginBottom="@dimen/gesture_tutorial_message_large_margin_bottom"
                 android:layout_marginStart="124dp"
                 android:layout_marginEnd="@dimen/gesture_tutorial_message_padding_end"
+                android:visibility="@integer/gesture_tutorial_extra_messages_visibility"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="18dp"
@@ -122,6 +123,7 @@
                 android:layout_height="@dimen/gesture_tutorial_message_icon_size"
                 android:layout_marginBottom="@dimen/gesture_tutorial_message_large_margin_bottom"
                 android:layout_marginStart="@dimen/gesture_tutorial_message_padding_start"
+                android:visibility="@integer/gesture_tutorial_extra_messages_visibility"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="@dimen/gesture_tutorial_message_icon_corner_radius"
@@ -135,6 +137,7 @@
                 android:layout_height="36dp"
                 android:layout_marginStart="17dp"
                 android:layout_marginEnd="112dp"
+                android:visibility="@integer/gesture_tutorial_extra_messages_visibility"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="18dp"
@@ -151,6 +154,7 @@
                 android:layout_marginBottom="@dimen/gesture_tutorial_message_small_margin_bottom"
                 android:layout_marginStart="280dp"
                 android:layout_marginEnd="@dimen/gesture_tutorial_message_padding_end"
+                android:visibility="@integer/gesture_tutorial_extra_messages_visibility"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="18dp"
@@ -164,7 +168,7 @@
                 android:layout_width="0dp"
                 android:layout_height="74dp"
                 android:layout_marginBottom="@dimen/gesture_tutorial_message_large_margin_bottom"
-                android:layout_marginStart="124dp"
+                android:layout_marginStart="@dimen/gesture_tutorial_message_margin_start"
                 android:layout_marginEnd="@dimen/gesture_tutorial_message_padding_end"
 
                 app:cardElevation="0dp"
@@ -192,7 +196,7 @@
                 android:layout_width="0dp"
                 android:layout_height="36dp"
                 android:layout_marginStart="17dp"
-                android:layout_marginEnd="144dp"
+                android:layout_marginEnd="@dimen/gesture_tutorial_reply_margin_end"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="18dp"
@@ -206,7 +210,7 @@
                 android:id="@+id/message_4"
                 android:layout_width="0dp"
                 android:layout_height="74dp"
-                android:layout_marginStart="124dp"
+                android:layout_marginStart="@dimen/gesture_tutorial_message_margin_start"
                 android:layout_marginEnd="@dimen/gesture_tutorial_message_padding_end"
 
                 app:cardElevation="0dp"
diff --git a/quickstep/res/layout/gesture_tutorial_mock_conversation_list.xml b/quickstep/res/layout/gesture_tutorial_mock_conversation_list.xml
index 364ad6d17d..a172ad3712 100644
--- a/quickstep/res/layout/gesture_tutorial_mock_conversation_list.xml
+++ b/quickstep/res/layout/gesture_tutorial_mock_conversation_list.xml
@@ -35,7 +35,7 @@
             android:layout_marginTop="43dp"
             android:layout_marginBottom="22dp"
             android:layout_marginStart="34dp"
-            android:layout_marginEnd="35dp"
+            android:layout_marginEnd="34dp"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="4dp"
@@ -51,337 +51,336 @@
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:background="@color/mock_list_background"
-        android:paddingBottom="66dp"
+        android:paddingTop="@dimen/gesture_tutorial_conversation_list_padding_top"
+        android:paddingStart="26dp"
 
         app:layout_constraintTop_toBottomOf="@id/top_bar"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent">
 
-        <androidx.constraintlayout.widget.ConstraintLayout
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:paddingTop="@dimen/gesture_tutorial_conversation_list_padding_top"
-            android:paddingStart="26dp"
-            android:paddingBottom="14dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_icon_1"
+            android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
 
+            app:cardElevation="0dp"
+            app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
+            app:cardBackgroundColor="@color/mock_list_profile_icon"
             app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintBottom_toTopOf="@id/mock_button">
+            app:layout_constraintStart_toStartOf="parent"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_icon_1"
-                android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_1"
+            android:layout_width="0dp"
+            android:layout_height="18dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="@dimen/gesture_tutorial_conversation_line_1_margin_end"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
-                app:cardBackgroundColor="@color/mock_list_profile_icon"
-                app:layout_constraintTop_toTopOf="parent"
-                app:layout_constraintStart_toStartOf="parent"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintTop_toTopOf="@id/conversation_icon_1"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_1"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toTopOf="@id/conversation_line_2"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_1"
-                android:layout_width="0dp"
-                android:layout_height="18dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="217dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_2"
+            android:layout_width="0dp"
+            android:layout_height="16dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="@dimen/gesture_tutorial_conversation_line_2_margin_end"
+            android:layout_marginTop="4dp"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintVertical_chainStyle="packed"
-                app:layout_constraintTop_toTopOf="@id/conversation_icon_1"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_1"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toTopOf="@id/conversation_line_2"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintTop_toBottomOf="@id/conversation_line_1"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_1"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toBottomOf="@id/conversation_icon_1"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_2"
-                android:layout_width="0dp"
-                android:layout_height="16dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="142dp"
-                android:layout_marginTop="4dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_icon_2"
+            android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_marginTop="32dp"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintTop_toBottomOf="@id/conversation_line_1"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_1"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toBottomOf="@id/conversation_icon_1"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
+            app:cardBackgroundColor="@color/mock_list_profile_icon"
+            app:layout_constraintTop_toBottomOf="@id/conversation_icon_1"
+            app:layout_constraintStart_toStartOf="parent"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_icon_2"
-                android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_marginTop="32dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_3"
+            android:layout_width="0dp"
+            android:layout_height="18dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="@dimen/gesture_tutorial_conversation_line_3_margin_end"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
-                app:cardBackgroundColor="@color/mock_list_profile_icon"
-                app:layout_constraintTop_toBottomOf="@id/conversation_icon_1"
-                app:layout_constraintStart_toStartOf="parent"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintTop_toTopOf="@id/conversation_icon_2"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_2"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toTopOf="@id/conversation_line_4"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_3"
-                android:layout_width="0dp"
-                android:layout_height="18dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="190dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_4"
+            android:layout_width="0dp"
+            android:layout_height="16dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="@dimen/gesture_tutorial_conversation_line_4_margin_end"
+            android:layout_marginTop="4dp"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintVertical_chainStyle="packed"
-                app:layout_constraintTop_toTopOf="@id/conversation_icon_2"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_2"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toTopOf="@id/conversation_line_4"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintTop_toBottomOf="@id/conversation_line_3"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_2"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toBottomOf="@id/conversation_icon_2"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_4"
-                android:layout_width="0dp"
-                android:layout_height="16dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="171dp"
-                android:layout_marginTop="4dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_icon_3"
+            android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_marginTop="32dp"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintTop_toBottomOf="@id/conversation_line_3"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_2"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toBottomOf="@id/conversation_icon_2"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
+            app:cardBackgroundColor="@color/mock_list_profile_icon"
+            app:layout_constraintTop_toBottomOf="@id/conversation_icon_2"
+            app:layout_constraintStart_toStartOf="parent"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_icon_3"
-                android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_marginTop="32dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_5"
+            android:layout_width="0dp"
+            android:layout_height="18dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="@dimen/gesture_tutorial_conversation_line_5_margin_end"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
-                app:cardBackgroundColor="@color/mock_list_profile_icon"
-                app:layout_constraintTop_toBottomOf="@id/conversation_icon_2"
-                app:layout_constraintStart_toStartOf="parent"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintTop_toTopOf="@id/conversation_icon_3"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_3"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toTopOf="@id/conversation_line_6"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_5"
-                android:layout_width="0dp"
-                android:layout_height="18dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="198dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_6"
+            android:layout_width="0dp"
+            android:layout_height="16dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="@dimen/gesture_tutorial_conversation_line_6_margin_end"
+            android:layout_marginTop="4dp"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintVertical_chainStyle="packed"
-                app:layout_constraintTop_toTopOf="@id/conversation_icon_3"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_3"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toTopOf="@id/conversation_line_6"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintTop_toBottomOf="@id/conversation_line_5"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_3"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toBottomOf="@id/conversation_icon_3"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_6"
-                android:layout_width="0dp"
-                android:layout_height="16dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="79dp"
-                android:layout_marginTop="4dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_icon_4"
+            android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_marginTop="32dp"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintTop_toBottomOf="@id/conversation_line_5"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_3"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toBottomOf="@id/conversation_icon_3"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
+            app:cardBackgroundColor="@color/mock_list_profile_icon"
+            app:layout_constraintTop_toBottomOf="@id/conversation_icon_3"
+            app:layout_constraintStart_toStartOf="parent"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_icon_4"
-                android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_marginTop="32dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_7"
+            android:layout_width="0dp"
+            android:layout_height="18dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="@dimen/gesture_tutorial_conversation_line_7_margin_end"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
-                app:cardBackgroundColor="@color/mock_list_profile_icon"
-                app:layout_constraintTop_toBottomOf="@id/conversation_icon_3"
-                app:layout_constraintStart_toStartOf="parent"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintTop_toTopOf="@id/conversation_icon_4"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_4"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toTopOf="@id/conversation_line_8"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_7"
-                android:layout_width="0dp"
-                android:layout_height="18dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="174dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_8"
+            android:layout_width="0dp"
+            android:layout_height="16dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="@dimen/gesture_tutorial_conversation_line_8_margin_end"
+            android:layout_marginTop="4dp"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintVertical_chainStyle="packed"
-                app:layout_constraintTop_toTopOf="@id/conversation_icon_4"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_4"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toTopOf="@id/conversation_line_8"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintTop_toBottomOf="@id/conversation_line_7"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_4"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toBottomOf="@id/conversation_icon_4"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_8"
-                android:layout_width="0dp"
-                android:layout_height="16dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="117dp"
-                android:layout_marginTop="4dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_icon_5"
+            android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_marginTop="32dp"
+            android:visibility="@integer/gesture_tutorial_extra_conversations_visibility"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintTop_toBottomOf="@id/conversation_line_7"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_4"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toBottomOf="@id/conversation_icon_4"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
+            app:cardBackgroundColor="@color/mock_list_profile_icon"
+            app:layout_constraintTop_toBottomOf="@id/conversation_icon_4"
+            app:layout_constraintStart_toStartOf="parent"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_icon_5"
-                android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_marginTop="32dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_9"
+            android:layout_width="0dp"
+            android:layout_height="18dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="244dp"
+            android:visibility="@integer/gesture_tutorial_extra_conversations_visibility"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
-                app:cardBackgroundColor="@color/mock_list_profile_icon"
-                app:layout_constraintTop_toBottomOf="@id/conversation_icon_4"
-                app:layout_constraintStart_toStartOf="parent"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintTop_toTopOf="@id/conversation_icon_5"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_5"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toTopOf="@id/conversation_line_10"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_9"
-                android:layout_width="0dp"
-                android:layout_height="18dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="244dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_10"
+            android:layout_width="0dp"
+            android:layout_height="16dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="143dp"
+            android:layout_marginTop="4dp"
+            android:visibility="@integer/gesture_tutorial_extra_conversations_visibility"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintVertical_chainStyle="packed"
-                app:layout_constraintTop_toTopOf="@id/conversation_icon_5"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_5"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toTopOf="@id/conversation_line_10"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintTop_toBottomOf="@id/conversation_line_9"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_5"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toBottomOf="@id/conversation_icon_5"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_10"
-                android:layout_width="0dp"
-                android:layout_height="16dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="143dp"
-                android:layout_marginTop="4dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_icon_6"
+            android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_marginTop="32dp"
+            android:visibility="@integer/gesture_tutorial_extra_conversations_visibility"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintTop_toBottomOf="@id/conversation_line_9"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_5"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toBottomOf="@id/conversation_icon_5"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
+            app:cardBackgroundColor="@color/mock_list_profile_icon"
+            app:layout_constraintTop_toBottomOf="@id/conversation_icon_5"
+            app:layout_constraintStart_toStartOf="parent"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_icon_6"
-                android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_marginTop="32dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_11"
+            android:layout_width="0dp"
+            android:layout_height="18dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="177dp"
+            android:visibility="@integer/gesture_tutorial_extra_conversations_visibility"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
-                app:cardBackgroundColor="@color/mock_list_profile_icon"
-                app:layout_constraintTop_toBottomOf="@id/conversation_icon_5"
-                app:layout_constraintStart_toStartOf="parent"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintTop_toTopOf="@id/conversation_icon_6"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_6"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toTopOf="@id/conversation_line_12"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_11"
-                android:layout_width="0dp"
-                android:layout_height="18dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="177dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_12"
+            android:layout_width="0dp"
+            android:layout_height="16dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="117dp"
+            android:layout_marginTop="4dp"
+            android:visibility="@integer/gesture_tutorial_extra_conversations_visibility"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintVertical_chainStyle="packed"
-                app:layout_constraintTop_toTopOf="@id/conversation_icon_6"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_6"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toTopOf="@id/conversation_line_12"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintTop_toBottomOf="@id/conversation_line_11"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_6"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toBottomOf="@id/conversation_icon_6"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_12"
-                android:layout_width="0dp"
-                android:layout_height="16dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="117dp"
-                android:layout_marginTop="4dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_icon_7"
+            android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
+            android:layout_marginTop="32dp"
+            android:visibility="@integer/gesture_tutorial_extra_conversations_visibility"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintTop_toBottomOf="@id/conversation_line_11"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_6"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toBottomOf="@id/conversation_icon_6"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
+            app:cardBackgroundColor="@color/mock_list_profile_icon"
+            app:layout_constraintTop_toBottomOf="@id/conversation_icon_6"
+            app:layout_constraintStart_toStartOf="parent"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_icon_7"
-                android:layout_width="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_height="@dimen/gesture_tutorial_conversation_icon_size"
-                android:layout_marginTop="32dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_13"
+            android:layout_width="0dp"
+            android:layout_height="18dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="189dp"
+            android:visibility="@integer/gesture_tutorial_extra_conversations_visibility"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="@dimen/gesture_tutorial_conversation_icon_corner_radius"
-                app:cardBackgroundColor="@color/mock_list_profile_icon"
-                app:layout_constraintTop_toBottomOf="@id/conversation_icon_6"
-                app:layout_constraintStart_toStartOf="parent"/>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintTop_toTopOf="@id/conversation_icon_7"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_7"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toTopOf="@id/conversation_line_14"/>
 
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_13"
-                android:layout_width="0dp"
-                android:layout_height="18dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="189dp"
+        <androidx.cardview.widget.CardView
+            android:id="@+id/conversation_line_14"
+            android:layout_width="0dp"
+            android:layout_height="16dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
+            android:layout_marginEnd="166dp"
+            android:layout_marginTop="4dp"
+            android:visibility="@integer/gesture_tutorial_extra_conversations_visibility"
 
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintVertical_chainStyle="packed"
-                app:layout_constraintTop_toTopOf="@id/conversation_icon_7"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_7"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toTopOf="@id/conversation_line_14"/>
-
-            <androidx.cardview.widget.CardView
-                android:id="@+id/conversation_line_14"
-                android:layout_width="0dp"
-                android:layout_height="16dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="166dp"
-                android:layout_marginTop="4dp"
-
-                app:cardElevation="0dp"
-                app:cardCornerRadius="4dp"
-                app:cardBackgroundColor="@color/mock_list_preview_message"
-                app:layout_constraintTop_toBottomOf="@id/conversation_line_13"
-                app:layout_constraintStart_toEndOf="@id/conversation_icon_7"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintBottom_toBottomOf="@id/conversation_icon_7"/>
-
-        </androidx.constraintlayout.widget.ConstraintLayout>
+            app:cardElevation="0dp"
+            app:cardCornerRadius="4dp"
+            app:cardBackgroundColor="@color/mock_list_preview_message"
+            app:layout_constraintTop_toBottomOf="@id/conversation_line_13"
+            app:layout_constraintStart_toEndOf="@id/conversation_icon_7"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toBottomOf="@id/conversation_icon_7"/>
 
         <androidx.cardview.widget.CardView
             android:id="@+id/mock_button"
             android:layout_width="149dp"
             android:layout_height="56dp"
-            android:layout_marginEnd="24dp"
+            android:layout_marginEnd="@dimen/gesture_tutorial_mock_button_margin_end"
+            android:layout_marginBottom="@dimen/gesture_tutorial_mock_button_margin_bottom"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="164dp"
diff --git a/quickstep/res/layout/gesture_tutorial_mock_webpage.xml b/quickstep/res/layout/gesture_tutorial_mock_webpage.xml
index bb20968d8f..0b1b40d1a0 100644
--- a/quickstep/res/layout/gesture_tutorial_mock_webpage.xml
+++ b/quickstep/res/layout/gesture_tutorial_mock_webpage.xml
@@ -34,8 +34,8 @@
             android:layout_height="0dp"
             android:layout_marginTop="48dp"
             android:layout_marginBottom="16dp"
-            android:layout_marginStart="16dp"
-            android:layout_marginEnd="16dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_webpage_url_margin_start_end"
+            android:layout_marginEnd="@dimen/gesture_tutorial_webpage_url_margin_start_end"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="100dp"
@@ -63,7 +63,7 @@
             android:layout_height="0dp"
             android:layout_marginTop="22dp"
             android:layout_marginBottom="22dp"
-            android:layout_marginStart="24dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_webpage_top_bar_button_margin_start"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="8dp"
@@ -78,8 +78,8 @@
             android:layout_height="0dp"
             android:layout_marginTop="28dp"
             android:layout_marginBottom="28dp"
-            android:layout_marginStart="97dp"
-            android:layout_marginEnd="97dp"
+            android:layout_marginStart="@dimen/gesture_tutorial_webpage_top_bar_margin_start"
+            android:layout_marginEnd="@dimen/gesture_tutorial_webpage_top_bar_margin_end"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="2dp"
@@ -107,7 +107,7 @@
             android:id="@+id/mock_line_1"
             android:layout_width="0dp"
             android:layout_height="@dimen/gesture_tutorial_webpage_large_line_height"
-            android:layout_marginEnd="126dp"
+            android:layout_marginEnd="@dimen/gesture_tutorial_webpage_line_1_margin_end"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="@dimen/gesture_tutorial_webpage_small_corner_radius"
@@ -121,7 +121,7 @@
             android:layout_width="0dp"
             android:layout_height="@dimen/gesture_tutorial_webpage_large_line_height"
             android:layout_marginTop="@dimen/gesture_tutorial_webpage_small_margin_top"
-            android:layout_marginEnd="64dp"
+            android:layout_marginEnd="@dimen/gesture_tutorial_webpage_line_2_margin_end"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="@dimen/gesture_tutorial_webpage_small_corner_radius"
@@ -135,7 +135,7 @@
             android:layout_width="0dp"
             android:layout_height="@dimen/gesture_tutorial_webpage_large_line_height"
             android:layout_marginTop="@dimen/gesture_tutorial_webpage_small_margin_top"
-            android:layout_marginEnd="151dp"
+            android:layout_marginEnd="@dimen/gesture_tutorial_webpage_line_3_margin_end"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="@dimen/gesture_tutorial_webpage_small_corner_radius"
@@ -174,7 +174,7 @@
             android:layout_width="0dp"
             android:layout_height="240dp"
             android:layout_marginTop="@dimen/gesture_tutorial_webpage_large_margin_top"
-            android:layout_marginEnd="24dp"
+            android:layout_marginEnd="@dimen/gesture_tutorial_webpage_block_margin_end"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="@dimen/gesture_tutorial_webpage_large_corner_radius"
@@ -189,6 +189,7 @@
             android:layout_height="@dimen/gesture_tutorial_webpage_small_line_height"
             android:layout_marginTop="@dimen/gesture_tutorial_webpage_large_margin_top"
             android:layout_marginEnd="52dp"
+            android:visibility="@integer/gesture_tutorial_webpage_extra_lines_visibility"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="@dimen/gesture_tutorial_webpage_medium_corner_radius"
@@ -203,6 +204,7 @@
             android:layout_height="@dimen/gesture_tutorial_webpage_small_line_height"
             android:layout_marginTop="@dimen/gesture_tutorial_webpage_small_margin_top"
             android:layout_marginEnd="41dp"
+            android:visibility="@integer/gesture_tutorial_webpage_extra_lines_visibility"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="@dimen/gesture_tutorial_webpage_medium_corner_radius"
@@ -217,6 +219,7 @@
             android:layout_height="@dimen/gesture_tutorial_webpage_small_line_height"
             android:layout_marginTop="@dimen/gesture_tutorial_webpage_small_margin_top"
             android:layout_marginEnd="71dp"
+            android:visibility="@integer/gesture_tutorial_webpage_extra_lines_visibility"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="@dimen/gesture_tutorial_webpage_medium_corner_radius"
@@ -231,6 +234,7 @@
             android:layout_height="@dimen/gesture_tutorial_webpage_small_line_height"
             android:layout_marginTop="@dimen/gesture_tutorial_webpage_small_margin_top"
             android:layout_marginEnd="198dp"
+            android:visibility="@integer/gesture_tutorial_webpage_extra_lines_visibility"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="@dimen/gesture_tutorial_webpage_medium_corner_radius"
@@ -245,6 +249,7 @@
             android:layout_height="@dimen/gesture_tutorial_webpage_small_line_height"
             android:layout_marginTop="@dimen/gesture_tutorial_webpage_large_margin_top"
             android:layout_marginEnd="64dp"
+            android:visibility="@integer/gesture_tutorial_webpage_extra_lines_visibility"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="@dimen/gesture_tutorial_webpage_medium_corner_radius"
@@ -258,6 +263,7 @@
             android:layout_height="@dimen/gesture_tutorial_webpage_small_line_height"
             android:layout_marginTop="@dimen/gesture_tutorial_webpage_small_margin_top"
             android:layout_marginEnd="71dp"
+            android:visibility="@integer/gesture_tutorial_webpage_extra_lines_visibility"
 
             app:cardElevation="0dp"
             app:cardCornerRadius="@dimen/gesture_tutorial_webpage_medium_corner_radius"
diff --git a/quickstep/res/layout/gesture_tutorial_foldable_mock_conversation.xml b/quickstep/res/layout/gesture_tutorial_tablet_mock_conversation.xml
similarity index 93%
rename from quickstep/res/layout/gesture_tutorial_foldable_mock_conversation.xml
rename to quickstep/res/layout/gesture_tutorial_tablet_mock_conversation.xml
index b0cc00ba53..c8cf8c3cf2 100644
--- a/quickstep/res/layout/gesture_tutorial_foldable_mock_conversation.xml
+++ b/quickstep/res/layout/gesture_tutorial_tablet_mock_conversation.xml
@@ -106,8 +106,8 @@
                 android:layout_width="0dp"
                 android:layout_height="112dp"
                 android:layout_marginBottom="@dimen/gesture_tutorial_message_large_margin_bottom"
-                android:layout_marginStart="445dp"
-                android:layout_marginEnd="@dimen/gesture_tutorial_foldable_message_padding_start_end"
+                android:layout_marginStart="@dimen/gesture_tutorial_tablet_message_1_margin"
+                android:layout_marginEnd="@dimen/gesture_tutorial_tablet_message_padding_start_end"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="18dp"
@@ -121,7 +121,7 @@
                 android:layout_width="@dimen/gesture_tutorial_message_icon_size"
                 android:layout_height="@dimen/gesture_tutorial_message_icon_size"
                 android:layout_marginBottom="@dimen/gesture_tutorial_message_large_margin_bottom"
-                android:layout_marginStart="@dimen/gesture_tutorial_foldable_message_padding_start_end"
+                android:layout_marginStart="@dimen/gesture_tutorial_tablet_message_padding_start_end"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="@dimen/gesture_tutorial_message_icon_corner_radius"
@@ -134,7 +134,7 @@
                 android:layout_width="0dp"
                 android:layout_height="36dp"
                 android:layout_marginStart="17dp"
-                android:layout_marginEnd="441dp"
+                android:layout_marginEnd="@dimen/gesture_tutorial_tablet_reply_1_margin"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="18dp"
@@ -149,8 +149,8 @@
                 android:layout_width="0dp"
                 android:layout_height="36dp"
                 android:layout_marginBottom="@dimen/gesture_tutorial_message_small_margin_bottom"
-                android:layout_marginStart="601dp"
-                android:layout_marginEnd="@dimen/gesture_tutorial_foldable_message_padding_start_end"
+                android:layout_marginStart="@dimen/gesture_tutorial_tablet_message_2_margin"
+                android:layout_marginEnd="@dimen/gesture_tutorial_tablet_message_padding_start_end"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="18dp"
@@ -164,8 +164,8 @@
                 android:layout_width="0dp"
                 android:layout_height="74dp"
                 android:layout_marginBottom="@dimen/gesture_tutorial_message_large_margin_bottom"
-                android:layout_marginStart="445dp"
-                android:layout_marginEnd="@dimen/gesture_tutorial_foldable_message_padding_start_end"
+                android:layout_marginStart="@dimen/gesture_tutorial_tablet_message_3_margin"
+                android:layout_marginEnd="@dimen/gesture_tutorial_tablet_message_padding_start_end"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="18dp"
@@ -179,7 +179,7 @@
                 android:layout_width="@dimen/gesture_tutorial_message_icon_size"
                 android:layout_height="@dimen/gesture_tutorial_message_icon_size"
                 android:layout_marginBottom="32dp"
-                android:layout_marginStart="@dimen/gesture_tutorial_foldable_message_padding_start_end"
+                android:layout_marginStart="@dimen/gesture_tutorial_tablet_message_padding_start_end"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="@dimen/gesture_tutorial_message_icon_corner_radius"
@@ -192,7 +192,7 @@
                 android:layout_width="0dp"
                 android:layout_height="36dp"
                 android:layout_marginStart="17dp"
-                android:layout_marginEnd="473dp"
+                android:layout_marginEnd="@dimen/gesture_tutorial_tablet_reply_2_margin"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="18dp"
@@ -206,8 +206,8 @@
                 android:id="@+id/message_4"
                 android:layout_width="0dp"
                 android:layout_height="74dp"
-                android:layout_marginStart="445dp"
-                android:layout_marginEnd="@dimen/gesture_tutorial_foldable_message_padding_start_end"
+                android:layout_marginStart="345dp"
+                android:layout_marginEnd="@dimen/gesture_tutorial_tablet_message_padding_start_end"
 
                 app:cardElevation="0dp"
                 app:cardCornerRadius="18dp"
diff --git a/quickstep/res/layout/gesture_tutorial_foldable_mock_conversation_list.xml b/quickstep/res/layout/gesture_tutorial_tablet_mock_conversation_list.xml
similarity index 95%
rename from quickstep/res/layout/gesture_tutorial_foldable_mock_conversation_list.xml
rename to quickstep/res/layout/gesture_tutorial_tablet_mock_conversation_list.xml
index e5cd9bce1e..0fb0677673 100644
--- a/quickstep/res/layout/gesture_tutorial_foldable_mock_conversation_list.xml
+++ b/quickstep/res/layout/gesture_tutorial_tablet_mock_conversation_list.xml
@@ -67,7 +67,7 @@
             app:layout_constraintTop_toTopOf="parent"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toStartOf="@id/mock_button">
+            app:layout_constraintEnd_toEndOf="parent">
 
             <androidx.cardview.widget.CardView
                 android:id="@+id/conversation_icon_1"
@@ -189,7 +189,7 @@
                 android:layout_width="0dp"
                 android:layout_height="16dp"
                 android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="15dp"
+                android:layout_marginEnd="@dimen/gesture_tutorial_tablet_conversation_line_6_margin_end"
                 android:layout_marginTop="4dp"
 
                 app:cardElevation="0dp"
@@ -233,7 +233,7 @@
                 android:layout_width="0dp"
                 android:layout_height="16dp"
                 android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="72dp"
+                android:layout_marginEnd="@dimen/gesture_tutorial_tablet_conversation_line_8_margin_end"
                 android:layout_marginTop="4dp"
 
                 app:cardElevation="0dp"
@@ -277,7 +277,7 @@
                 android:layout_width="0dp"
                 android:layout_height="16dp"
                 android:layout_marginStart="@dimen/gesture_tutorial_conversation_line_padding_start"
-                android:layout_marginEnd="111dp"
+                android:layout_marginEnd="@dimen/gesture_tutorial_tablet_conversation_line_10_margin_end"
                 android:layout_marginTop="4dp"
 
                 app:cardElevation="0dp"
@@ -376,21 +376,21 @@
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintBottom_toBottomOf="@id/conversation_icon_7"/>
 
+            <androidx.cardview.widget.CardView
+                android:id="@+id/mock_button"
+                android:layout_width="149dp"
+                android:layout_height="56dp"
+                android:layout_marginEnd="126dp"
+                android:layout_marginBottom="24dp"
+
+                app:cardElevation="0dp"
+                app:cardCornerRadius="164dp"
+                app:cardBackgroundColor="@color/mock_list_button"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"/>
+
         </androidx.constraintlayout.widget.ConstraintLayout>
 
-        <androidx.cardview.widget.CardView
-            android:id="@+id/mock_button"
-            android:layout_width="149dp"
-            android:layout_height="56dp"
-            android:layout_marginEnd="126dp"
-            android:layout_marginBottom="24dp"
-
-            app:cardElevation="0dp"
-            app:cardCornerRadius="164dp"
-            app:cardBackgroundColor="@color/mock_list_button"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"/>
-
     </androidx.constraintlayout.widget.ConstraintLayout>
 
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/quickstep/res/layout/gesture_tutorial_tablet_mock_hotseat.xml b/quickstep/res/layout/gesture_tutorial_tablet_mock_hotseat.xml
new file mode 100644
index 0000000000..027e4a05b0
--- /dev/null
+++ b/quickstep/res/layout/gesture_tutorial_tablet_mock_hotseat.xml
@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2022 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.
+-->
+<androidx.constraintlayout.widget.ConstraintLayout
+    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="wrap_content"
+    android:paddingBottom="32dp"
+    android:paddingStart="@dimen/gesture_tutorial_hotseat_padding_start_end"
+    android:paddingEnd="@dimen/gesture_tutorial_hotseat_padding_start_end">
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_search_bar"
+        android:layout_width="0dp"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_search_height"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_search_corner_radius"
+        app:cardBackgroundColor="@color/mock_search_bar"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_1"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_marginTop="@dimen/gesture_tutorial_hotseat_icon_search_margin"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_1"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintHorizontal_chainStyle="spread_inside"
+        app:layout_constraintTop_toBottomOf="@id/hotseat_search_bar"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_2"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_2"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_marginTop="@dimen/gesture_tutorial_hotseat_icon_search_margin"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_2"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toBottomOf="@id/hotseat_search_bar"
+        app:layout_constraintStart_toEndOf="@id/hotseat_icon_1"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_3"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_3"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_marginTop="@dimen/gesture_tutorial_hotseat_icon_search_margin"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_3"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toBottomOf="@id/hotseat_search_bar"
+        app:layout_constraintStart_toEndOf="@id/hotseat_icon_2"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_4"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_4"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_marginTop="@dimen/gesture_tutorial_hotseat_icon_search_margin"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_1"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toBottomOf="@id/hotseat_search_bar"
+        app:layout_constraintStart_toEndOf="@id/hotseat_icon_3"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_5"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_5"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_marginTop="@dimen/gesture_tutorial_hotseat_icon_search_margin"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_4"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toBottomOf="@id/hotseat_search_bar"
+        app:layout_constraintStart_toEndOf="@id/hotseat_icon_4"
+        app:layout_constraintEnd_toStartOf="@id/hotseat_icon_6"/>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/hotseat_icon_6"
+        android:layout_width="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_height="@dimen/gesture_tutorial_hotseat_icon_size"
+        android:layout_marginTop="@dimen/gesture_tutorial_hotseat_icon_search_margin"
+
+        app:cardElevation="0dp"
+        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
+        app:cardBackgroundColor="@color/mock_app_icon_2"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toBottomOf="@id/hotseat_search_bar"
+        app:layout_constraintStart_toEndOf="@id/hotseat_icon_5"
+        app:layout_constraintEnd_toEndOf="parent"/>
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/quickstep/res/layout/gesture_tutorial_foldable_mock_taskbar.xml b/quickstep/res/layout/gesture_tutorial_tablet_mock_taskbar.xml
similarity index 100%
rename from quickstep/res/layout/gesture_tutorial_foldable_mock_taskbar.xml
rename to quickstep/res/layout/gesture_tutorial_tablet_mock_taskbar.xml
diff --git a/quickstep/res/layout/gesture_tutorial_foldable_mock_webpage.xml b/quickstep/res/layout/gesture_tutorial_tablet_mock_webpage.xml
similarity index 100%
rename from quickstep/res/layout/gesture_tutorial_foldable_mock_webpage.xml
rename to quickstep/res/layout/gesture_tutorial_tablet_mock_webpage.xml
diff --git a/quickstep/res/values-land/dimens.xml b/quickstep/res/values-land/dimens.xml
index 668aea2c9e..f233bde73a 100644
--- a/quickstep/res/values-land/dimens.xml
+++ b/quickstep/res/values-land/dimens.xml
@@ -16,4 +16,61 @@
 -->
 <resources>
     <dimen name="overview_task_margin">8dp</dimen>
+
+    <!-- Tips Gesture Tutorial -->
+    <dimen name="gesture_tutorial_feedback_margin_start_end">126dp</dimen>
+    <dimen name="gesture_tutorial_feedback_margin_top">24dp</dimen>
+
+    <!-- Gesture Tutorial mock conversations -->
+    <dimen name="gesture_tutorial_message_padding_start">42dp</dimen>
+    <dimen name="gesture_tutorial_message_padding_end">60dp</dimen>
+    <dimen name="gesture_tutorial_top_bar_margin_start">42dp</dimen>
+    <dimen name="gesture_tutorial_top_bar_margin_end">683dp</dimen>
+    <dimen name="gesture_tutorial_top_bar_button_margin_end">42dp</dimen>
+    <dimen name="gesture_tutorial_conversation_bottom_padding">35dp</dimen>
+    <integer name="gesture_tutorial_extra_messages_visibility">2</integer> <!-- GONE -->
+    <dimen name="gesture_tutorial_message_margin_start">505dp</dimen>
+    <dimen name="gesture_tutorial_reply_margin_end">462dp</dimen>
+    <dimen name="gesture_tutorial_input_margin_start">103dp</dimen>
+    <dimen name="gesture_tutorial_input_margin_end">103dp</dimen>
+    <dimen name="gesture_tutorial_tablet_message_1_margin">345dp</dimen>
+    <dimen name="gesture_tutorial_tablet_reply_1_margin">341dp</dimen>
+    <dimen name="gesture_tutorial_tablet_message_2_margin">501dp</dimen>
+    <dimen name="gesture_tutorial_tablet_message_3_margin">345dp</dimen>
+    <dimen name="gesture_tutorial_tablet_reply_2_margin">373dp</dimen>
+
+    <!-- Gesture Tutorial mock conversation lists -->
+    <dimen name="gesture_tutorial_conversation_line_1_margin_end">607dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_2_margin_end">460dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_3_margin_end">554dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_4_margin_end">517dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_5_margin_end">570dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_6_margin_end">336dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_7_margin_end">523dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_8_margin_end">500dp</dimen>
+    <dimen name="gesture_tutorial_tablet_conversation_line_6_margin_end">15dp</dimen>
+    <dimen name="gesture_tutorial_tablet_conversation_line_8_margin_end">72dp</dimen>
+    <dimen name="gesture_tutorial_tablet_conversation_line_10_margin_end">111dp</dimen>
+    <integer name="gesture_tutorial_extra_conversations_visibility">2</integer> <!-- GONE -->
+    <dimen name="gesture_tutorial_mock_button_margin_end">34dp</dimen>
+    <dimen name="gesture_tutorial_mock_button_margin_bottom">42dp</dimen>
+
+    <!-- Gesture Tutorial mock hotseats -->
+    <dimen name="gesture_tutorial_hotseat_width">-2px</dimen> <!-- wrap_content -->
+    <dimen name="gesture_tutorial_hotseat_height">-1px</dimen> <!-- match_parent -->
+    <dimen name="gesture_tutorial_hotseat_padding_start_end">170dp</dimen>
+
+    <!-- Gesture Tutorial mock webpages -->
+    <dimen name="gesture_tutorial_webpage_url_margin_start_end">24dp</dimen>
+    <dimen name="gesture_tutorial_webpage_top_bar_button_margin_start">48dp</dimen>
+    <dimen name="gesture_tutorial_webpage_top_bar_margin_start">121dp</dimen>
+    <dimen name="gesture_tutorial_webpage_top_bar_margin_end">355dp</dimen>
+    <dimen name="gesture_tutorial_webpage_line_1_margin_end">355dp</dimen>
+    <dimen name="gesture_tutorial_webpage_line_2_margin_end">208dp</dimen>
+    <dimen name="gesture_tutorial_webpage_line_3_margin_end">439dp</dimen>
+    <dimen name="gesture_tutorial_webpage_block_margin_end">311dp</dimen>
+    <integer name="gesture_tutorial_webpage_extra_lines_visibility">2</integer> <!-- GONE -->
+
+    <!-- Gesture Tutorial mock taskbar -->
+    <dimen name="gesture_tutorial_taskbar_padding_start_end">218dp</dimen>
 </resources>
\ No newline at end of file
diff --git a/quickstep/res/values/dimens.xml b/quickstep/res/values/dimens.xml
index 926e10c8b7..de6768909c 100644
--- a/quickstep/res/values/dimens.xml
+++ b/quickstep/res/values/dimens.xml
@@ -110,8 +110,10 @@
     <dimen name="gestures_overscroll_finish_threshold">136dp</dimen>
 
     <!-- Tips Gesture Tutorial -->
-    <dimen name="gesture_tutorial_feedback_margin_start_end">24dp</dimen>
-    <dimen name="gesture_tutorial_foldable_feedback_margin_start_end">140dp</dimen>
+    <dimen name="gesture_tutorial_feedback_margin_start_end">8dp</dimen>
+    <dimen name="gesture_tutorial_tablet_feedback_margin_start_end">140dp</dimen>
+    <dimen name="gesture_tutorial_feedback_margin_top">16dp</dimen>
+    <dimen name="gesture_tutorial_tablet_feedback_margin_top">24dp</dimen>
     <dimen name="gesture_tutorial_multi_row_task_view_spacing">72dp</dimen>
     <dimen name="gesture_tutorial_small_task_view_corner_radius">18dp</dimen>
     <dimen name="gesture_tutorial_mock_taskbar_height">80dp</dimen>
@@ -124,15 +126,46 @@
     <dimen name="gesture_tutorial_message_small_margin_bottom">4dp</dimen>
     <dimen name="gesture_tutorial_message_padding_start">26dp</dimen>
     <dimen name="gesture_tutorial_message_padding_end">18dp</dimen>
-    <dimen name="gesture_tutorial_foldable_message_padding_start_end">126dp</dimen>
+    <dimen name="gesture_tutorial_top_bar_margin_start">34dp</dimen>
+    <dimen name="gesture_tutorial_top_bar_margin_end">211dp</dimen>
+    <dimen name="gesture_tutorial_top_bar_button_margin_end">24dp</dimen>
+    <dimen name="gesture_tutorial_conversation_bottom_padding">66dp</dimen>
+    <integer name="gesture_tutorial_extra_messages_visibility">0</integer> <!-- VISIBLE -->
+    <dimen name="gesture_tutorial_message_margin_start">124dp</dimen>
+    <dimen name="gesture_tutorial_reply_margin_end">144dp</dimen>
+    <dimen name="gesture_tutorial_input_margin_start">34dp</dimen>
+    <dimen name="gesture_tutorial_input_margin_end">24dp</dimen>
+    <dimen name="gesture_tutorial_tablet_message_padding_start_end">126dp</dimen>
+    <dimen name="gesture_tutorial_tablet_message_1_margin">245dp</dimen>
+    <dimen name="gesture_tutorial_tablet_reply_1_margin">241dp</dimen>
+    <dimen name="gesture_tutorial_tablet_message_2_margin">401dp</dimen>
+    <dimen name="gesture_tutorial_tablet_message_3_margin">245dp</dimen>
+    <dimen name="gesture_tutorial_tablet_reply_2_margin">273dp</dimen>
 
     <!-- Gesture Tutorial mock conversation lists -->
     <dimen name="gesture_tutorial_conversation_icon_size">56dp</dimen>
     <dimen name="gesture_tutorial_conversation_icon_corner_radius">100dp</dimen>
     <dimen name="gesture_tutorial_conversation_list_padding_top">28dp</dimen>
     <dimen name="gesture_tutorial_conversation_line_padding_start">20dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_1_margin_end">217dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_2_margin_end">142dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_3_margin_end">190dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_4_margin_end">171dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_5_margin_end">198dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_6_margin_end">79dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_7_margin_end">174dp</dimen>
+    <dimen name="gesture_tutorial_conversation_line_8_margin_end">117dp</dimen>
+    <dimen name="gesture_tutorial_tablet_conversation_line_6_margin_end">65dp</dimen>
+    <dimen name="gesture_tutorial_tablet_conversation_line_8_margin_end">132dp</dimen>
+    <dimen name="gesture_tutorial_tablet_conversation_line_10_margin_end">161dp</dimen>
+    <integer name="gesture_tutorial_extra_conversations_visibility">0</integer> <!-- VISIBLE -->
+    <dimen name="gesture_tutorial_mock_button_margin_end">24dp</dimen>
+    <dimen name="gesture_tutorial_mock_button_margin_bottom">66dp</dimen>
 
     <!-- Gesture Tutorial mock hotseats -->
+    <dimen name="gesture_tutorial_hotseat_width">-1px</dimen> <!-- match_parent -->
+    <dimen name="gesture_tutorial_hotseat_height">-2px</dimen> <!-- wrap_content -->
+    <dimen name="gesture_tutorial_hotseat_padding_start_end">26dp</dimen>
     <dimen name="gesture_tutorial_hotseat_icon_size">60dp</dimen>
     <dimen name="gesture_tutorial_hotseat_icon_corner_radius">100dp</dimen>
     <dimen name="gesture_tutorial_hotseat_search_height">50dp</dimen>
@@ -148,11 +181,20 @@
     <dimen name="gesture_tutorial_webpage_small_corner_radius">4dp</dimen>
     <dimen name="gesture_tutorial_webpage_large_line_height">36dp</dimen>
     <dimen name="gesture_tutorial_webpage_small_line_height">22dp</dimen>
+    <dimen name="gesture_tutorial_webpage_url_margin_start_end">16dp</dimen>
+    <dimen name="gesture_tutorial_webpage_top_bar_button_margin_start">24dp</dimen>
+    <dimen name="gesture_tutorial_webpage_top_bar_margin_start">97dp</dimen>
+    <dimen name="gesture_tutorial_webpage_top_bar_margin_end">97dp</dimen>
+    <dimen name="gesture_tutorial_webpage_line_1_margin_end">126dp</dimen>
+    <dimen name="gesture_tutorial_webpage_line_2_margin_end">64dp</dimen>
+    <dimen name="gesture_tutorial_webpage_line_3_margin_end">151dp</dimen>
+    <dimen name="gesture_tutorial_webpage_block_margin_end">24dp</dimen>
+    <integer name="gesture_tutorial_webpage_extra_lines_visibility">0</integer> <!-- VISIBLE -->
 
     <!-- Gesture Tutorial mock taskbar -->
     <dimen name="gesture_tutorial_taskbar_icon_size">44dp</dimen>
     <dimen name="gesture_tutorial_taskbar_icon_corner_radius">100dp</dimen>
-    <dimen name="gesture_tutorial_taskbar_padding_start_end">218dp</dimen>
+    <dimen name="gesture_tutorial_taskbar_padding_start_end">52dp</dimen>
 
     <!-- All Set page -->
     <dimen name="allset_page_margin_horizontal">40dp</dimen>
diff --git a/quickstep/res/values/strings.xml b/quickstep/res/values/strings.xml
index 3ee2af0bed..f80deeba45 100644
--- a/quickstep/res/values/strings.xml
+++ b/quickstep/res/values/strings.xml
@@ -182,8 +182,10 @@
     <string name="allset_title">All set!</string>
     <!-- Hint string at the bottom of "All Set" page [CHAR LIMIT=NONE] -->
     <string name="allset_hint">Swipe up to go Home</string>
-    <!-- Description of "All Set" page [CHAR LIMIT=NONE] -->
+    <!-- Description of "All Set" page on phones [CHAR LIMIT=NONE] -->
     <string name="allset_description">You\u2019re ready to start using your phone</string>
+    <!-- Description of "All Set" page on tablets [CHAR LIMIT=NONE] -->
+    <string name="allset_description_tablet">You\u2019re ready to start using your tablet</string>
     <!-- String linking to navigation settings on "All Set" page [CHAR LIMIT=NONE] -->
     <string name="allset_navigation_settings"><annotation id="link">System navigation settings</annotation></string>
 
diff --git a/quickstep/res/values/styles.xml b/quickstep/res/values/styles.xml
index 2efe72e651..6aa488375b 100644
--- a/quickstep/res/values/styles.xml
+++ b/quickstep/res/values/styles.xml
@@ -47,6 +47,12 @@
         <item name="android:lineHeight">44sp</item>
     </style>
 
+    <style name="TextAppearance.GestureTutorial.Feedback.Title.AllSet"
+        parent="TextAppearance.GestureTutorial.Feedback.Title">
+        <item name="android:letterSpacing">0.03</item>
+        <item name="android:lineHeight">44sp</item>
+    </style>
+
     <style name="TextAppearance.GestureTutorial.Dialog.Title"
         parent="TextAppearance.GestureTutorial.Feedback.Title">
         <item name="android:gravity">center_horizontal</item>
@@ -61,6 +67,12 @@
         <item name="android:textColor">?android:attr/textColorPrimary</item>
         <item name="android:fontFamily">google-sans-text</item>
         <item name="android:letterSpacing">0.03</item>
+        <item name="android:textSize">14sp</item>
+        <item name="android:lineHeight">20sp</item>
+    </style>
+
+    <style name="TextAppearance.GestureTutorial.Feedback.Subtitle.AllSet"
+        parent="TextAppearance.GestureTutorial.Feedback.Subtitle">
         <item name="android:textSize">18sp</item>
         <item name="android:lineHeight">24sp</item>
     </style>
@@ -76,9 +88,8 @@
 
     <style name="TextAppearance.GestureTutorial.Feedback.Subtext"
         parent="TextAppearance.GestureTutorial.Feedback.Subtitle">
-        <item name="android:textSize">16sp</item>
         <item name="android:textColor">@color/gesture_tutorial_primary_color</item>
-        <item name="android:gravity">center</item>
+        <item name="android:gravity">start</item>
     </style>
 
     <style name="TextAppearance.GestureTutorial.Feedback.Subtext.Dark"
diff --git a/quickstep/src/com/android/quickstep/interaction/AllSetActivity.java b/quickstep/src/com/android/quickstep/interaction/AllSetActivity.java
index 1c3e784308..5ef9a9b697 100644
--- a/quickstep/src/com/android/quickstep/interaction/AllSetActivity.java
+++ b/quickstep/src/com/android/quickstep/interaction/AllSetActivity.java
@@ -52,6 +52,7 @@ import android.widget.TextView;
 import androidx.annotation.Nullable;
 import androidx.core.graphics.ColorUtils;
 
+import com.android.launcher3.InvariantDeviceProfile;
 import com.android.launcher3.R;
 import com.android.launcher3.Utilities;
 import com.android.quickstep.AnimatedFloat;
@@ -110,6 +111,12 @@ public class AllSetActivity extends Activity {
         mContentView = findViewById(R.id.content_view);
         mSwipeUpShift = getResources().getDimension(R.dimen.allset_swipe_up_shift);
 
+        boolean isTablet = InvariantDeviceProfile.INSTANCE.get(getApplicationContext())
+                .getDeviceProfile(this).isTablet;
+        TextView subtitle = findViewById(R.id.subtitle);
+        subtitle.setText(isTablet
+                ? R.string.allset_description_tablet : R.string.allset_description);
+
         TextView tv = findViewById(R.id.navigation_settings);
         tv.setTextColor(accentColor);
         tv.setOnClickListener(v -> {
diff --git a/quickstep/src/com/android/quickstep/interaction/BackGestureTutorialController.java b/quickstep/src/com/android/quickstep/interaction/BackGestureTutorialController.java
index 49d820387c..b68650524e 100644
--- a/quickstep/src/com/android/quickstep/interaction/BackGestureTutorialController.java
+++ b/quickstep/src/com/android/quickstep/interaction/BackGestureTutorialController.java
@@ -57,14 +57,14 @@ final class BackGestureTutorialController extends TutorialController {
     @LayoutRes
     int getMockAppTaskCurrentPageLayoutResId() {
         return mTutorialFragment.isLargeScreen()
-                ? R.layout.gesture_tutorial_foldable_mock_conversation
+                ? R.layout.gesture_tutorial_tablet_mock_conversation
                 : R.layout.gesture_tutorial_mock_conversation;
     }
 
     @LayoutRes
     int getMockAppTaskPreviousPageLayoutResId() {
         return mTutorialFragment.isLargeScreen()
-                ? R.layout.gesture_tutorial_foldable_mock_conversation_list
+                ? R.layout.gesture_tutorial_tablet_mock_conversation_list
                 : R.layout.gesture_tutorial_mock_conversation_list;
     }
 
diff --git a/quickstep/src/com/android/quickstep/interaction/HomeGestureTutorialController.java b/quickstep/src/com/android/quickstep/interaction/HomeGestureTutorialController.java
index 0bc3691d44..6254313f74 100644
--- a/quickstep/src/com/android/quickstep/interaction/HomeGestureTutorialController.java
+++ b/quickstep/src/com/android/quickstep/interaction/HomeGestureTutorialController.java
@@ -51,7 +51,7 @@ final class HomeGestureTutorialController extends SwipeUpGestureTutorialControll
     @Override
     protected int getMockAppTaskLayoutResId() {
         return mTutorialFragment.isLargeScreen()
-                ? R.layout.gesture_tutorial_foldable_mock_webpage
+                ? R.layout.gesture_tutorial_tablet_mock_webpage
                 : R.layout.gesture_tutorial_mock_webpage;
     }
 
diff --git a/quickstep/src/com/android/quickstep/interaction/OverviewGestureTutorialController.java b/quickstep/src/com/android/quickstep/interaction/OverviewGestureTutorialController.java
index f308f27d4d..09640c675b 100644
--- a/quickstep/src/com/android/quickstep/interaction/OverviewGestureTutorialController.java
+++ b/quickstep/src/com/android/quickstep/interaction/OverviewGestureTutorialController.java
@@ -61,7 +61,7 @@ final class OverviewGestureTutorialController extends SwipeUpGestureTutorialCont
     @Override
     protected int getMockAppTaskLayoutResId() {
         return mTutorialFragment.isLargeScreen()
-                ? R.layout.gesture_tutorial_foldable_mock_conversation_list
+                ? R.layout.gesture_tutorial_tablet_mock_conversation_list
                 : R.layout.gesture_tutorial_mock_conversation_list;
     }
 
diff --git a/quickstep/src/com/android/quickstep/interaction/SwipeUpGestureTutorialController.java b/quickstep/src/com/android/quickstep/interaction/SwipeUpGestureTutorialController.java
index 2db4c20d02..b70c411196 100644
--- a/quickstep/src/com/android/quickstep/interaction/SwipeUpGestureTutorialController.java
+++ b/quickstep/src/com/android/quickstep/interaction/SwipeUpGestureTutorialController.java
@@ -280,6 +280,15 @@ abstract class SwipeUpGestureTutorialController extends TutorialController {
             super(context, deviceState, gestureState);
             mRemoteTargetHandles[0] = new RemoteTargetGluer.RemoteTargetHandle(
                     mRemoteTargetHandles[0].getTaskViewSimulator(), new FakeTransformParams());
+
+            for (RemoteTargetGluer.RemoteTargetHandle handle
+                    : mTargetGluer.getRemoteTargetHandles()) {
+                // Override home screen rotation preference so that home and overview animations
+                // work properly
+                handle.getTaskViewSimulator()
+                        .getOrientationState()
+                        .ignoreAllowHomeRotationPreference();
+            }
         }
 
         void initDp(DeviceProfile dp) {
diff --git a/quickstep/src/com/android/quickstep/interaction/TutorialController.java b/quickstep/src/com/android/quickstep/interaction/TutorialController.java
index 4145393262..2ddbd970e3 100644
--- a/quickstep/src/com/android/quickstep/interaction/TutorialController.java
+++ b/quickstep/src/com/android/quickstep/interaction/TutorialController.java
@@ -49,6 +49,7 @@ import androidx.annotation.StringRes;
 import androidx.appcompat.app.AlertDialog;
 import androidx.appcompat.content.res.AppCompatResources;
 
+import com.android.launcher3.DeviceProfile;
 import com.android.launcher3.R;
 import com.android.launcher3.Utilities;
 import com.android.launcher3.anim.AnimatorListeners;
@@ -73,7 +74,7 @@ abstract class TutorialController implements BackGestureAttemptCallback,
     private static final int FEEDBACK_ANIMATION_MS = 133;
     private static final int RIPPLE_VISIBLE_MS = 300;
     private static final int GESTURE_ANIMATION_DELAY_MS = 1500;
-    private static final int ADVANCE_TUTORIAL_TIMEOUT_MS = 4000;
+    private static final int ADVANCE_TUTORIAL_TIMEOUT_MS = 2000;
     private static final long GESTURE_ANIMATION_PAUSE_DURATION_MILLIS = 1000;
 
     final TutorialFragment mTutorialFragment;
@@ -185,7 +186,9 @@ abstract class TutorialController implements BackGestureAttemptCallback,
     @LayoutRes
     protected int getMockHotseatResId() {
         return mTutorialFragment.isLargeScreen()
-                ? R.layout.gesture_tutorial_foldable_mock_hotseat
+                ? (mTutorialFragment.isFoldable()
+                        ? R.layout.gesture_tutorial_foldable_mock_hotseat
+                        : R.layout.gesture_tutorial_tablet_mock_hotseat)
                 : R.layout.gesture_tutorial_mock_hotseat;
     }
 
@@ -319,6 +322,9 @@ abstract class TutorialController implements BackGestureAttemptCallback,
     }
 
     void hideFeedback() {
+        if (mFeedbackView.getVisibility() != View.VISIBLE) {
+            return;
+        }
         cancelQueuedGestureAnimation();
         mFeedbackView.clearAnimation();
         mFeedbackView.setVisibility(View.INVISIBLE);
@@ -515,20 +521,45 @@ abstract class TutorialController implements BackGestureAttemptCallback,
     }
 
     private void updateLayout() {
-        if (mContext != null) {
-            RelativeLayout.LayoutParams feedbackLayoutParams =
-                    (RelativeLayout.LayoutParams) mFeedbackView.getLayoutParams();
-            feedbackLayoutParams.setMarginStart(mContext.getResources().getDimensionPixelSize(
-                    mTutorialFragment.isLargeScreen()
-                            ? R.dimen.gesture_tutorial_foldable_feedback_margin_start_end
-                            : R.dimen.gesture_tutorial_feedback_margin_start_end));
-            feedbackLayoutParams.setMarginEnd(mContext.getResources().getDimensionPixelSize(
-                    mTutorialFragment.isLargeScreen()
-                            ? R.dimen.gesture_tutorial_foldable_feedback_margin_start_end
-                            : R.dimen.gesture_tutorial_feedback_margin_start_end));
-
-            mFakeTaskbarView.setVisibility(mTutorialFragment.isLargeScreen() ? View.VISIBLE : GONE);
+        if (mContext == null) {
+            return;
         }
+        RelativeLayout.LayoutParams feedbackLayoutParams =
+                (RelativeLayout.LayoutParams) mFeedbackView.getLayoutParams();
+        feedbackLayoutParams.setMarginStart(mContext.getResources().getDimensionPixelSize(
+                mTutorialFragment.isLargeScreen()
+                        ? R.dimen.gesture_tutorial_tablet_feedback_margin_start_end
+                        : R.dimen.gesture_tutorial_feedback_margin_start_end));
+        feedbackLayoutParams.setMarginEnd(mContext.getResources().getDimensionPixelSize(
+                mTutorialFragment.isLargeScreen()
+                        ? R.dimen.gesture_tutorial_tablet_feedback_margin_start_end
+                        : R.dimen.gesture_tutorial_feedback_margin_start_end));
+        feedbackLayoutParams.topMargin = mContext.getResources().getDimensionPixelSize(
+                mTutorialFragment.isLargeScreen()
+                        ? R.dimen.gesture_tutorial_tablet_feedback_margin_top
+                        : R.dimen.gesture_tutorial_feedback_margin_top);
+
+        mFakeTaskbarView.setVisibility(mTutorialFragment.isLargeScreen() ? View.VISIBLE : GONE);
+
+        RelativeLayout.LayoutParams hotseatLayoutParams =
+                (RelativeLayout.LayoutParams) mFakeHotseatView.getLayoutParams();
+        if (!mTutorialFragment.isLargeScreen()) {
+            DeviceProfile dp = mTutorialFragment.getDeviceProfile();
+            dp.updateIsSeascape(mContext);
+
+            hotseatLayoutParams.addRule(dp.isLandscape
+                    ? (dp.isSeascape()
+                            ? RelativeLayout.ALIGN_PARENT_START
+                            : RelativeLayout.ALIGN_PARENT_END)
+                    : RelativeLayout.ALIGN_PARENT_BOTTOM);
+        } else {
+            hotseatLayoutParams.width = RelativeLayout.LayoutParams.MATCH_PARENT;
+            hotseatLayoutParams.height = RelativeLayout.LayoutParams.WRAP_CONTENT;
+            hotseatLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
+            hotseatLayoutParams.removeRule(RelativeLayout.ALIGN_PARENT_START);
+            hotseatLayoutParams.removeRule(RelativeLayout.ALIGN_PARENT_END);
+        }
+        mFakeHotseatView.setLayoutParams(hotseatLayoutParams);
     }
 
     private AlertDialog createSkipTutorialDialog() {
diff --git a/quickstep/src/com/android/quickstep/interaction/TutorialFragment.java b/quickstep/src/com/android/quickstep/interaction/TutorialFragment.java
index 2fd7cde3a0..4b836e380e 100644
--- a/quickstep/src/com/android/quickstep/interaction/TutorialFragment.java
+++ b/quickstep/src/com/android/quickstep/interaction/TutorialFragment.java
@@ -20,7 +20,6 @@ import android.animation.AnimatorListenerAdapter;
 import android.app.Activity;
 import android.content.Context;
 import android.content.Intent;
-import android.content.pm.ActivityInfo;
 import android.graphics.Insets;
 import android.graphics.drawable.Animatable2;
 import android.graphics.drawable.AnimatedVectorDrawable;
@@ -41,6 +40,7 @@ import androidx.annotation.Nullable;
 import androidx.fragment.app.Fragment;
 import androidx.fragment.app.FragmentActivity;
 
+import com.android.launcher3.DeviceProfile;
 import com.android.launcher3.InvariantDeviceProfile;
 import com.android.launcher3.R;
 import com.android.quickstep.interaction.TutorialController.TutorialType;
@@ -67,7 +67,9 @@ abstract class TutorialFragment extends Fragment implements OnTouchListener {
 
     private boolean mFragmentStopped = false;
 
+    private DeviceProfile mDeviceProfile;
     private boolean mIsLargeScreen;
+    private boolean mIsFoldable;
 
     public static TutorialFragment newInstance(TutorialType tutorialType, boolean gestureComplete) {
         TutorialFragment fragment = getFragmentForTutorialType(tutorialType);
@@ -139,22 +141,24 @@ abstract class TutorialFragment extends Fragment implements OnTouchListener {
         mEdgeBackGestureHandler = new EdgeBackGestureHandler(getContext());
         mNavBarGestureHandler = new NavBarGestureHandler(getContext());
 
-        mIsLargeScreen = InvariantDeviceProfile.INSTANCE.get(getContext())
-                .getDeviceProfile(getContext()).isTablet;
-
-        if (mIsLargeScreen) {
-            ((Activity) getContext()).setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_USER);
-        } else {
-            // Temporary until UI mocks for landscape mode for phones are created.
-            ((Activity) getContext()).setRequestedOrientation(
-                    ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
-        }
+        mDeviceProfile = InvariantDeviceProfile.INSTANCE.get(getContext())
+                .getDeviceProfile(getContext());
+        mIsLargeScreen = mDeviceProfile.isTablet;
+        mIsFoldable = mDeviceProfile.isTwoPanels;
     }
 
     public boolean isLargeScreen() {
         return mIsLargeScreen;
     }
 
+    public boolean isFoldable() {
+        return mIsFoldable;
+    }
+
+    DeviceProfile getDeviceProfile() {
+        return mDeviceProfile;
+    }
+
     @Override
     public void onDestroy() {
         super.onDestroy();
@@ -296,6 +300,9 @@ abstract class TutorialFragment extends Fragment implements OnTouchListener {
 
     @Override
     public boolean onTouch(View view, MotionEvent motionEvent) {
+        if (mTutorialController != null) {
+            mTutorialController.hideFeedback();
+        }
         // Note: Using logical-or to ensure both functions get called.
         return mEdgeBackGestureHandler.onTouch(view, motionEvent)
                 | mNavBarGestureHandler.onTouch(view, motionEvent);
diff --git a/quickstep/src/com/android/quickstep/interaction/TutorialStepIndicator.java b/quickstep/src/com/android/quickstep/interaction/TutorialStepIndicator.java
index d880d74e5d..ae0e725aad 100644
--- a/quickstep/src/com/android/quickstep/interaction/TutorialStepIndicator.java
+++ b/quickstep/src/com/android/quickstep/interaction/TutorialStepIndicator.java
@@ -23,7 +23,6 @@ import android.widget.ImageView;
 import android.widget.LinearLayout;
 
 import androidx.appcompat.content.res.AppCompatResources;
-import androidx.core.graphics.ColorUtils;
 
 import com.android.launcher3.R;
 import com.android.launcher3.Utilities;
@@ -87,8 +86,10 @@ public class TutorialStepIndicator extends LinearLayout {
         for (int i = mTotalSteps; i < getChildCount(); i++) {
             removeViewAt(i);
         }
-        int stepIndicatorColor = GraphicsUtils.getAttrColor(
+        int activeStepIndicatorColor = GraphicsUtils.getAttrColor(
                 getContext(), android.R.attr.textColorPrimary);
+        int inactiveStepIndicatorColor = GraphicsUtils.getAttrColor(
+                getContext(), android.R.attr.textColorSecondaryInverse);
         for (int i = 0; i < mTotalSteps; i++) {
             Drawable pageIndicatorPillDrawable = AppCompatResources.getDrawable(
                     getContext(), R.drawable.tutorial_step_indicator_pill);
@@ -107,10 +108,9 @@ public class TutorialStepIndicator extends LinearLayout {
             }
             if (pageIndicatorPillDrawable != null) {
                 if (i < mCurrentStep) {
-                    pageIndicatorPillDrawable.setTint(stepIndicatorColor);
+                    pageIndicatorPillDrawable.setTint(activeStepIndicatorColor);
                 } else {
-                    pageIndicatorPillDrawable.setTint(
-                            ColorUtils.setAlphaComponent(stepIndicatorColor, 0x22));
+                    pageIndicatorPillDrawable.setTint(inactiveStepIndicatorColor);
                 }
             }
         }
diff --git a/quickstep/src/com/android/quickstep/util/RecentsOrientedState.java b/quickstep/src/com/android/quickstep/util/RecentsOrientedState.java
index 4f5c368f31..e5c656a64d 100644
--- a/quickstep/src/com/android/quickstep/util/RecentsOrientedState.java
+++ b/quickstep/src/com/android/quickstep/util/RecentsOrientedState.java
@@ -102,6 +102,8 @@ public class RecentsOrientedState implements
     // Whether the swipe gesture is running, so the recents would stay locked in the
     // current orientation
     private static final int FLAG_SWIPE_UP_NOT_RUNNING = 1 << 8;
+    // Ignore shared prefs for home rotation rotation, allowing it in if the activity supports it
+    private static final int FLAG_IGNORE_ALLOW_HOME_ROTATION_PREF = 1 << 9;
 
     private static final int MASK_MULTIPLE_ORIENTATION_SUPPORTED_BY_DEVICE =
             FLAG_MULTIPLE_ORIENTATION_SUPPORTED_BY_ACTIVITY
@@ -371,12 +373,17 @@ public class RecentsOrientedState implements
                 == MASK_MULTIPLE_ORIENTATION_SUPPORTED_BY_DEVICE;
     }
 
+    public void ignoreAllowHomeRotationPreference() {
+        setFlag(FLAG_IGNORE_ALLOW_HOME_ROTATION_PREF, true);
+    }
+
     public boolean isRecentsActivityRotationAllowed() {
         // Activity rotation is allowed if the multi-simulated-rotation is not supported
         // (fallback recents or tablets) or activity rotation is enabled by various settings.
         return ((mFlags & MASK_MULTIPLE_ORIENTATION_SUPPORTED_BY_DEVICE)
                 != MASK_MULTIPLE_ORIENTATION_SUPPORTED_BY_DEVICE)
-                || (mFlags & (FLAG_HOME_ROTATION_ALLOWED_IN_PREFS
+                || (mFlags & (FLAG_IGNORE_ALLOW_HOME_ROTATION_PREF
+                        | FLAG_HOME_ROTATION_ALLOWED_IN_PREFS
                         | FLAG_MULTIWINDOW_ROTATION_ALLOWED
                         | FLAG_HOME_ROTATION_FORCE_ENABLED_FOR_TESTING)) != 0;
     }