Update the instruction images in Accessibility tutorial dialog.

1. Update the material next style.
2. Support for Lottie image.

Bug: 195094388
Test: manual test
Change-Id: I57306532b10e91c927bdc1ef5e115f41bc7a939b

src/com/android/settings/accessibility/AccessibilityGestureNavigationTutorial.java

@@ -29,12 +29,14 @@ import android.text.Spannable;
 import android.text.SpannableString;
 import android.text.SpannableStringBuilder;
 import android.text.style.ImageSpan;
+import android.util.Log;
 import android.view.Gravity;
 import android.view.LayoutInflater;
 import android.view.TextureView;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.Window;
+import android.widget.FrameLayout;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.TextSwitcher;
@@ -42,8 +44,10 @@ import android.widget.TextView;
 
 import androidx.annotation.AnimRes;
 import androidx.annotation.ColorInt;
+import androidx.annotation.DrawableRes;
 import androidx.annotation.IntDef;
 import androidx.annotation.NonNull;
+import androidx.annotation.RawRes;
 import androidx.annotation.VisibleForTesting;
 import androidx.appcompat.app.AlertDialog;
 import androidx.core.content.ContextCompat;
@@ -54,6 +58,9 @@ import androidx.viewpager.widget.ViewPager;
 
 import com.android.settings.R;
 
+import com.airbnb.lottie.LottieAnimationView;
+import com.airbnb.lottie.LottieDrawable;
+
 import java.lang.annotation.Retention;
 import java.lang.annotation.RetentionPolicy;
 import java.util.ArrayList;
@@ -64,6 +71,8 @@ import java.util.List;
  * accessibility services.
  */
 public final class AccessibilityGestureNavigationTutorial {
+    private static final String TAG = "AccessibilityGestureNavigationTutorial";
+
     /** IntDef enum for dialog type. */
     @Retention(RetentionPolicy.SOURCE)
     @IntDef({
@@ -239,7 +248,7 @@ public final class AccessibilityGestureNavigationTutorial {
         @NonNull
         @Override
         public Object instantiateItem(@NonNull ViewGroup container, int position) {
-            final View itemView = mTutorialPages.get(position).getImageView();
+            final View itemView = mTutorialPages.get(position).getIllustrationView();
             container.addView(itemView);
             return itemView;
         }
@@ -257,7 +266,7 @@ public final class AccessibilityGestureNavigationTutorial {
         @Override
         public void destroyItem(@NonNull ViewGroup container, int position,
                 @NonNull Object object) {
-            final View itemView = mTutorialPages.get(position).getImageView();
+            final View itemView = mTutorialPages.get(position).getIllustrationView();
             container.removeView(itemView);
         }
     }
@@ -270,6 +279,34 @@ public final class AccessibilityGestureNavigationTutorial {
         return imageView;
     }
 
+    private static View createIllustrationView(Context context, @DrawableRes int imageRes) {
+        final View illustrationFrame = inflateAndInitIllustrationFrame(context);
+        final LottieAnimationView lottieView = illustrationFrame.findViewById(R.id.image);
+        lottieView.setImageResource(imageRes);
+
+        return illustrationFrame;
+    }
+
+    private static View createIllustrationViewWithImageRawResource(Context context,
+            @RawRes int imageRawRes) {
+        final View illustrationFrame = inflateAndInitIllustrationFrame(context);
+        final LottieAnimationView lottieView = illustrationFrame.findViewById(R.id.image);
+        lottieView.setFailureListener(
+                result -> Log.w(TAG, "Invalid image raw resource id: " + imageRawRes,
+                        result));
+        lottieView.setAnimation(imageRawRes);
+        lottieView.setRepeatCount(LottieDrawable.INFINITE);
+        lottieView.playAnimation();
+
+        return illustrationFrame;
+    }
+
+    private static View inflateAndInitIllustrationFrame(Context context) {
+        final LayoutInflater inflater = context.getSystemService(LayoutInflater.class);
+
+        return inflater.inflate(R.layout.accessibility_lottie_animation_view, /* root= */ null);
+    }
+
     private static View createShortcutNavigationContentView(Context context, int shortcutTypes) {
         final LayoutInflater inflater = context.getSystemService(LayoutInflater.class);
         final View contentView = inflater.inflate(
@@ -325,7 +362,7 @@ public final class AccessibilityGestureNavigationTutorial {
 
     private static TutorialPage createSoftwareTutorialPage(@NonNull Context context) {
         final CharSequence title = getSoftwareTitle(context);
-        final ImageView image = createSoftwareImage(context);
+        final View image = createSoftwareImage(context);
         final CharSequence instruction = getSoftwareInstruction(context);
         final ImageView indicatorIcon =
                 createImageView(context, R.drawable.ic_accessibility_page_indicator);
@@ -337,8 +374,8 @@ public final class AccessibilityGestureNavigationTutorial {
     private static TutorialPage createHardwareTutorialPage(@NonNull Context context) {
         final CharSequence title =
                 context.getText(R.string.accessibility_tutorial_dialog_title_volume);
-        final ImageView image =
+        final View image =
-                createImageView(context, R.drawable.accessibility_shortcut_type_hardware);
+                createIllustrationView(context, R.drawable.accessibility_shortcut_type_hardware);
         final ImageView indicatorIcon =
                 createImageView(context, R.drawable.ic_accessibility_page_indicator);
         final CharSequence instruction =
@@ -351,8 +388,9 @@ public final class AccessibilityGestureNavigationTutorial {
     private static TutorialPage createTripleTapTutorialPage(@NonNull Context context) {
         final CharSequence title =
                 context.getText(R.string.accessibility_tutorial_dialog_title_triple);
-        final ImageView image =
+        final View image =
-                createImageView(context, R.raw.accessibility_shortcut_type_triple_tap);
+                createIllustrationViewWithImageRawResource(context,
+                        R.raw.accessibility_shortcut_type_triple_tap);
         final CharSequence instruction =
                 context.getText(R.string.accessibility_tutorial_dialog_message_triple);
         final ImageView indicatorIcon =
@@ -381,7 +419,7 @@ public final class AccessibilityGestureNavigationTutorial {
         return tutorialPages;
     }
 
-    private static ImageView createSoftwareImage(Context context) {
+    private static View createSoftwareImage(Context context) {
         int resId;
         if (AccessibilityUtil.isFloatingMenuEnabled(context)) {
             resId = R.drawable.accessibility_shortcut_type_software_floating;
@@ -392,7 +430,7 @@ public final class AccessibilityGestureNavigationTutorial {
         } else {
             resId = R.drawable.accessibility_shortcut_type_software;
         }
-        return createImageView(context, resId);
+        return createIllustrationView(context, resId);
     }
 
     private static CharSequence getSoftwareTitle(Context context) {
@@ -444,24 +482,26 @@ public final class AccessibilityGestureNavigationTutorial {
 
     private static class TutorialPage {
         private final CharSequence mTitle;
-        private final ImageView mImageView;
+        private final View mIllustrationView;
         private final ImageView mIndicatorIcon;
         private final CharSequence mInstruction;
 
-        TutorialPage(CharSequence title, ImageView imageView, ImageView indicatorIcon,
+        TutorialPage(CharSequence title, View illustrationView, ImageView indicatorIcon,
                 CharSequence instruction) {
             this.mTitle = title;
-            this.mImageView = imageView;
+            this.mIllustrationView = illustrationView;
             this.mIndicatorIcon = indicatorIcon;
             this.mInstruction = instruction;
+
+            setupIllustrationChildViewsGravity();
         }
 
         public CharSequence getTitle() {
             return mTitle;
         }
 
-        public ImageView getImageView() {
+        public View getIllustrationView() {
-            return mImageView;
+            return mIllustrationView;
         }
 
         public ImageView getIndicatorIcon() {
@@ -471,6 +511,23 @@ public final class AccessibilityGestureNavigationTutorial {
         public CharSequence getInstruction() {
             return mInstruction;
         }
+
+        private void setupIllustrationChildViewsGravity() {
+            final View backgroundView = mIllustrationView.findViewById(R.id.image_background);
+            initViewGravity(backgroundView);
+
+            final View lottieView = mIllustrationView.findViewById(R.id.image);
+            initViewGravity(lottieView);
+        }
+
+        private void initViewGravity(@NonNull View view) {
+            final FrameLayout.LayoutParams layoutParams =
+                    new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT,
+                            FrameLayout.LayoutParams.WRAP_CONTENT);
+            layoutParams.gravity = Gravity.CENTER;
+
+            view.setLayoutParams(layoutParams);
+        }
     }
 
     private static class TutorialPageChangeListener implements ViewPager.OnPageChangeListener {