Use Lottie animation for traffic light face education

Test: Manual

Bug: 182716681
Change-Id: Ia4c9dea5c900c71ec7eca7946cf090fd02b436e2

5 files changed, 51 insertions, 7 deletions

diff --git a/Android.bp b/Android.bp
index 2d4c42c4f40..bb9db22e8da 100644
--- a/Android.bp
+++ b/Android.bp
@@ -72,6 +72,7 @@ android_library {
         "zxing-core-1.7",
         "android.hardware.dumpstate-V1.0-java",
         "android.hardware.dumpstate-V1.1-java",
+        "lottie",
     ],
 
     libs: [
diff --git a/res/layout/face_enroll_education.xml b/res/layout/face_enroll_education.xml
index 4ef32b77854..646856fcfdd 100644
--- a/res/layout/face_enroll_education.xml
+++ b/res/layout/face_enroll_education.xml
@@ -41,12 +41,22 @@
             android:layout_marginVertical="12dp">
 
             <com.google.android.setupdesign.view.IllustrationVideoView
-                android:id="@+id/illustration_normal"
+                android:id="@+id/illustration_default"
                 style="@style/SudContentIllustration"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 app:sudVideo="@raw/face_education"/>
 
+            <com.airbnb.lottie.LottieAnimationView
+                android:id="@+id/illustration_lottie"
+                android:layout_width="match_parent"
+                android:layout_height="340dp"
+                android:scaleType="fitCenter"
+                android:visibility="invisible"
+                app:lottie_autoPlay="true"
+                app:lottie_loop="true"
+                app:lottie_rawRes="@raw/face_education_lottie" />
+
             <ImageView
                 android:id="@+id/illustration_accessibility"
                 android:layout_width="wrap_content"
diff --git a/res/raw/face_education_lottie.json b/res/raw/face_education_lottie.json
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/res/raw/face_education_lottie.json
diff --git a/res/values/config.xml b/res/values/config.xml
index 1e2855b459f..9cf48b1b46d 100755
--- a/res/values/config.xml
+++ b/res/values/config.xml
@@ -269,6 +269,9 @@
     <!-- ComponentName to launch a vendor-specific enrollment activity if available -->
     <string name="config_face_enroll" translatable="false"></string>
 
+    <!-- Whether to use the Lottie animation for the face education enrollment screen -->
+    <bool name="config_face_education_use_lottie">false</bool>
+
     <!-- App intent -->
     <string name="config_account_intent_uri" translatable="false"></string>
 
diff --git a/src/com/android/settings/biometrics/face/FaceEnrollEducation.java b/src/com/android/settings/biometrics/face/FaceEnrollEducation.java
index 2ad40706099..49a4748baaf 100644
--- a/src/com/android/settings/biometrics/face/FaceEnrollEducation.java
+++ b/src/com/android/settings/biometrics/face/FaceEnrollEducation.java
@@ -37,6 +37,7 @@ import com.android.settings.biometrics.BiometricEnrollBase;
 import com.android.settings.biometrics.BiometricUtils;
 import com.android.settings.password.ChooseLockSettingsHelper;
 
+import com.airbnb.lottie.LottieAnimationView;
 import com.google.android.setupcompat.template.FooterBarMixin;
 import com.google.android.setupcompat.template.FooterButton;
 import com.google.android.setupcompat.util.WizardManagerHelper;
@@ -52,7 +53,9 @@ public class FaceEnrollEducation extends BiometricEnrollBase {
     private FaceManager mFaceManager;
     private FaceEnrollAccessibilityToggle mSwitchDiversity;
 
-    private IllustrationVideoView mIllustrationNormal;
+    private boolean mIsUsingLottie;
+    private IllustrationVideoView mIllustrationDefault;
+    private LottieAnimationView mIllustrationLottie;
     private View mIllustrationAccessibility;
     private Handler mHandler;
     private Intent mResultIntent;
@@ -78,12 +81,10 @@ public class FaceEnrollEducation extends BiometricEnrollBase {
                     updateHeaders(headerRes, descriptionRes);
 
                     if (isChecked) {
-                        mIllustrationNormal.stop();
-                        mIllustrationNormal.setVisibility(View.INVISIBLE);
+                        hideDefaultIllustration();
                         mIllustrationAccessibility.setVisibility(View.VISIBLE);
                     } else {
-                        mIllustrationNormal.setVisibility(View.VISIBLE);
-                        mIllustrationNormal.start();
+                        showDefaultIllustration();
                         mIllustrationAccessibility.setVisibility(View.INVISIBLE);
                     }
                 }
@@ -102,10 +103,19 @@ public class FaceEnrollEducation extends BiometricEnrollBase {
 
         mFaceManager = Utils.getFaceManagerOrNull(this);
 
-        mIllustrationNormal = findViewById(R.id.illustration_normal);
+        mIllustrationDefault = findViewById(R.id.illustration_default);
+        mIllustrationLottie = findViewById(R.id.illustration_lottie);
         mIllustrationAccessibility = findViewById(R.id.illustration_accessibility);
         mDescriptionText = findViewById(R.id.sud_layout_description);
 
+        mIsUsingLottie = getResources().getBoolean(R.bool.config_face_education_use_lottie);
+        if (mIsUsingLottie) {
+            mIllustrationDefault.stop();
+            mIllustrationDefault.setVisibility(View.INVISIBLE);
+            mIllustrationLottie.setVisibility(View.VISIBLE);
+            mIllustrationLottie.playAnimation();
+        }
+
         mFooterBarMixin = getLayout().getMixin(FooterBarMixin.class);
 
         if (WizardManagerHelper.isAnySetupWizard(getIntent())) {
@@ -256,4 +266,24 @@ public class FaceEnrollEducation extends BiometricEnrollBase {
         layout.setHeaderText(headerText);
         layout.setDescriptionText(descriptionRes);
     }
+
+    private void hideDefaultIllustration() {
+        if (mIsUsingLottie) {
+            mIllustrationLottie.cancelAnimation();
+            mIllustrationLottie.setVisibility(View.INVISIBLE);
+        } else {
+            mIllustrationDefault.stop();
+            mIllustrationDefault.setVisibility(View.INVISIBLE);
+        }
+    }
+
+    private void showDefaultIllustration() {
+        if (mIsUsingLottie) {
+            mIllustrationLottie.setVisibility(View.VISIBLE);
+            mIllustrationLottie.playAnimation();
+        } else {
+            mIllustrationDefault.setVisibility(View.VISIBLE);
+            mIllustrationDefault.start();
+        }
+    }
 }