diff --git a/packages/SettingsLib/IllustrationPreference/res/layout/illustration_preference.xml b/packages/SettingsLib/IllustrationPreference/res/layout/illustration_preference.xml
index 3f8439c2db47c..efcd41c2778bc 100644
--- a/packages/SettingsLib/IllustrationPreference/res/layout/illustration_preference.xml
+++ b/packages/SettingsLib/IllustrationPreference/res/layout/illustration_preference.xml
@@ -20,35 +20,38 @@
     android:layout_height="wrap_content"
     android:layout_width="match_parent"
     android:background="?android:attr/colorBackground"
+    android:importantForAccessibility="noHideDescendants"
     android:gravity="center"
     android:orientation="horizontal">
 
-    <LinearLayout
-        android:layout_width="match_parent"
+    <FrameLayout
+        android:id="@+id/illustration_frame"
+        android:layout_width="wrap_content"
         android:layout_height="@dimen/settingslib_illustration_height"
         android:layout_gravity="center"
         android:gravity="center_vertical"
         android:padding="@dimen/settingslib_illustration_padding"
         android:orientation="vertical">
+
+        <View
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@drawable/protection_background"/>
+
         <com.airbnb.lottie.LottieAnimationView
             android:id="@+id/lottie_view"
-            android:adjustViewBounds="true"
-            android:maxWidth="@dimen/settingslib_illustration_width"
-            android:layout_width="wrap_content"
+            android:layout_width="match_parent"
             android:layout_height="match_parent"
-            android:layout_gravity="center"
-            android:clipToOutline="true"
-            android:background="@drawable/protection_background"
-            android:importantForAccessibility="no"/>
-    </LinearLayout>
+            android:layout_gravity="center" />
+
+        <FrameLayout
+            android:id="@+id/middleground_layout"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@android:color/transparent"
+            android:layout_gravity="center"
+            android:visibility="gone"/>
+    </FrameLayout>
 
-    <FrameLayout
-        android:id="@+id/middleground_layout"
-        android:layout_width="@dimen/settingslib_illustration_width"
-        android:layout_height="@dimen/settingslib_illustration_height"
-        android:padding="@dimen/settingslib_illustration_padding"
-        android:background="@android:color/transparent"
-        android:layout_gravity="center"
-        android:visibility="gone"/>
 </FrameLayout>
 
diff --git a/packages/SettingsLib/IllustrationPreference/src/com/android/settingslib/widget/IllustrationPreference.java b/packages/SettingsLib/IllustrationPreference/src/com/android/settingslib/widget/IllustrationPreference.java
index 8e6c5799da676..e91dd94c715df 100644
--- a/packages/SettingsLib/IllustrationPreference/src/com/android/settingslib/widget/IllustrationPreference.java
+++ b/packages/SettingsLib/IllustrationPreference/src/com/android/settingslib/widget/IllustrationPreference.java
@@ -21,6 +21,7 @@ import android.content.res.TypedArray;
 import android.util.AttributeSet;
 import android.util.Log;
 import android.view.View;
+import android.view.ViewGroup.LayoutParams;
 import android.widget.FrameLayout;
 import android.widget.ImageView;
 
@@ -68,6 +69,18 @@ public class IllustrationPreference extends Preference {
             Log.w(TAG, "Invalid illustration resource id.");
             return;
         }
+
+        // To solve the problem of non-compliant illustrations, we set the frame height
+        // to 300dp and set the length of the short side of the screen to
+        // the width of the frame.
+        final int screenWidth = getContext().getResources().getDisplayMetrics().widthPixels;
+        final int screenHeight = getContext().getResources().getDisplayMetrics().heightPixels;
+        final FrameLayout illustrationFrame = (FrameLayout) holder.findViewById(
+                R.id.illustration_frame);
+        final LayoutParams lp = (LayoutParams) illustrationFrame.getLayoutParams();
+        lp.width = screenWidth < screenHeight ? screenWidth : screenHeight;
+        illustrationFrame.setLayoutParams(lp);
+
         mMiddleGroundLayout = (FrameLayout) holder.findViewById(R.id.middleground_layout);
         mIllustrationView = (LottieAnimationView) holder.findViewById(R.id.lottie_view);
         mIllustrationView.setAnimation(mAnimationId);
@@ -124,6 +137,13 @@ public class IllustrationPreference extends Preference {
                 mIsAutoScale ? ImageView.ScaleType.CENTER_CROP : ImageView.ScaleType.CENTER_INSIDE);
     }
 
+    /**
+     * Set the lottie illustration resource id.
+     */
+    public void setLottieAnimationResId(int resId) {
+        mAnimationId = resId;
+    }
+
     private void enableMiddleGroundView() {
         mMiddleGroundLayout.removeAllViews();
         mMiddleGroundLayout.addView(mMiddleGroundView);