From c65f37e7c6b7cb7df8911f6c97dcd68cef98513e Mon Sep 17 00:00:00 2001
From: Saumya Prakash <saumyaprakash@google.com>
Date: Wed, 8 Feb 2023 00:18:13 +0000
Subject: [PATCH] Migrate from using CardViews to Views in gesture nav tutorial
 layouts.

Use Views in layouts for the gesture navigation tutorial instead of CardViews. We only migrate the classes that will end up being used in the redesigned gesture tutorial.

Fix: 268259319
Test: Manual
Change-Id: I510c8b3f840d0267dd6dfca573cc69c4996d525c
---
 quickstep/res/drawable/hotseat_icon.xml       | 21 +++++++++
 quickstep/res/drawable/hotseat_icon_home.xml  | 21 +++++++++
 quickstep/res/drawable/hotseat_search_bar.xml | 21 +++++++++
 quickstep/res/drawable/top_task_view.xml      | 21 +++++++++
 .../gesture_tutorial_mock_hotseat.xml         | 28 ++++++------
 .../gesture_tutorial_tablet_mock_hotseat.xml  | 43 ++++++++-----------
 .../res/layout/gesture_tutorial_fragment.xml  | 23 +++++-----
 .../layout/gesture_tutorial_mock_hotseat.xml  | 35 +++++++--------
 .../gesture_tutorial_tablet_mock_hotseat.xml  | 42 ++++++++----------
 .../redesigned_gesture_tutorial_fragment.xml  | 26 +++++------
 ...designed_gesture_tutorial_mock_hotseat.xml | 38 +++++++---------
 .../interaction/AnimatedTaskView.java         |  7 +--
 .../HomeGestureTutorialController.java        |  8 ++--
 .../interaction/TutorialController.java       |  1 -
 14 files changed, 194 insertions(+), 141 deletions(-)
 create mode 100644 quickstep/res/drawable/hotseat_icon.xml
 create mode 100644 quickstep/res/drawable/hotseat_icon_home.xml
 create mode 100644 quickstep/res/drawable/hotseat_search_bar.xml
 create mode 100644 quickstep/res/drawable/top_task_view.xml

diff --git a/quickstep/res/drawable/hotseat_icon.xml b/quickstep/res/drawable/hotseat_icon.xml
new file mode 100644
index 0000000000..b849fe90ce
--- /dev/null
+++ b/quickstep/res/drawable/hotseat_icon.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2023 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.
+-->
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/mock_app_icon" />
+    <corners android:radius="@dimen/gesture_tutorial_hotseat_icon_corner_radius" />
+</shape>
\ No newline at end of file
diff --git a/quickstep/res/drawable/hotseat_icon_home.xml b/quickstep/res/drawable/hotseat_icon_home.xml
new file mode 100644
index 0000000000..d59dd4a88e
--- /dev/null
+++ b/quickstep/res/drawable/hotseat_icon_home.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2023 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.
+-->
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/gesture_home_tutorial_background" />
+    <corners android:radius="@dimen/gesture_tutorial_hotseat_icon_corner_radius" />
+</shape>
\ No newline at end of file
diff --git a/quickstep/res/drawable/hotseat_search_bar.xml b/quickstep/res/drawable/hotseat_search_bar.xml
new file mode 100644
index 0000000000..ea332e9462
--- /dev/null
+++ b/quickstep/res/drawable/hotseat_search_bar.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2023 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.
+-->
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/mock_search_bar" />
+    <corners android:radius="@dimen/gesture_tutorial_hotseat_search_corner_radius" />
+</shape>
\ No newline at end of file
diff --git a/quickstep/res/drawable/top_task_view.xml b/quickstep/res/drawable/top_task_view.xml
new file mode 100644
index 0000000000..d2176c3cb4
--- /dev/null
+++ b/quickstep/res/drawable/top_task_view.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2023 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.
+-->
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/gesture_tutorial_fake_previous_task_view_color" />
+    <corners android:radius="@dimen/gesture_tutorial_small_task_view_corner_radius" />
+</shape>
\ No newline at end of file
diff --git a/quickstep/res/layout-land/gesture_tutorial_mock_hotseat.xml b/quickstep/res/layout-land/gesture_tutorial_mock_hotseat.xml
index 1e2e014111..c7e176ac2e 100644
--- a/quickstep/res/layout-land/gesture_tutorial_mock_hotseat.xml
+++ b/quickstep/res/layout-land/gesture_tutorial_mock_hotseat.xml
@@ -24,54 +24,50 @@
     android:paddingStart="56dp"
     android:paddingEnd="56dp">
 
-    <androidx.cardview.widget.CardView
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintTop_toBottomOf="@id/hotseat_icon_3"
         app:layout_constraintBottom_toBottomOf="parent"
diff --git a/quickstep/res/layout-land/gesture_tutorial_tablet_mock_hotseat.xml b/quickstep/res/layout-land/gesture_tutorial_tablet_mock_hotseat.xml
index f04fbb660d..28d32a489b 100644
--- a/quickstep/res/layout-land/gesture_tutorial_tablet_mock_hotseat.xml
+++ b/quickstep/res/layout-land/gesture_tutorial_tablet_mock_hotseat.xml
@@ -22,84 +22,77 @@
     android:paddingStart="@dimen/gesture_tutorial_hotseat_padding_start_end"
     android:paddingEnd="@dimen/gesture_tutorial_hotseat_padding_start_end">
 
-    <androidx.cardview.widget.CardView
+    <View
         android:id="@+id/hotseat_search_bar"
         android:layout_width="200dp"
         android:layout_height="@dimen/gesture_tutorial_hotseat_search_height"
+        android:background="@drawable/hotseat_search_bar"
+        android:clipToOutline="true"
 
-        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
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
diff --git a/quickstep/res/layout/gesture_tutorial_fragment.xml b/quickstep/res/layout/gesture_tutorial_fragment.xml
index 8eeef67146..3bd0df0349 100644
--- a/quickstep/res/layout/gesture_tutorial_fragment.xml
+++ b/quickstep/res/layout/gesture_tutorial_fragment.xml
@@ -57,33 +57,34 @@
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"/>
 
-        <androidx.cardview.widget.CardView
+
+        <View
             android:id="@+id/top_task_view"
             android:layout_width="match_parent"
             android:layout_height="0dp"
-            android:visibility="invisible"
             android:layout_marginBottom="@dimen/gesture_tutorial_multi_row_task_view_spacing"
+            android:background="@drawable/top_task_view"
+            android:clipToOutline="true"
+            android:visibility="invisible"
 
-            app:cardElevation="0dp"
-            app:cardCornerRadius="@dimen/gesture_tutorial_small_task_view_corner_radius"
             app:layout_constraintVertical_chainStyle="spread"
-            app:layout_constraintTop_toTopOf="@id/full_task_view"
             app:layout_constraintBottom_toTopOf="@id/bottom_task_view"
+            app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"/>
+            app:layout_constraintTop_toTopOf="@id/full_task_view" />
 
-        <androidx.cardview.widget.CardView
+        <View
             android:id="@+id/bottom_task_view"
             android:layout_width="match_parent"
             android:layout_height="0dp"
+            android:background="@drawable/top_task_view"
+            android:clipToOutline="true"
             android:visibility="invisible"
 
-            app:cardElevation="0dp"
-            app:cardCornerRadius="@dimen/gesture_tutorial_small_task_view_corner_radius"
-            app:layout_constraintTop_toBottomOf="@id/top_task_view"
             app:layout_constraintBottom_toBottomOf="@id/full_task_view"
+            app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"/>
+            app:layout_constraintTop_toBottomOf="@id/top_task_view" />
 
     </com.android.quickstep.interaction.AnimatedTaskView>
 
diff --git a/quickstep/res/layout/gesture_tutorial_mock_hotseat.xml b/quickstep/res/layout/gesture_tutorial_mock_hotseat.xml
index 8513dcf3d7..8ee0339e9c 100644
--- a/quickstep/res/layout/gesture_tutorial_mock_hotseat.xml
+++ b/quickstep/res/layout/gesture_tutorial_mock_hotseat.xml
@@ -8,67 +8,62 @@
     android:paddingStart="26dp"
     android:paddingEnd="26dp">
 
-    <androidx.cardview.widget.CardView
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintHorizontal_chainStyle="spread_inside"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toStartOf="@id/hotseat_icon_2"/>
 
-    <androidx.cardview.widget.CardView
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintStart_toEndOf="@id/hotseat_icon_1"
         app:layout_constraintEnd_toStartOf="@id/hotseat_icon_3"/>
 
-    <androidx.cardview.widget.CardView
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintStart_toEndOf="@id/hotseat_icon_2"
         app:layout_constraintEnd_toStartOf="@id/hotseat_icon_4"/>
 
-    <androidx.cardview.widget.CardView
+    <View
         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:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintStart_toEndOf="@id/hotseat_icon_3"
         app:layout_constraintEnd_toEndOf="parent"/>
 
-    <androidx.cardview.widget.CardView
+    <View
         android:layout_width="0dp"
         android:layout_height="@dimen/gesture_tutorial_hotseat_search_height"
         android:layout_marginTop="@dimen/gesture_tutorial_hotseat_icon_search_margin"
+        android:background="@drawable/hotseat_search_bar"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_search_corner_radius"
-        app:cardBackgroundColor="@color/mock_search_bar"
         app:layout_constraintTop_toBottomOf="@id/hotseat_icon_1"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"/>
diff --git a/quickstep/res/layout/gesture_tutorial_tablet_mock_hotseat.xml b/quickstep/res/layout/gesture_tutorial_tablet_mock_hotseat.xml
index 363f14e481..63c51e8040 100644
--- a/quickstep/res/layout/gesture_tutorial_tablet_mock_hotseat.xml
+++ b/quickstep/res/layout/gesture_tutorial_tablet_mock_hotseat.xml
@@ -22,84 +22,78 @@
     android:paddingStart="@dimen/gesture_tutorial_hotseat_padding_start_end"
     android:paddingEnd="@dimen/gesture_tutorial_hotseat_padding_start_end">
 
-    <androidx.cardview.widget.CardView
+    <View
         android:id="@+id/hotseat_search_bar"
         android:layout_width="0dp"
         android:layout_height="@dimen/gesture_tutorial_hotseat_search_height"
+        android:background="@drawable/hotseat_search_bar"
+        android:clipToOutline="true"
 
-        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
+    <View
         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"
+        android:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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"
+        android:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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"
+        android:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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"
+        android:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         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
+    <View
         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"
+        android:background="@drawable/hotseat_icon"
+        android:clipToOutline="true"
 
-        app:cardElevation="0dp"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardBackgroundColor="@color/mock_app_icon"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintTop_toBottomOf="@id/hotseat_search_bar"
         app:layout_constraintStart_toEndOf="@id/hotseat_icon_4"
diff --git a/quickstep/res/layout/redesigned_gesture_tutorial_fragment.xml b/quickstep/res/layout/redesigned_gesture_tutorial_fragment.xml
index 13b7238ceb..13482acbc8 100644
--- a/quickstep/res/layout/redesigned_gesture_tutorial_fragment.xml
+++ b/quickstep/res/layout/redesigned_gesture_tutorial_fragment.xml
@@ -57,29 +57,29 @@
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
-        <androidx.cardview.widget.CardView
+
+        <View
             android:id="@+id/top_task_view"
             android:layout_width="match_parent"
             android:layout_height="0dp"
             android:layout_marginBottom="@dimen/gesture_tutorial_multi_row_task_view_spacing"
+            android:background="@drawable/top_task_view"
+            android:clipToOutline="true"
             android:visibility="invisible"
 
-            app:cardCornerRadius="@dimen/gesture_tutorial_small_task_view_corner_radius"
-            app:cardElevation="0dp"
             app:layout_constraintBottom_toTopOf="@id/bottom_task_view"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="@id/full_task_view"
-            app:layout_constraintVertical_chainStyle="spread" />
+            app:layout_constraintTop_toTopOf="@id/full_task_view" />
 
-        <androidx.cardview.widget.CardView
+        <View
             android:id="@+id/bottom_task_view"
             android:layout_width="match_parent"
             android:layout_height="0dp"
+            android:background="@drawable/top_task_view"
+            android:clipToOutline="true"
             android:visibility="invisible"
 
-            app:cardCornerRadius="@dimen/gesture_tutorial_small_task_view_corner_radius"
-            app:cardElevation="0dp"
             app:layout_constraintBottom_toBottomOf="@id/full_task_view"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -99,13 +99,13 @@
         android:background="@drawable/gesture_tutorial_ripple" />
 
     <include
-        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"
+        layout="@layout/gesture_tutorial_tablet_mock_taskbar"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
-        android:layout_alignParentStart="true"
-        android:layout_alignParentEnd="true" />
+        android:layout_centerHorizontal="true"
+        android:layout_marginBottom="@dimen/gesture_tutorial_taskbar_margin_bottom" />
 
     <ImageView
         android:id="@+id/gesture_tutorial_edge_gesture_video"
diff --git a/quickstep/res/layout/redesigned_gesture_tutorial_mock_hotseat.xml b/quickstep/res/layout/redesigned_gesture_tutorial_mock_hotseat.xml
index 6d9ffaedfe..b1c8b31621 100644
--- a/quickstep/res/layout/redesigned_gesture_tutorial_mock_hotseat.xml
+++ b/quickstep/res/layout/redesigned_gesture_tutorial_mock_hotseat.xml
@@ -21,70 +21,64 @@
     android:layout_height="wrap_content"
     android:paddingBottom="70dp"
     android:paddingStart="26dp"
-    android:paddingEnd="26dp"
-    android:background="@color/gesture_home_tutorial_swipe_up_rect">
+    android:paddingEnd="26dp">
 
-    <androidx.cardview.widget.CardView
+    <View
         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:background="@drawable/hotseat_icon_home"
+        android:clipToOutline="true"
 
-        app:cardBackgroundColor="@color/gesture_home_tutorial_background"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardElevation="0dp"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintEnd_toStartOf="@id/hotseat_icon_2"
         app:layout_constraintHorizontal_chainStyle="spread_inside"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <androidx.cardview.widget.CardView
+    <View
         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:background="@drawable/hotseat_icon_home"
+        android:clipToOutline="true"
 
-        app:cardBackgroundColor="@color/gesture_home_tutorial_background"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardElevation="0dp"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintEnd_toStartOf="@id/hotseat_icon_3"
         app:layout_constraintStart_toEndOf="@id/hotseat_icon_1"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <androidx.cardview.widget.CardView
+    <View
         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:background="@drawable/hotseat_icon_home"
+        android:clipToOutline="true"
 
-        app:cardBackgroundColor="@color/gesture_home_tutorial_background"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardElevation="0dp"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintEnd_toStartOf="@id/hotseat_icon_4"
         app:layout_constraintStart_toEndOf="@id/hotseat_icon_2"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <androidx.cardview.widget.CardView
+    <View
         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:background="@drawable/hotseat_icon_home"
+        android:clipToOutline="true"
 
-        app:cardBackgroundColor="@color/gesture_home_tutorial_background"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_icon_corner_radius"
-        app:cardElevation="0dp"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@id/hotseat_icon_3"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <androidx.cardview.widget.CardView
+    <View
         android:layout_width="0dp"
         android:layout_height="@dimen/gesture_tutorial_hotseat_search_height"
         android:layout_marginTop="@dimen/gesture_tutorial_hotseat_icon_search_margin"
+        android:background="@drawable/hotseat_icon_home"
+        android:clipToOutline="true"
 
-        app:cardBackgroundColor="@color/gesture_home_tutorial_background"
-        app:cardCornerRadius="@dimen/gesture_tutorial_hotseat_search_corner_radius"
-        app:cardElevation="0dp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/hotseat_icon_1" />
diff --git a/quickstep/src/com/android/quickstep/interaction/AnimatedTaskView.java b/quickstep/src/com/android/quickstep/interaction/AnimatedTaskView.java
index 53ad138b6a..3ccd683eba 100644
--- a/quickstep/src/com/android/quickstep/interaction/AnimatedTaskView.java
+++ b/quickstep/src/com/android/quickstep/interaction/AnimatedTaskView.java
@@ -30,7 +30,6 @@ import android.view.ViewOutlineProvider;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
-import androidx.cardview.widget.CardView;
 import androidx.constraintlayout.widget.ConstraintLayout;
 
 import com.android.launcher3.R;
@@ -46,8 +45,8 @@ import java.util.ArrayList;
 public class AnimatedTaskView extends ConstraintLayout {
 
     private View mFullTaskView;
-    private CardView mTopTaskView;
-    private CardView mBottomTaskView;
+    private View mTopTaskView;
+    private View mBottomTaskView;
 
     private ViewOutlineProvider mTaskViewOutlineProvider = null;
     private final Rect mTaskViewAnimatedRect = new Rect();
@@ -185,8 +184,6 @@ public class AnimatedTaskView extends ConstraintLayout {
 
     void setFakeTaskViewFillColor(@ColorInt int colorResId) {
         mFullTaskView.setBackgroundColor(colorResId);
-        mTopTaskView.setCardBackgroundColor(colorResId);
-        mBottomTaskView.setCardBackgroundColor(colorResId);
     }
 
     @Override
diff --git a/quickstep/src/com/android/quickstep/interaction/HomeGestureTutorialController.java b/quickstep/src/com/android/quickstep/interaction/HomeGestureTutorialController.java
index c89d4b61a8..bce639b200 100644
--- a/quickstep/src/com/android/quickstep/interaction/HomeGestureTutorialController.java
+++ b/quickstep/src/com/android/quickstep/interaction/HomeGestureTutorialController.java
@@ -61,10 +61,10 @@ final class HomeGestureTutorialController extends SwipeUpGestureTutorialControll
 
     @Override
     protected int getMockAppTaskLayoutResId() {
-        return mTutorialFragment.isLargeScreen()
-                ? R.layout.gesture_tutorial_tablet_mock_webpage
-                : ENABLE_NEW_GESTURE_NAV_TUTORIAL.get()
-                    ? R.layout.swipe_up_gesture_tutorial_shape
+        return ENABLE_NEW_GESTURE_NAV_TUTORIAL.get()
+                ? R.layout.swipe_up_gesture_tutorial_shape
+                : mTutorialFragment.isLargeScreen()
+                    ? R.layout.gesture_tutorial_tablet_mock_webpage
                     : R.layout.gesture_tutorial_mock_webpage;
     }
 
diff --git a/quickstep/src/com/android/quickstep/interaction/TutorialController.java b/quickstep/src/com/android/quickstep/interaction/TutorialController.java
index ccdb2660bd..6fcb840349 100644
--- a/quickstep/src/com/android/quickstep/interaction/TutorialController.java
+++ b/quickstep/src/com/android/quickstep/interaction/TutorialController.java
@@ -154,7 +154,6 @@ abstract class TutorialController implements BackGestureAttemptCallback,
 
             mFeedbackTitleView.setText(getIntroductionTitle());
             mFeedbackSubtitleView.setText(getIntroductionSubtitle());
-            mSkipButton.setVisibility(GONE);
         }
 
         mTitleViewCallback = () -> mFeedbackTitleView.sendAccessibilityEvent(