diff --git a/quickstep/res/drawable/gesture_tutorial_loop_back_left.xml b/quickstep/res/drawable/gesture_tutorial_loop_back_left.xml
index 8bf305cd15..d2909fffc9 100644
--- a/quickstep/res/drawable/gesture_tutorial_loop_back_left.xml
+++ b/quickstep/res/drawable/gesture_tutorial_loop_back_left.xml
@@ -85,7 +85,7 @@
                     <path
                         android:name="_R_G_L_0_G_D_0_P_0"
                         android:fillAlpha="0.25"
-                        android:fillColor="#84ba69"
+                        android:fillColor="@color/gesture_tutorial_primary_color"
                         android:fillType="nonZero"
                         android:pathData=" M12.5 -446 C12.5,-446 12.5,446 12.5,446 C12.5,446 -12.5,446 -12.5,446 C-12.5,446 -12.5,-446 -12.5,-446 C-12.5,-446 12.5,-446 12.5,-446c " />
                 </group>
diff --git a/quickstep/res/drawable/gesture_tutorial_loop_back_right.xml b/quickstep/res/drawable/gesture_tutorial_loop_back_right.xml
index 812c54c9e2..c20b252778 100644
--- a/quickstep/res/drawable/gesture_tutorial_loop_back_right.xml
+++ b/quickstep/res/drawable/gesture_tutorial_loop_back_right.xml
@@ -81,7 +81,7 @@
                     <path
                         android:name="_R_G_L_1_G_D_0_P_0"
                         android:fillAlpha="0.25"
-                        android:fillColor="#84ba69"
+                        android:fillColor="@color/gesture_tutorial_primary_color"
                         android:fillType="nonZero"
                         android:pathData=" M12.5 -446 C12.5,-446 12.5,446 12.5,446 C12.5,446 -12.5,446 -12.5,446 C-12.5,446 -12.5,-446 -12.5,-446 C-12.5,-446 12.5,-446 12.5,-446c " />
                 </group>
diff --git a/quickstep/res/drawable/gesture_tutorial_loop_bottom_edge.xml b/quickstep/res/drawable/gesture_tutorial_loop_bottom_edge.xml
deleted file mode 100644
index 3efb52d16f..0000000000
--- a/quickstep/res/drawable/gesture_tutorial_loop_bottom_edge.xml
+++ /dev/null
@@ -1,38 +0,0 @@
-<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="time_group">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="2000"
-                    android:propertyName="translateX"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <aapt:attr name="android:drawable">
-        <vector
-            android:width="412dp"
-            android:height="892dp"
-            android:viewportHeight="892"
-            android:viewportWidth="412">
-            <group android:name="_R_G">
-                <group
-                    android:name="_R_G_L_0_G"
-                    android:translateX="206"
-                    android:translateY="874.5">
-                    <path
-                        android:name="_R_G_L_0_G_D_0_P_0"
-                        android:fillAlpha="1"
-                        android:fillColor="#84ba69"
-                        android:fillType="nonZero"
-                        android:pathData=" M206 -17.5 C206,-17.5 206,17.5 206,17.5 C206,17.5 -206,17.5 -206,17.5 C-206,17.5 -206,-17.5 -206,-17.5 C-206,-17.5 206,-17.5 206,-17.5c " />
-                </group>
-            </group>
-            <group android:name="time_group" />
-        </vector>
-    </aapt:attr>
-</animated-vector>
\ No newline at end of file
diff --git a/quickstep/res/drawable/gesture_tutorial_loop_gesture_back_right.xml b/quickstep/res/drawable/gesture_tutorial_loop_gesture_back_right.xml
deleted file mode 100644
index c41d077218..0000000000
--- a/quickstep/res/drawable/gesture_tutorial_loop_gesture_back_right.xml
+++ /dev/null
@@ -1,57 +0,0 @@
-<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="_R_G_L_0_G">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="0"
-                    android:propertyName="scaleY"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <target android:name="_R_G_L_0_G">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="0"
-                    android:propertyName="scaleY"
-                    android:startOffset="783"
-                    android:valueFrom="1"
-                    android:valueTo="0"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <target android:name="time_group">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="2000"
-                    android:propertyName="translateX"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <aapt:attr name="android:drawable">
-        <vector
-            android:width="412dp"
-            android:height="892dp"
-            android:viewportHeight="892"
-            android:viewportWidth="412">
-            <group android:name="_R_G">
-                <group
-                    android:name="_R_G_L_0_G"
-                    android:translateX="206"
-                    android:translateY="446" />
-            </group>
-            <group android:name="time_group" />
-        </vector>
-    </aapt:attr>
-</animated-vector>
\ No newline at end of file
diff --git a/quickstep/res/drawable/gesture_tutorial_loop_gesture_home.xml b/quickstep/res/drawable/gesture_tutorial_loop_gesture_home.xml
deleted file mode 100644
index c5dd41b520..0000000000
--- a/quickstep/res/drawable/gesture_tutorial_loop_gesture_home.xml
+++ /dev/null
@@ -1,57 +0,0 @@
-<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="_R_G_L_0_G">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="0"
-                    android:propertyName="scaleY"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <target android:name="_R_G_L_0_G">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="0"
-                    android:propertyName="scaleY"
-                    android:startOffset="850"
-                    android:valueFrom="1"
-                    android:valueTo="0"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <target android:name="time_group">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="2000"
-                    android:propertyName="translateX"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <aapt:attr name="android:drawable">
-        <vector
-            android:width="412dp"
-            android:height="892dp"
-            android:viewportHeight="892"
-            android:viewportWidth="412">
-            <group android:name="_R_G">
-                <group
-                    android:name="_R_G_L_0_G"
-                    android:translateX="206"
-                    android:translateY="446" />
-            </group>
-            <group android:name="time_group" />
-        </vector>
-    </aapt:attr>
-</animated-vector>
\ No newline at end of file
diff --git a/quickstep/res/drawable/gesture_tutorial_loop_gesture_left_edge.xml b/quickstep/res/drawable/gesture_tutorial_loop_gesture_left_edge.xml
deleted file mode 100644
index c41d077218..0000000000
--- a/quickstep/res/drawable/gesture_tutorial_loop_gesture_left_edge.xml
+++ /dev/null
@@ -1,57 +0,0 @@
-<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="_R_G_L_0_G">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="0"
-                    android:propertyName="scaleY"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <target android:name="_R_G_L_0_G">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="0"
-                    android:propertyName="scaleY"
-                    android:startOffset="783"
-                    android:valueFrom="1"
-                    android:valueTo="0"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <target android:name="time_group">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="2000"
-                    android:propertyName="translateX"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <aapt:attr name="android:drawable">
-        <vector
-            android:width="412dp"
-            android:height="892dp"
-            android:viewportHeight="892"
-            android:viewportWidth="412">
-            <group android:name="_R_G">
-                <group
-                    android:name="_R_G_L_0_G"
-                    android:translateX="206"
-                    android:translateY="446" />
-            </group>
-            <group android:name="time_group" />
-        </vector>
-    </aapt:attr>
-</animated-vector>
\ No newline at end of file
diff --git a/quickstep/res/drawable/gesture_tutorial_loop_gesture_overview.xml b/quickstep/res/drawable/gesture_tutorial_loop_gesture_overview.xml
deleted file mode 100644
index 5d87805e3c..0000000000
--- a/quickstep/res/drawable/gesture_tutorial_loop_gesture_overview.xml
+++ /dev/null
@@ -1,57 +0,0 @@
-<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="_R_G_L_0_G">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="0"
-                    android:propertyName="scaleY"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <target android:name="_R_G_L_0_G">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="0"
-                    android:propertyName="scaleY"
-                    android:startOffset="1500"
-                    android:valueFrom="1"
-                    android:valueTo="0"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <target android:name="time_group">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="2000"
-                    android:propertyName="translateX"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <aapt:attr name="android:drawable">
-        <vector
-            android:width="412dp"
-            android:height="892dp"
-            android:viewportHeight="892"
-            android:viewportWidth="412">
-            <group android:name="_R_G">
-                <group
-                    android:name="_R_G_L_0_G"
-                    android:translateX="206"
-                    android:translateY="446" />
-            </group>
-            <group android:name="time_group" />
-        </vector>
-    </aapt:attr>
-</animated-vector>
\ No newline at end of file
diff --git a/quickstep/res/drawable/gesture_tutorial_loop_home.xml b/quickstep/res/drawable/gesture_tutorial_loop_home.xml
index ed072a9526..931f8c0197 100644
--- a/quickstep/res/drawable/gesture_tutorial_loop_home.xml
+++ b/quickstep/res/drawable/gesture_tutorial_loop_home.xml
@@ -1 +1,96 @@
-<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"><aapt:attr name="android:drawable"><vector android:height="892dp" android:width="412dp" android:viewportHeight="892" android:viewportWidth="412"><group android:name="_R_G"><group android:name="_R_G_L_1_G" android:translateX="206" android:translateY="879.5"><path android:name="_R_G_L_1_G_D_0_P_0" android:fillColor="#84ba69" android:fillAlpha="0.25" android:fillType="nonZero" android:pathData=" M206 -12.5 C206,-12.5 206,12.5 206,12.5 C206,12.5 -206,12.5 -206,12.5 C-206,12.5 -206,-12.5 -206,-12.5 C-206,-12.5 206,-12.5 206,-12.5c "/></group><group android:name="_R_G_L_0_G" android:translateX="206" android:translateY="446"/></group><group android:name="time_group"/></vector></aapt:attr><target android:name="_R_G_L_1_G_D_0_P_0"><aapt:attr name="android:animation"><set android:ordering="together"><objectAnimator android:propertyName="fillAlpha" android:duration="1000" android:startOffset="0" android:valueFrom="0.25" android:valueTo="0.75" android:valueType="floatType"><aapt:attr name="android:interpolator"><pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0"/></aapt:attr></objectAnimator><objectAnimator android:propertyName="fillAlpha" android:duration="1000" android:startOffset="1000" android:valueFrom="0.75" android:valueTo="0.25" android:valueType="floatType"><aapt:attr name="android:interpolator"><pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0"/></aapt:attr></objectAnimator></set></aapt:attr></target><target android:name="_R_G_L_0_G"><aapt:attr name="android:animation"><set android:ordering="together"><objectAnimator android:propertyName="scaleY" android:duration="0" android:startOffset="0" android:valueFrom="0" android:valueTo="1" android:valueType="floatType"/></set></aapt:attr></target><target android:name="_R_G_L_0_G"><aapt:attr name="android:animation"><set android:ordering="together"><objectAnimator android:propertyName="scaleY" android:duration="0" android:startOffset="850" android:valueFrom="1" android:valueTo="0" android:valueType="floatType"/></set></aapt:attr></target><target android:name="time_group"><aapt:attr name="android:animation"><set android:ordering="together"><objectAnimator android:propertyName="translateX" android:duration="2000" android:startOffset="0" android:valueFrom="0" android:valueTo="1" android:valueType="floatType"/></set></aapt:attr></target></animated-vector>
\ No newline at end of file
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <target android:name="_R_G_L_1_G_D_0_P_0">
+        <aapt:attr name="android:animation">
+            <set android:ordering="together">
+                <objectAnimator
+                    android:duration="1000"
+                    android:propertyName="fillAlpha"
+                    android:startOffset="0"
+                    android:valueFrom="0.25"
+                    android:valueTo="0.75"
+                    android:valueType="floatType">
+                    <aapt:attr name="android:interpolator">
+                        <pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
+                    </aapt:attr>
+                </objectAnimator>
+                <objectAnimator
+                    android:duration="1000"
+                    android:propertyName="fillAlpha"
+                    android:startOffset="1000"
+                    android:valueFrom="0.75"
+                    android:valueTo="0.25"
+                    android:valueType="floatType">
+                    <aapt:attr name="android:interpolator">
+                        <pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
+                    </aapt:attr>
+                </objectAnimator>
+            </set>
+        </aapt:attr>
+    </target>
+    <target android:name="_R_G_L_0_G">
+        <aapt:attr name="android:animation">
+            <set android:ordering="together">
+                <objectAnimator
+                    android:duration="0"
+                    android:propertyName="scaleY"
+                    android:startOffset="0"
+                    android:valueFrom="0"
+                    android:valueTo="1"
+                    android:valueType="floatType" />
+            </set>
+        </aapt:attr>
+    </target>
+    <target android:name="_R_G_L_0_G">
+        <aapt:attr name="android:animation">
+            <set android:ordering="together">
+                <objectAnimator
+                    android:duration="0"
+                    android:propertyName="scaleY"
+                    android:startOffset="850"
+                    android:valueFrom="1"
+                    android:valueTo="0"
+                    android:valueType="floatType" />
+            </set>
+        </aapt:attr>
+    </target>
+    <target android:name="time_group">
+        <aapt:attr name="android:animation">
+            <set android:ordering="together">
+                <objectAnimator
+                    android:duration="2000"
+                    android:propertyName="translateX"
+                    android:startOffset="0"
+                    android:valueFrom="0"
+                    android:valueTo="1"
+                    android:valueType="floatType" />
+            </set>
+        </aapt:attr>
+    </target>
+    <aapt:attr name="android:drawable">
+        <vector
+            android:width="412dp"
+            android:height="892dp"
+            android:viewportHeight="892"
+            android:viewportWidth="412">
+            <group android:name="_R_G">
+                <group
+                    android:name="_R_G_L_1_G"
+                    android:translateX="206"
+                    android:translateY="879.5">
+                    <path
+                        android:name="_R_G_L_1_G_D_0_P_0"
+                        android:fillAlpha="0.25"
+                        android:fillColor="@color/gesture_tutorial_primary_color"
+                        android:fillType="nonZero"
+                        android:pathData=" M206 -12.5 C206,-12.5 206,12.5 206,12.5 C206,12.5 -206,12.5 -206,12.5 C-206,12.5 -206,-12.5 -206,-12.5 C-206,-12.5 206,-12.5 206,-12.5c " />
+                </group>
+                <group
+                    android:name="_R_G_L_0_G"
+                    android:translateX="206"
+                    android:translateY="446" />
+            </group>
+            <group android:name="time_group" />
+        </vector>
+    </aapt:attr>
+</animated-vector>
\ No newline at end of file
diff --git a/quickstep/res/drawable/gesture_tutorial_loop_left_edge.xml b/quickstep/res/drawable/gesture_tutorial_loop_left_edge.xml
deleted file mode 100644
index 07caaea042..0000000000
--- a/quickstep/res/drawable/gesture_tutorial_loop_left_edge.xml
+++ /dev/null
@@ -1,38 +0,0 @@
-<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="time_group">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="2000"
-                    android:propertyName="translateX"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <aapt:attr name="android:drawable">
-        <vector
-            android:width="412dp"
-            android:height="892dp"
-            android:viewportHeight="892"
-            android:viewportWidth="412">
-            <group android:name="_R_G">
-                <group
-                    android:name="_R_G_L_0_G"
-                    android:translateX="17.5"
-                    android:translateY="446">
-                    <path
-                        android:name="_R_G_L_0_G_D_0_P_0"
-                        android:fillAlpha="1"
-                        android:fillColor="#84ba69"
-                        android:fillType="nonZero"
-                        android:pathData=" M17.5 -446 C17.5,-446 17.5,446 17.5,446 C17.5,446 -17.5,446 -17.5,446 C-17.5,446 -17.5,-446 -17.5,-446 C-17.5,-446 17.5,-446 17.5,-446c " />
-                </group>
-            </group>
-            <group android:name="time_group" />
-        </vector>
-    </aapt:attr>
-</animated-vector>
\ No newline at end of file
diff --git a/quickstep/res/drawable/gesture_tutorial_loop_overview.xml b/quickstep/res/drawable/gesture_tutorial_loop_overview.xml
index acf0c4c9d0..a4c532bdfa 100644
--- a/quickstep/res/drawable/gesture_tutorial_loop_overview.xml
+++ b/quickstep/res/drawable/gesture_tutorial_loop_overview.xml
@@ -1 +1,96 @@
-<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"><aapt:attr name="android:drawable"><vector android:height="892dp" android:width="412dp" android:viewportHeight="892" android:viewportWidth="412"><group android:name="_R_G"><group android:name="_R_G_L_1_G" android:translateX="206" android:translateY="879.5"><path android:name="_R_G_L_1_G_D_0_P_0" android:fillColor="#84ba69" android:fillAlpha="0.25" android:fillType="nonZero" android:pathData=" M206 -12.5 C206,-12.5 206,12.5 206,12.5 C206,12.5 -206,12.5 -206,12.5 C-206,12.5 -206,-12.5 -206,-12.5 C-206,-12.5 206,-12.5 206,-12.5c "/></group><group android:name="_R_G_L_0_G" android:translateX="206" android:translateY="446"/></group><group android:name="time_group"/></vector></aapt:attr><target android:name="_R_G_L_1_G_D_0_P_0"><aapt:attr name="android:animation"><set android:ordering="together"><objectAnimator android:propertyName="fillAlpha" android:duration="1000" android:startOffset="0" android:valueFrom="0.25" android:valueTo="0.75" android:valueType="floatType"><aapt:attr name="android:interpolator"><pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0"/></aapt:attr></objectAnimator><objectAnimator android:propertyName="fillAlpha" android:duration="1000" android:startOffset="1000" android:valueFrom="0.75" android:valueTo="0.25" android:valueType="floatType"><aapt:attr name="android:interpolator"><pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0"/></aapt:attr></objectAnimator></set></aapt:attr></target><target android:name="_R_G_L_0_G"><aapt:attr name="android:animation"><set android:ordering="together"><objectAnimator android:propertyName="scaleY" android:duration="0" android:startOffset="0" android:valueFrom="0" android:valueTo="1" android:valueType="floatType"/></set></aapt:attr></target><target android:name="_R_G_L_0_G"><aapt:attr name="android:animation"><set android:ordering="together"><objectAnimator android:propertyName="scaleY" android:duration="0" android:startOffset="1500" android:valueFrom="1" android:valueTo="0" android:valueType="floatType"/></set></aapt:attr></target><target android:name="time_group"><aapt:attr name="android:animation"><set android:ordering="together"><objectAnimator android:propertyName="translateX" android:duration="2000" android:startOffset="0" android:valueFrom="0" android:valueTo="1" android:valueType="floatType"/></set></aapt:attr></target></animated-vector>
\ No newline at end of file
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <target android:name="_R_G_L_1_G_D_0_P_0">
+        <aapt:attr name="android:animation">
+            <set android:ordering="together">
+                <objectAnimator
+                    android:duration="1000"
+                    android:propertyName="fillAlpha"
+                    android:startOffset="0"
+                    android:valueFrom="0.25"
+                    android:valueTo="0.75"
+                    android:valueType="floatType">
+                    <aapt:attr name="android:interpolator">
+                        <pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
+                    </aapt:attr>
+                </objectAnimator>
+                <objectAnimator
+                    android:duration="1000"
+                    android:propertyName="fillAlpha"
+                    android:startOffset="1000"
+                    android:valueFrom="0.75"
+                    android:valueTo="0.25"
+                    android:valueType="floatType">
+                    <aapt:attr name="android:interpolator">
+                        <pathInterpolator android:pathData="M 0.0,0.0 c0.167,0.167 0.833,0.833 1.0,1.0" />
+                    </aapt:attr>
+                </objectAnimator>
+            </set>
+        </aapt:attr>
+    </target>
+    <target android:name="_R_G_L_0_G">
+        <aapt:attr name="android:animation">
+            <set android:ordering="together">
+                <objectAnimator
+                    android:duration="0"
+                    android:propertyName="scaleY"
+                    android:startOffset="0"
+                    android:valueFrom="0"
+                    android:valueTo="1"
+                    android:valueType="floatType" />
+            </set>
+        </aapt:attr>
+    </target>
+    <target android:name="_R_G_L_0_G">
+        <aapt:attr name="android:animation">
+            <set android:ordering="together">
+                <objectAnimator
+                    android:duration="0"
+                    android:propertyName="scaleY"
+                    android:startOffset="1500"
+                    android:valueFrom="1"
+                    android:valueTo="0"
+                    android:valueType="floatType" />
+            </set>
+        </aapt:attr>
+    </target>
+    <target android:name="time_group">
+        <aapt:attr name="android:animation">
+            <set android:ordering="together">
+                <objectAnimator
+                    android:duration="2000"
+                    android:propertyName="translateX"
+                    android:startOffset="0"
+                    android:valueFrom="0"
+                    android:valueTo="1"
+                    android:valueType="floatType" />
+            </set>
+        </aapt:attr>
+    </target>
+    <aapt:attr name="android:drawable">
+        <vector
+            android:width="412dp"
+            android:height="892dp"
+            android:viewportHeight="892"
+            android:viewportWidth="412">
+            <group android:name="_R_G">
+                <group
+                    android:name="_R_G_L_1_G"
+                    android:translateX="206"
+                    android:translateY="879.5">
+                    <path
+                        android:name="_R_G_L_1_G_D_0_P_0"
+                        android:fillAlpha="0.25"
+                        android:fillColor="@color/gesture_tutorial_primary_color"
+                        android:fillType="nonZero"
+                        android:pathData=" M206 -12.5 C206,-12.5 206,12.5 206,12.5 C206,12.5 -206,12.5 -206,12.5 C-206,12.5 -206,-12.5 -206,-12.5 C-206,-12.5 206,-12.5 206,-12.5c " />
+                </group>
+                <group
+                    android:name="_R_G_L_0_G"
+                    android:translateX="206"
+                    android:translateY="446" />
+            </group>
+            <group android:name="time_group" />
+        </vector>
+    </aapt:attr>
+</animated-vector>
\ No newline at end of file
diff --git a/quickstep/res/drawable/gesture_tutorial_loop_right_edge.xml b/quickstep/res/drawable/gesture_tutorial_loop_right_edge.xml
deleted file mode 100644
index d86b653e50..0000000000
--- a/quickstep/res/drawable/gesture_tutorial_loop_right_edge.xml
+++ /dev/null
@@ -1,38 +0,0 @@
-<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="time_group">
-        <aapt:attr name="android:animation">
-            <set android:ordering="together">
-                <objectAnimator
-                    android:duration="2000"
-                    android:propertyName="translateX"
-                    android:startOffset="0"
-                    android:valueFrom="0"
-                    android:valueTo="1"
-                    android:valueType="floatType" />
-            </set>
-        </aapt:attr>
-    </target>
-    <aapt:attr name="android:drawable">
-        <vector
-            android:width="412dp"
-            android:height="892dp"
-            android:viewportHeight="892"
-            android:viewportWidth="412">
-            <group android:name="_R_G">
-                <group
-                    android:name="_R_G_L_0_G"
-                    android:translateX="394.5"
-                    android:translateY="446">
-                    <path
-                        android:name="_R_G_L_0_G_D_0_P_0"
-                        android:fillAlpha="1"
-                        android:fillColor="#84ba69"
-                        android:fillType="nonZero"
-                        android:pathData=" M17.5 -446 C17.5,-446 17.5,446 17.5,446 C17.5,446 -17.5,446 -17.5,446 C-17.5,446 -17.5,-446 -17.5,-446 C-17.5,-446 17.5,-446 17.5,-446c " />
-                </group>
-            </group>
-            <group android:name="time_group" />
-        </vector>
-    </aapt:attr>
-</animated-vector>
\ No newline at end of file
diff --git a/quickstep/res/drawable/gesture_tutorial_motion_back_left.xml b/quickstep/res/drawable/gesture_tutorial_motion_back_left.xml
index e944c0e919..f5ad56916b 100644
--- a/quickstep/res/drawable/gesture_tutorial_motion_back_left.xml
+++ b/quickstep/res/drawable/gesture_tutorial_motion_back_left.xml
@@ -1401,7 +1401,7 @@
                     <path
                         android:name="_R_G_L_0_G_D_0_P_0"
                         android:fillAlpha="0"
-                        android:fillColor="#84ba69"
+                        android:fillColor="@color/gesture_tutorial_primary_color"
                         android:fillType="nonZero"
                         android:pathData=" M-206.5 13.5 C-186.34,13.5 -170,29.84 -170,50 C-170,70.16 -186.34,86.5 -206.5,86.5 C-226.66,86.5 -243,70.16 -243,50 C-243,29.84 -226.66,13.5 -206.5,13.5c " />
                 </group>
diff --git a/quickstep/res/drawable/gesture_tutorial_motion_back_right.xml b/quickstep/res/drawable/gesture_tutorial_motion_back_right.xml
index f8d649abb2..b898dc17a6 100644
--- a/quickstep/res/drawable/gesture_tutorial_motion_back_right.xml
+++ b/quickstep/res/drawable/gesture_tutorial_motion_back_right.xml
@@ -1402,7 +1402,7 @@
                     <path
                         android:name="_R_G_L_0_G_D_0_P_0"
                         android:fillAlpha="0"
-                        android:fillColor="#84ba69"
+                        android:fillColor="@color/gesture_tutorial_primary_color"
                         android:fillType="nonZero"
                         android:pathData=" M205 13.5 C225.16,13.5 241.5,29.84 241.5,50 C241.5,70.16 225.16,86.5 205,86.5 C184.84,86.5 168.5,70.16 168.5,50 C168.5,29.84 184.84,13.5 205,13.5c " />
                 </group>
diff --git a/quickstep/res/drawable/gesture_tutorial_motion_home.xml b/quickstep/res/drawable/gesture_tutorial_motion_home.xml
index 9dbaee6247..87b885715c 100644
--- a/quickstep/res/drawable/gesture_tutorial_motion_home.xml
+++ b/quickstep/res/drawable/gesture_tutorial_motion_home.xml
@@ -1243,7 +1243,7 @@
                     <path
                         android:name="_R_G_L_0_G_D_0_P_0"
                         android:fillAlpha="0"
-                        android:fillColor="#84ba69"
+                        android:fillColor="@color/gesture_tutorial_primary_color"
                         android:fillType="nonZero"
                         android:pathData=" M0 411 C19.33,411 35,426.67 35,446 C35,465.33 19.33,481 0,481 C-19.33,481 -35,465.33 -35,446 C-35,426.67 -19.33,411 0,411c " />
                 </group>
diff --git a/quickstep/res/drawable/gesture_tutorial_motion_overview.xml b/quickstep/res/drawable/gesture_tutorial_motion_overview.xml
index 4751fa9e2b..058bee2ef0 100644
--- a/quickstep/res/drawable/gesture_tutorial_motion_overview.xml
+++ b/quickstep/res/drawable/gesture_tutorial_motion_overview.xml
@@ -1612,7 +1612,7 @@
                     <path
                         android:name="_R_G_L_0_G_D_0_P_0"
                         android:fillAlpha="0"
-                        android:fillColor="#84ba69"
+                        android:fillColor="@color/gesture_tutorial_primary_color"
                         android:fillType="nonZero"
                         android:pathData=" M0 406 C21.54,406 39,423.46 39,445 C39,466.54 21.54,484 0,484 C-21.54,484 -39,466.54 -39,445 C-39,423.46 -21.54,406 0,406c " />
                 </group>
diff --git a/quickstep/res/drawable/tutorial_step_indicator_pill.xml b/quickstep/res/drawable/tutorial_step_indicator_pill.xml
new file mode 100644
index 0000000000..94a8748e64
--- /dev/null
+++ b/quickstep/res/drawable/tutorial_step_indicator_pill.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="10dp"/>
+    <size android:width="16dp" android:height="6dp"/>
+</shape>
\ No newline at end of file
diff --git a/quickstep/res/layout/gesture_tutorial_fragment.xml b/quickstep/res/layout/gesture_tutorial_fragment.xml
index 5f827309d9..a884e745e2 100644
--- a/quickstep/res/layout/gesture_tutorial_fragment.xml
+++ b/quickstep/res/layout/gesture_tutorial_fragment.xml
@@ -88,27 +88,15 @@
         android:padding="24dp"
         android:background="@drawable/bg_sandbox_feedback">
 
-        <ImageButton
-            android:id="@+id/gesture_tutorial_fragment_close_button"
-            android:layout_width="32dp"
-            android:layout_height="32dp"
-            android:src="@drawable/close_icon"
-            android:background="@drawable/bg_sandbox_close_button"
-            android:contentDescription="@string/gesture_tutorial_close_button_content_description"
-
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"/>
-
         <TextView
             android:id="@+id/gesture_tutorial_fragment_feedback_title"
             style="@style/TextAppearance.GestureTutorial.Feedback.Title"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginTop="16dp"
 
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/gesture_tutorial_fragment_close_button"/>
+            app:layout_constraintTop_toTopOf="parent"/>
 
         <TextView
             android:id="@+id/gesture_tutorial_fragment_feedback_subtitle"
@@ -121,14 +109,13 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toBottomOf="@id/gesture_tutorial_fragment_feedback_title"/>
 
-        <TextView
+        <com.android.quickstep.interaction.TutorialStepIndicator
             android:id="@+id/gesture_tutorial_fragment_feedback_tutorial_step"
-            style="@style/TextAppearance.GestureTutorial.Feedback.Subtext"
-            android:layout_width="0dp"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
 
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toStartOf="@id/gesture_tutorial_fragment_action_button"
+            app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="@id/gesture_tutorial_fragment_action_button"
             app:layout_constraintBottom_toBottomOf="@id/gesture_tutorial_fragment_action_button"/>
 
@@ -144,6 +131,7 @@
             android:paddingBottom="8dp"
             android:paddingStart="16dp"
             android:paddingEnd="16dp"
+            android:text="@string/gesture_tutorial_action_button_label_next"
             android:background="@drawable/gesture_tutorial_action_button_background"
             android:foreground="?android:attr/selectableItemBackgroundBorderless"
             android:stateListAnimator="@null"
@@ -152,6 +140,19 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toBottomOf="@id/gesture_tutorial_fragment_feedback_subtitle"/>
 
+        <Button
+            style="@style/TextAppearance.GestureTutorial.Feedback.Subtext"
+            android:id="@+id/gesture_tutorial_fragment_close_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/gesture_tutorial_action_button_label_skip"
+            android:background="?android:attr/selectableItemBackgroundBorderless"
+
+            app:layout_constraintTop_toTopOf="@id/gesture_tutorial_fragment_action_button"
+            app:layout_constraintBottom_toBottomOf="@id/gesture_tutorial_fragment_action_button"
+            app:layout_constraintStart_toStartOf="@id/gesture_tutorial_fragment_action_button"
+            app:layout_constraintEnd_toEndOf="@id/gesture_tutorial_fragment_action_button"/>
+
     </androidx.constraintlayout.widget.ConstraintLayout>
 
 </com.android.quickstep.interaction.RootSandboxLayout>
\ No newline at end of file
diff --git a/quickstep/res/values/strings.xml b/quickstep/res/values/strings.xml
index 2c8687c73a..3f75d324ea 100644
--- a/quickstep/res/values/strings.xml
+++ b/quickstep/res/values/strings.xml
@@ -97,7 +97,7 @@
     <string name="back_gesture_feedback_cancelled_left_edge">Make sure you swipe from the left edge to the middle of the screen and let go.</string>
     <!-- Feedback title shown after completing the left back gesture before continuing on to the right edge. [CHAR LIMIT=60] -->
     <string name="back_gesture_feedback_title_complete_left_edge">Nice! Now swipe from the right to go back</string>
-    <!-- Feedback subtitle shown after completing the left back gesture before continuing on to the right edge. [CHAR LIMIT=60] -->
+    <!-- Feedback subtitle shown after completing the left back gesture before continuing on to the right edge. [CHAR LIMIT=200] -->
     <string name="back_gesture_feedback_subtitle_complete_left_edge">You can also go back to the last screen by swiping from the right edge to the middle of the screen.</string>
     <!-- Feedback shown during interactive parts of Back gesture tutorial for right edge when the gesture is too far from the edge. [CHAR LIMIT=100] -->
     <string name="back_gesture_feedback_swipe_too_far_from_right_edge">Make sure you swipe from the far-right edge.</string>
@@ -176,8 +176,6 @@
     <string name="gesture_tutorial_confirm_title">All set</string>
     <!-- Button text shown on a button on the feedback popup to proceed to the next tutorial step. [CHAR LIMIT=14] -->
     <string name="gesture_tutorial_action_button_label_next">Next</string>
-    <!-- Button text shown on a button on the feedback popup to complete the tutorial. [CHAR LIMIT=14] -->
-    <string name="gesture_tutorial_action_button_label_done">Done</string>
     <!-- Button text shown on a button to go to Settings. [CHAR LIMIT=14] -->
     <string name="gesture_tutorial_action_button_label_settings">Settings</string>
     <!-- Feedback title to try again. [CHAR LIMIT=30] -->
diff --git a/quickstep/res/values/styles.xml b/quickstep/res/values/styles.xml
index 0a8ecb8bde..cfca1246ad 100644
--- a/quickstep/res/values/styles.xml
+++ b/quickstep/res/values/styles.xml
@@ -77,7 +77,13 @@
     <style name="TextAppearance.GestureTutorial.Feedback.Subtext"
         parent="TextAppearance.GestureTutorial.Feedback.Subtitle">
         <item name="android:textSize">16sp</item>
-        <item name="android:textColor">#909090</item>
+        <item name="android:textColor">@color/gesture_tutorial_primary_color</item>
+        <item name="android:gravity">center</item>
+    </style>
+
+    <style name="TextAppearance.GestureTutorial.Feedback.Subtext.Dark"
+        parent="TextAppearance.GestureTutorial.Feedback.Subtext">
+        <item name="android:textColor">?android:attr/textColorPrimary</item>
     </style>
 
     <style name="TextAppearance.GestureTutorial.ButtonLabel"
diff --git a/quickstep/src/com/android/quickstep/interaction/TutorialController.java b/quickstep/src/com/android/quickstep/interaction/TutorialController.java
index f9d5c94375..a03e37e52d 100644
--- a/quickstep/src/com/android/quickstep/interaction/TutorialController.java
+++ b/quickstep/src/com/android/quickstep/interaction/TutorialController.java
@@ -15,6 +15,8 @@
  */
 package com.android.quickstep.interaction;
 
+import static android.view.View.GONE;
+
 import android.content.Context;
 import android.content.pm.PackageManager;
 import android.graphics.drawable.Animatable2;
@@ -26,7 +28,6 @@ import android.util.Log;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.Button;
-import android.widget.ImageButton;
 import android.widget.ImageView;
 import android.widget.TextView;
 
@@ -38,6 +39,7 @@ import androidx.appcompat.app.AlertDialog;
 import androidx.appcompat.content.res.AppCompatResources;
 
 import com.android.launcher3.R;
+import com.android.launcher3.Utilities;
 import com.android.launcher3.anim.AnimatorListeners;
 import com.android.launcher3.views.ClipIconView;
 import com.android.quickstep.interaction.EdgeBackGestureHandler.BackGestureAttemptCallback;
@@ -51,7 +53,7 @@ abstract class TutorialController implements BackGestureAttemptCallback,
     private static final String PIXEL_TIPS_APP_PACKAGE_NAME = "com.google.android.apps.tips";
     private static final CharSequence DEFAULT_PIXEL_TIPS_APP_NAME = "Pixel Tips";
 
-    private static final int FEEDBACK_VISIBLE_MS = 2500;
+    private static final int FEEDBACK_VISIBLE_MS = 5000;
     private static final int FEEDBACK_ANIMATION_MS = 250;
     private static final int RIPPLE_VISIBLE_MS = 300;
 
@@ -59,7 +61,7 @@ abstract class TutorialController implements BackGestureAttemptCallback,
     TutorialType mTutorialType;
     final Context mContext;
 
-    final ImageButton mCloseButton;
+    final TextView mCloseButton;
     final ViewGroup mFeedbackView;
     final ImageView mFeedbackVideoView;
     final ImageView mGestureVideoView;
@@ -70,7 +72,7 @@ abstract class TutorialController implements BackGestureAttemptCallback,
     final View mRippleView;
     final RippleDrawable mRippleDrawable;
     final Button mActionButton;
-    final TextView mTutorialStepView;
+    final TutorialStepIndicator mTutorialStepView;
     private final Runnable mHideFeedbackRunnable;
     Runnable mHideFeedbackEndAction;
     private final AlertDialog mSkipTutorialDialog;
@@ -226,7 +228,7 @@ abstract class TutorialController implements BackGestureAttemptCallback,
                     public void onAnimationStart(Drawable drawable) {
                         super.onAnimationStart(drawable);
 
-                        mGestureVideoView.setVisibility(View.GONE);
+                        mGestureVideoView.setVisibility(GONE);
                         if (gestureAnimation.isRunning()) {
                             gestureAnimation.stop();
                         }
@@ -238,6 +240,8 @@ abstract class TutorialController implements BackGestureAttemptCallback,
                                 .setDuration(FEEDBACK_ANIMATION_MS)
                                 .translationY(0)
                                 .start();
+                        mFeedbackView.removeCallbacks(mHideFeedbackRunnable);
+                        mFeedbackView.postDelayed(mHideFeedbackRunnable, FEEDBACK_VISIBLE_MS);
                     }
 
                     @Override
@@ -247,9 +251,6 @@ abstract class TutorialController implements BackGestureAttemptCallback,
                         mGestureVideoView.setVisibility(View.VISIBLE);
                         gestureAnimation.start();
 
-                        mFeedbackView.removeCallbacks(mHideFeedbackRunnable);
-                        mFeedbackView.post(mHideFeedbackRunnable);
-
                         tutorialAnimation.unregisterAnimationCallback(this);
                     }
                 });
@@ -322,32 +323,25 @@ abstract class TutorialController implements BackGestureAttemptCallback,
     }
 
     void hideActionButton() {
+        mCloseButton.setVisibility(View.VISIBLE);
+        mCloseButton.setTextAppearance(Utilities.isDarkTheme(mContext)
+                ? R.style.TextAppearance_GestureTutorial_Feedback_Subtext
+                : R.style.TextAppearance_GestureTutorial_Feedback_Subtext_Dark);
+
         // Invisible to maintain the layout.
         mActionButton.setVisibility(View.INVISIBLE);
         mActionButton.setOnClickListener(null);
     }
 
     void showActionButton() {
-        int stringResId = -1;
-
-        if (mContext instanceof GestureSandboxActivity) {
-            GestureSandboxActivity sandboxActivity = (GestureSandboxActivity) mContext;
-
-            stringResId = sandboxActivity.isTutorialComplete()
-                    ? R.string.gesture_tutorial_action_button_label_done
-                    : R.string.gesture_tutorial_action_button_label_next;
-        }
-
-        mActionButton.setText(stringResId == -1 ? null : mContext.getString(stringResId));
+        mCloseButton.setVisibility(GONE);
         mActionButton.setVisibility(View.VISIBLE);
         mActionButton.setOnClickListener(this::onActionButtonClicked);
     }
 
     private void updateSubtext() {
-        mTutorialStepView.setText(mContext.getString(
-                R.string.gesture_tutorial_step,
-                mTutorialFragment.getCurrentStep(),
-                mTutorialFragment.getNumSteps()));
+        mTutorialStepView.setTutorialProgress(
+                mTutorialFragment.getCurrentStep(), mTutorialFragment.getNumSteps());
     }
 
     private void updateDrawables() {
diff --git a/quickstep/src/com/android/quickstep/interaction/TutorialStepIndicator.java b/quickstep/src/com/android/quickstep/interaction/TutorialStepIndicator.java
new file mode 100644
index 0000000000..eda61583fa
--- /dev/null
+++ b/quickstep/src/com/android/quickstep/interaction/TutorialStepIndicator.java
@@ -0,0 +1,118 @@
+/*
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.android.quickstep.interaction;
+
+import android.content.Context;
+import android.graphics.drawable.Drawable;
+import android.util.AttributeSet;
+import android.util.Log;
+import android.widget.ImageView;
+import android.widget.LinearLayout;
+
+import androidx.appcompat.content.res.AppCompatResources;
+
+import com.android.launcher3.R;
+import com.android.launcher3.Utilities;
+import com.android.launcher3.icons.GraphicsUtils;
+
+/** Indicator displaying the current progress through the gesture navigation tutorial. */
+public class TutorialStepIndicator extends LinearLayout {
+
+    private static final String LOG_TAG = "TutorialStepIndicator";
+
+    private int mCurrentStep = -1;
+    private int mTotalSteps = -1;
+
+    public TutorialStepIndicator(Context context) {
+        super(context);
+    }
+
+    public TutorialStepIndicator(Context context, AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    public TutorialStepIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+    }
+
+    public TutorialStepIndicator(Context context, AttributeSet attrs, int defStyleAttr,
+            int defStyleRes) {
+        super(context, attrs, defStyleAttr, defStyleRes);
+    }
+
+    /**
+     * Updates this indicator to display totalSteps indicator pills, with the first currentStep
+     * pills highlighted.
+     */
+    public void setTutorialProgress(int currentStep, int totalSteps) {
+        if (currentStep <= 0) {
+            Log.w(LOG_TAG, "Current step number invalid: " + currentStep + ". Assuming step 1.");
+            currentStep = 1;
+        }
+        if (totalSteps <= 0) {
+            Log.w(LOG_TAG, "Total number of steps invalid: " + totalSteps + ". Assuming 1 step.");
+            totalSteps = 1;
+        }
+        if (currentStep > totalSteps) {
+            Log.w(LOG_TAG, "Current step number greater than the total number of steps. Assuming"
+                    + " final step.");
+            currentStep = totalSteps;
+        }
+        if (totalSteps < 2) {
+            setVisibility(GONE);
+            return;
+        }
+        setVisibility(VISIBLE);
+        mCurrentStep = currentStep;
+        mTotalSteps = totalSteps;
+
+        initializeStepIndicators();
+    }
+
+    private void initializeStepIndicators() {
+        for (int i = mTotalSteps; i < getChildCount(); i++) {
+            removeViewAt(i);
+        }
+        for (int i = 0; i < mTotalSteps; i++) {
+            Drawable pageIndicatorPillDrawable = AppCompatResources.getDrawable(
+                    getContext(), R.drawable.tutorial_step_indicator_pill);
+
+            if (i >= getChildCount()) {
+                ImageView pageIndicatorPill = new ImageView(getContext());
+                pageIndicatorPill.setImageDrawable(pageIndicatorPillDrawable);
+
+                LinearLayout.LayoutParams lp = new LayoutParams(
+                        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
+
+                lp.setMarginStart(Utilities.dpToPx(3));
+                lp.setMarginEnd(Utilities.dpToPx(3));
+
+                addView(pageIndicatorPill, lp);
+            }
+            if (pageIndicatorPillDrawable != null) {
+                if (i < mCurrentStep) {
+                    pageIndicatorPillDrawable.setTint(
+                            GraphicsUtils.getAttrColor(getContext(),
+                                    android.R.attr.textColorPrimary));
+                } else {
+                    pageIndicatorPillDrawable.setTint(
+                            GraphicsUtils.getAttrColor(getContext(),
+                                    android.R.attr.textColorPrimaryInverse));
+                }
+            }
+        }
+    }
+}