Fix specs for custom bp

1. Fix view visibilities on small size constraint bp
2. Fix color and typograph for all bp views
3. Fix paddings for logo and custom content view.

Test: manually check specs on bp test app
Bug: 302735104
Flag: ACONFIG android.hardware.biometrics.custom_biometric_prompt DEVELOPMENT
Change-Id: I52fab1e2bed1732df55313939bc1f2192f786937

15 files changed, 199 insertions, 154 deletions

diff --git a/packages/SystemUI/res/drawable/biometric_prompt_content_view_background.xml b/packages/SystemUI/res/drawable/biometric_prompt_content_view_background.xml
new file mode 100644
index 000000000000..fdafe6d8e335
--- /dev/null
+++ b/packages/SystemUI/res/drawable/biometric_prompt_content_view_background.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Copyright (C) 2024 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"
+    xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
+    android:shape="rectangle">
+    <solid android:color="?androidprv:attr/materialColorSurfaceContainerHigh"/>
+    <corners android:radius="@dimen/biometric_prompt_content_corner_radius"/>
+</shape>
diff --git a/packages/SystemUI/res/layout-land/biometric_prompt_constraint_layout.xml b/packages/SystemUI/res/layout-land/biometric_prompt_constraint_layout.xml
index 2d63c8da54f9..2d5ec3e5110a 100644
--- a/packages/SystemUI/res/layout-land/biometric_prompt_constraint_layout.xml
+++ b/packages/SystemUI/res/layout-land/biometric_prompt_constraint_layout.xml
@@ -2,6 +2,7 @@
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
+xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
@@ -19,7 +20,7 @@ android:layout_height="match_parent">
         android:id="@+id/panel"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        android:background="?android:attr/colorBackgroundFloating"
+        android:background="?androidprv:attr/materialColorSurfaceBright"
         android:clickable="true"
         android:clipToOutline="true"
         android:importantForAccessibility="no"
@@ -74,8 +75,9 @@ android:layout_height="match_parent">
 
             <ImageView
                 android:id="@+id/logo"
-                android:layout_width="@dimen/biometric_auth_icon_size"
-                android:layout_height="@dimen/biometric_auth_icon_size"
+                android:contentDescription="@string/biometric_dialog_logo"
+                android:layout_width="@dimen/biometric_prompt_logo_size"
+                android:layout_height="@dimen/biometric_prompt_logo_size"
                 android:layout_gravity="center"
                 android:scaleType="fitXY"
                 android:visibility="visible"
@@ -84,12 +86,9 @@ android:layout_height="match_parent">
 
             <TextView
                 android:id="@+id/logo_description"
+                style="@style/TextAppearance.AuthCredential.LogoDescription"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:ellipsize="marquee"
-                android:gravity="@integer/biometric_dialog_text_gravity"
-                android:marqueeRepeatLimit="1"
-                android:singleLine="true"
                 android:textAlignment="viewStart"
                 android:paddingLeft="8dp"
                 app:layout_constraintBottom_toBottomOf="@+id/logo"
@@ -97,12 +96,6 @@ android:layout_height="match_parent">
                 app:layout_constraintStart_toEndOf="@+id/logo"
                 app:layout_constraintTop_toTopOf="@+id/logo" />
 
-            <Space
-                android:id="@+id/space_above_content"
-                android:layout_width="match_parent"
-                android:layout_height="@dimen/biometric_prompt_space_above_content"
-                android:visibility="gone" />
-
             <TextView
                 android:id="@+id/title"
                 style="@style/TextAppearance.AuthCredential.Title"
@@ -137,11 +130,10 @@ android:layout_height="match_parent">
 
             <LinearLayout
                 android:id="@+id/customized_view_container"
-                android:layout_width="wrap_content"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:gravity="center_vertical"
                 android:orientation="vertical"
-                android:paddingHorizontal="0dp"
                 android:visibility="gone"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
@@ -165,7 +157,6 @@ android:layout_height="match_parent">
                 app:layout_constraintTop_toBottomOf="@+id/subtitle"
                 app:layout_constraintVertical_bias="0.0" />
 
-
             <androidx.constraintlayout.widget.Barrier
                 android:id="@+id/contentBarrier"
                 android:layout_width="wrap_content"
@@ -179,16 +170,14 @@ android:layout_height="match_parent">
 
     <TextView
         android:id="@+id/indicator"
+        style="@style/TextAppearance.AuthCredential.Indicator"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="24dp"
         android:accessibilityLiveRegion="polite"
         android:fadingEdge="horizontal"
         android:gravity="center_horizontal"
-        android:marqueeRepeatLimit="marquee_forever"
         android:scrollHorizontally="true"
-        android:textColor="@color/biometric_dialog_gray"
-        android:textSize="12sp"
         app:layout_constraintBottom_toTopOf="@+id/buttonBarrier"
         app:layout_constraintEnd_toEndOf="@+id/biometric_icon"
         app:layout_constraintStart_toStartOf="@+id/biometric_icon"
diff --git a/packages/SystemUI/res/layout-sw600dp/biometric_prompt_constraint_layout.xml b/packages/SystemUI/res/layout-sw600dp/biometric_prompt_constraint_layout.xml
index 329fc466d378..4d24c58d3937 100644
--- a/packages/SystemUI/res/layout-sw600dp/biometric_prompt_constraint_layout.xml
+++ b/packages/SystemUI/res/layout-sw600dp/biometric_prompt_constraint_layout.xml
@@ -2,6 +2,7 @@
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
+    xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
@@ -19,7 +20,7 @@
         android:id="@+id/panel"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        android:background="?android:attr/colorBackgroundFloating"
+        android:background="?androidprv:attr/materialColorSurfaceBright"
         android:clickable="true"
         android:clipToOutline="true"
         android:importantForAccessibility="no"
@@ -61,8 +62,9 @@
 
             <ImageView
                 android:id="@+id/logo"
-                android:layout_width="@dimen/biometric_auth_icon_size"
-                android:layout_height="@dimen/biometric_auth_icon_size"
+                android:contentDescription="@string/biometric_dialog_logo"
+                android:layout_width="@dimen/biometric_prompt_logo_size"
+                android:layout_height="@dimen/biometric_prompt_logo_size"
                 android:layout_gravity="center"
                 android:scaleType="fitXY"
                 android:visibility="visible"
@@ -73,24 +75,14 @@
 
             <TextView
                 android:id="@+id/logo_description"
+                style="@style/TextAppearance.AuthCredential.LogoDescription"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:ellipsize="marquee"
-                android:gravity="@integer/biometric_dialog_text_gravity"
-                android:marqueeRepeatLimit="1"
-                android:singleLine="true"
-                android:paddingTop="16dp"
                 app:layout_constraintBottom_toTopOf="@+id/title"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toBottomOf="@+id/logo" />
 
-            <Space
-                android:id="@+id/space_above_content"
-                android:layout_width="match_parent"
-                android:layout_height="@dimen/biometric_prompt_space_above_content"
-                android:visibility="gone" />
-
             <TextView
                 android:id="@+id/title"
                 style="@style/TextAppearance.AuthCredential.Title"
@@ -117,11 +109,10 @@
 
             <LinearLayout
                 android:id="@+id/customized_view_container"
-                android:layout_width="wrap_content"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:gravity="center_vertical"
                 android:orientation="vertical"
-                android:paddingHorizontal="@dimen/biometric_prompt_content_container_padding_horizontal"
                 android:visibility="gone"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
@@ -153,16 +144,14 @@
     <!-- Cancel Button, replaces negative button when biometric is accepted -->
     <TextView
         android:id="@+id/indicator"
+        style="@style/TextAppearance.AuthCredential.Indicator"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="24dp"
         android:accessibilityLiveRegion="polite"
         android:fadingEdge="horizontal"
         android:gravity="center_horizontal"
-        android:marqueeRepeatLimit="marquee_forever"
         android:scrollHorizontally="true"
-        android:textColor="@color/biometric_dialog_gray"
-        android:textSize="12sp"
         app:layout_constraintBottom_toTopOf="@+id/buttonBarrier"
         app:layout_constraintEnd_toEndOf="@+id/panel"
         app:layout_constraintStart_toStartOf="@+id/panel"
diff --git a/packages/SystemUI/res/layout/biometric_prompt_constraint_layout.xml b/packages/SystemUI/res/layout/biometric_prompt_constraint_layout.xml
index 6391813754d0..56469daee326 100644
--- a/packages/SystemUI/res/layout/biometric_prompt_constraint_layout.xml
+++ b/packages/SystemUI/res/layout/biometric_prompt_constraint_layout.xml
@@ -2,6 +2,7 @@
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
+    xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
@@ -19,7 +20,7 @@
         android:id="@+id/panel"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        android:background="?android:attr/colorBackgroundFloating"
+        android:background="?androidprv:attr/materialColorSurfaceBright"
         android:clickable="true"
         android:clipToOutline="true"
         android:importantForAccessibility="no"
@@ -61,8 +62,9 @@
 
             <ImageView
                 android:id="@+id/logo"
-                android:layout_width="@dimen/biometric_auth_icon_size"
-                android:layout_height="@dimen/biometric_auth_icon_size"
+                android:contentDescription="@string/biometric_dialog_logo"
+                android:layout_width="@dimen/biometric_prompt_logo_size"
+                android:layout_height="@dimen/biometric_prompt_logo_size"
                 android:layout_gravity="center"
                 android:scaleType="fitXY"
                 app:layout_constraintBottom_toTopOf="@+id/logo_description"
@@ -73,21 +75,14 @@
 
             <TextView
                 android:id="@+id/logo_description"
+                style="@style/TextAppearance.AuthCredential.LogoDescription"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:gravity="@integer/biometric_dialog_text_gravity"
-                android:singleLine="true"
                 app:layout_constraintBottom_toTopOf="@+id/title"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toBottomOf="@+id/logo" />
 
-            <Space
-                android:id="@+id/space_above_content"
-                android:layout_width="match_parent"
-                android:layout_height="@dimen/biometric_prompt_space_above_content"
-                android:visibility="gone" />
-
             <TextView
                 android:id="@+id/title"
                 style="@style/TextAppearance.AuthCredential.Title"
@@ -119,7 +114,6 @@
                 android:gravity="center_vertical"
                 android:orientation="vertical"
                 android:visibility="gone"
-                android:paddingTop="8dp"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
@@ -150,6 +144,7 @@
 
     <TextView
         android:id="@+id/indicator"
+        style="@style/TextAppearance.AuthCredential.Indicator"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="24dp"
@@ -229,5 +224,4 @@
         app:layout_constraintEnd_toEndOf="@+id/biometric_icon"
         app:layout_constraintStart_toStartOf="@+id/biometric_icon"
         app:layout_constraintTop_toTopOf="@+id/biometric_icon" />
-
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/packages/SystemUI/res/layout/biometric_prompt_content_layout.xml b/packages/SystemUI/res/layout/biometric_prompt_content_layout.xml
index 390875702cfe..0cc5e718e6d2 100644
--- a/packages/SystemUI/res/layout/biometric_prompt_content_layout.xml
+++ b/packages/SystemUI/res/layout/biometric_prompt_content_layout.xml
@@ -17,16 +17,11 @@
     android:id="@+id/customized_view"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:gravity="center_vertical"
-    android:orientation="vertical"
     style="@style/AuthCredentialContentLayoutStyle">
 
     <TextView
-        android:id="@+id/customized_view_title"
-        style="@style/TextAppearance.AuthCredential.ContentViewTitle"
+        android:id="@+id/customized_view_description"
+        style="@style/TextAppearance.AuthCredential.ContentViewDescription"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:ellipsize="marquee"
-        android:marqueeRepeatLimit="1"
-        android:singleLine="true" />
+        android:layout_height="wrap_content" />
 </LinearLayout>
diff --git a/packages/SystemUI/res/layout/biometric_prompt_content_row_item_text_view.xml b/packages/SystemUI/res/layout/biometric_prompt_content_row_item_text_view.xml
index e39f60f349bc..bc827081292e 100644
--- a/packages/SystemUI/res/layout/biometric_prompt_content_row_item_text_view.xml
+++ b/packages/SystemUI/res/layout/biometric_prompt_content_row_item_text_view.xml
@@ -17,5 +17,5 @@
 <TextView xmlns:android="http://schemas.android.com/apk/res/android"
     style="@style/TextAppearance.AuthCredential.ContentViewListItem"
     android:layout_width="0dp"
-    android:layout_height="match_parent"
+    android:layout_height="wrap_content"
     android:layout_weight="1.0" />
\ No newline at end of file
diff --git a/packages/SystemUI/res/layout/biometric_prompt_content_row_layout.xml b/packages/SystemUI/res/layout/biometric_prompt_content_row_layout.xml
index 6c867365e92c..f0125b60c6d8 100644
--- a/packages/SystemUI/res/layout/biometric_prompt_content_row_layout.xml
+++ b/packages/SystemUI/res/layout/biometric_prompt_content_row_layout.xml
@@ -16,6 +16,6 @@
 
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="@dimen/biometric_prompt_content_list_row_height"
+    android:layout_height="wrap_content"
     android:gravity="center_vertical|start"
     android:orientation="horizontal" />
diff --git a/packages/SystemUI/res/layout/biometric_prompt_layout.xml b/packages/SystemUI/res/layout/biometric_prompt_layout.xml
index 984210906e68..ff89ed9e6e7a 100644
--- a/packages/SystemUI/res/layout/biometric_prompt_layout.xml
+++ b/packages/SystemUI/res/layout/biometric_prompt_layout.xml
@@ -44,7 +44,7 @@
         android:singleLine="true"
         android:marqueeRepeatLimit="1"
         android:ellipsize="marquee"
-        style="@style/TextAppearance.AuthCredential.Title"/>
+        style="@style/TextAppearance.AuthCredential.OldTitle"/>
 
     <TextView
         android:id="@+id/subtitle"
@@ -54,20 +54,21 @@
         android:singleLine="true"
         android:marqueeRepeatLimit="1"
         android:ellipsize="marquee"
-        style="@style/TextAppearance.AuthCredential.Subtitle"/>
+        style="@style/TextAppearance.AuthCredential.OldSubtitle"/>
 
     <TextView
         android:id="@+id/description"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:gravity="@integer/biometric_dialog_text_gravity"
         android:scrollbars ="vertical"
         android:importantForAccessibility="no"
-        style="@style/TextAppearance.AuthCredential.Description"/>
+        style="@style/TextAppearance.AuthCredential.OldDescription"/>
 
     <Space
         android:id="@+id/space_above_content"
         android:layout_width="match_parent"
-        android:layout_height="@dimen/biometric_prompt_space_above_content"
+        android:layout_height="24dp"
         android:visibility="gone" />
 
     <LinearLayout
@@ -77,7 +78,6 @@
         android:fadeScrollbars="false"
         android:gravity="center_vertical"
         android:orientation="vertical"
-        android:paddingHorizontal="@dimen/biometric_prompt_content_container_padding_horizontal"
         android:scrollbars="vertical"
         android:visibility="gone" />
 
diff --git a/packages/SystemUI/res/values/colors.xml b/packages/SystemUI/res/values/colors.xml
index 307a6192a570..590dc682564e 100644
--- a/packages/SystemUI/res/values/colors.xml
+++ b/packages/SystemUI/res/values/colors.xml
@@ -140,9 +140,6 @@
     <color name="biometric_dialog_gray">#ff757575</color>
     <color name="biometric_dialog_accent">@color/material_dynamic_primary40</color>
     <color name="biometric_dialog_error">#ffd93025</color>                  <!-- red 600 -->
-    <!-- Color for biometric prompt content view -->
-    <color name="biometric_prompt_content_background_color">#8AB4F8</color>
-    <color name="biometric_prompt_content_list_item_bullet_color">#1d873b</color>
 
     <!-- SFPS colors -->
     <color name="sfps_chevron_fill">@color/material_dynamic_primary90</color>
diff --git a/packages/SystemUI/res/values/dimens.xml b/packages/SystemUI/res/values/dimens.xml
index 2285550d94c7..e004ee9fa157 100644
--- a/packages/SystemUI/res/values/dimens.xml
+++ b/packages/SystemUI/res/values/dimens.xml
@@ -1101,15 +1101,15 @@
     <dimen name="biometric_dialog_width">240dp</dimen>
     <dimen name="biometric_dialog_height">240dp</dimen>
 
-    <!-- Dimensions for biometric prompt content view. -->
-    <dimen name="biometric_prompt_space_above_content">48dp</dimen>
-    <dimen name="biometric_prompt_content_container_padding_horizontal">24dp</dimen>
-    <dimen name="biometric_prompt_content_padding_horizontal">10dp</dimen>
-    <dimen name="biometric_prompt_content_list_row_height">24dp</dimen>
-    <dimen name="biometric_prompt_content_list_item_padding_horizontal">10dp</dimen>
-    <dimen name="biometric_prompt_content_list_item_text_size">14sp</dimen>
-    <dimen name="biometric_prompt_content_list_item_bullet_gap_width">10dp</dimen>
-    <dimen name="biometric_prompt_content_list_item_bullet_radius">5dp</dimen>
+    <!-- Dimensions for biometric prompt custom content view. -->
+    <dimen name="biometric_prompt_logo_size">32dp</dimen>
+    <dimen name="biometric_prompt_content_corner_radius">28dp</dimen>
+    <dimen name="biometric_prompt_content_padding_horizontal">24dp</dimen>
+    <dimen name="biometric_prompt_content_padding_vertical">16dp</dimen>
+    <dimen name="biometric_prompt_content_space_width_between_items">16dp</dimen>
+    <dimen name="biometric_prompt_content_list_item_padding_top">12dp</dimen>
+    <dimen name="biometric_prompt_content_list_item_bullet_gap_width">8.5dp</dimen>
+    <dimen name="biometric_prompt_content_list_item_bullet_radius">1.5dp</dimen>
 
     <!-- Biometric Auth Credential values -->
     <dimen name="biometric_auth_icon_size">48dp</dimen>
diff --git a/packages/SystemUI/res/values/strings.xml b/packages/SystemUI/res/values/strings.xml
index 3029888c7e54..5e9f811ce386 100644
--- a/packages/SystemUI/res/values/strings.xml
+++ b/packages/SystemUI/res/values/strings.xml
@@ -380,6 +380,8 @@
     <!-- Button name for "Cancel". [CHAR LIMIT=NONE] -->
     <string name="cancel">Cancel</string>
 
+    <!-- Content description for the app logo icon on biometric prompt. [CHAR LIMIT=NONE] -->
+    <string name="biometric_dialog_logo">App logo</string>
     <!-- Message shown when a biometric is authenticated, asking the user to confirm authentication [CHAR LIMIT=30] -->
     <string name="biometric_dialog_confirm">Confirm</string>
     <!-- Button name on BiometricPrompt shown when a biometric is detected but not authenticated. Tapping the button resumes authentication [CHAR LIMIT=30] -->
diff --git a/packages/SystemUI/res/values/styles.xml b/packages/SystemUI/res/values/styles.xml
index 0483a0734a83..30de6475ea42 100644
--- a/packages/SystemUI/res/values/styles.xml
+++ b/packages/SystemUI/res/values/styles.xml
@@ -174,43 +174,59 @@
         <item name="android:textColor">?android:attr/textColorPrimary</item>
     </style>
 
-    <style name="TextAppearance.AuthCredential.Title">
+    <style name="TextAppearance.AuthCredential.OldTitle">
         <item name="android:fontFamily">google-sans</item>
         <item name="android:paddingTop">12dp</item>
         <item name="android:paddingHorizontal">24dp</item>
         <item name="android:textSize">24sp</item>
     </style>
 
-    <style name="TextAppearance.AuthCredential.Subtitle">
+    <style name="TextAppearance.AuthCredential.OldSubtitle">
         <item name="android:fontFamily">google-sans</item>
         <item name="android:paddingTop">8dp</item>
         <item name="android:paddingHorizontal">24dp</item>
         <item name="android:textSize">16sp</item>
     </style>
 
-    <style name="TextAppearance.AuthCredential.Description">
+    <style name="TextAppearance.AuthCredential.OldDescription">
         <item name="android:fontFamily">google-sans</item>
         <item name="android:paddingTop">8dp</item>
         <item name="android:paddingHorizontal">24dp</item>
         <item name="android:textSize">14sp</item>
     </style>
 
-    <style name="TextAppearance.AuthCredential.ContentViewTitle">
-        <item name="android:fontFamily">google-sans</item>
-        <item name="android:paddingTop">8dp</item>
-        <item name="android:paddingHorizontal">24dp</item>
-        <item name="android:textSize">14sp</item>
-        <item name="android:gravity">start</item>
+    <style name="TextAppearance.AuthCredential.LogoDescription" parent="TextAppearance.Material3.LabelLarge" >
+        <item name="android:ellipsize">marquee</item>
+        <item name="android:gravity">@integer/biometric_dialog_text_gravity</item>
+        <item name="android:marqueeRepeatLimit">1</item>
+        <item name="android:singleLine">true</item>
+        <item name="android:textColor">?androidprv:attr/materialColorOnSurfaceVariant</item>
     </style>
 
-    <style name="TextAppearance.AuthCredential.ContentViewListItem">
-        <item name="android:fontFamily">google-sans</item>
-        <item name="android:paddingTop">8dp</item>
-        <item name="android:paddingHorizontal">
-            @dimen/biometric_prompt_content_list_item_padding_horizontal
-        </item>
-        <item name="android:textSize">@dimen/biometric_prompt_content_list_item_text_size</item>
-        <item name="android:gravity">start</item>
+    <style name="TextAppearance.AuthCredential.Title" parent="TextAppearance.Material3.HeadlineSmall" >
+        <item name="android:textColor">?androidprv:attr/materialColorOnSurface</item>
+    </style>
+
+    <style name="TextAppearance.AuthCredential.Subtitle" parent="TextAppearance.Material3.BodyMedium" >
+        <item name="android:textColor">?androidprv:attr/materialColorOnSurface</item>
+    </style>
+
+    <style name="TextAppearance.AuthCredential.Description" parent="TextAppearance.Material3.BodyMedium" >
+        <item name="android:textColor">?androidprv:attr/materialColorOnSurface</item>
+    </style>
+
+    <style name="TextAppearance.AuthCredential.ContentViewDescription" parent="TextAppearance.Material3.TitleSmall">
+        <item name="android:textColor">?androidprv:attr/materialColorOnSurface</item>
+    </style>
+
+    <style name="TextAppearance.AuthCredential.ContentViewListItem" parent="TextAppearance.Material3.BodySmall">
+        <item name="android:textColor">?androidprv:attr/materialColorOnSurfaceVariant</item>
+        <item name="android:paddingTop">@dimen/biometric_prompt_content_list_item_padding_top</item>
+    </style>
+
+    <style name="TextAppearance.AuthCredential.Indicator" parent="TextAppearance.Material3.BodyMedium">
+        <item name="android:textColor">?androidprv:attr/materialColorOnSurface</item>
+        <item name="android:marqueeRepeatLimit">marquee_forever</item>
     </style>
 
     <style name="TextAppearance.AuthCredential.Error">
@@ -313,8 +329,11 @@
     </style>
 
     <style name="AuthCredentialContentLayoutStyle">
-        <item name="android:background">@color/biometric_prompt_content_background_color</item>
+        <item name="android:gravity">center_vertical</item>
+        <item name="android:orientation">vertical</item>
+        <item name="android:background">@drawable/biometric_prompt_content_view_background</item>
         <item name="android:paddingHorizontal">@dimen/biometric_prompt_content_padding_horizontal</item>
+        <item name="android:paddingVertical">@dimen/biometric_prompt_content_padding_vertical</item>
     </style>
 
     <style name="DeviceManagementDialogTitle">
diff --git a/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricCustomizedViewBinder.kt b/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricCustomizedViewBinder.kt
index e58c8ff92c03..769e290c711e 100644
--- a/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricCustomizedViewBinder.kt
+++ b/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricCustomizedViewBinder.kt
@@ -18,8 +18,6 @@ package com.android.systemui.biometrics.ui.binder
 
 import android.content.Context
 import android.content.res.Resources
-import android.content.res.Resources.Theme
-import android.graphics.Paint
 import android.hardware.biometrics.PromptContentItem
 import android.hardware.biometrics.PromptContentItemBulletedText
 import android.hardware.biometrics.PromptContentItemPlainText
@@ -27,14 +25,17 @@ import android.hardware.biometrics.PromptContentView
 import android.hardware.biometrics.PromptVerticalListContentView
 import android.text.SpannableString
 import android.text.Spanned
+import android.text.TextPaint
 import android.text.style.BulletSpan
 import android.view.LayoutInflater
 import android.view.View
+import android.view.ViewGroup.LayoutParams.MATCH_PARENT
+import android.view.ViewTreeObserver
 import android.widget.LinearLayout
 import android.widget.Space
 import android.widget.TextView
-import androidx.lifecycle.Lifecycle
-import androidx.lifecycle.repeatOnLifecycle
+import androidx.lifecycle.lifecycleScope
+import com.android.settingslib.Utils
 import com.android.systemui.biometrics.ui.BiometricPromptLayout
 import com.android.systemui.biometrics.ui.viewmodel.PromptViewModel
 import com.android.systemui.lifecycle.repeatWhenAttached
@@ -45,36 +46,38 @@ import kotlinx.coroutines.launch
 
 /** Sub-binder for [BiometricPromptLayout.customized_view_container]. */
 object BiometricCustomizedViewBinder {
-    fun bind(customizedViewContainer: LinearLayout, spaceAbove: Space, viewModel: PromptViewModel) {
-        customizedViewContainer.repeatWhenAttached {
-            repeatOnLifecycle(Lifecycle.State.CREATED) {
-                launch {
-                    val contentView: PromptContentView? = viewModel.contentView.first()
-
-                    if (contentView != null) {
-                        val context = customizedViewContainer.context
-                        customizedViewContainer.addView(contentView.toView(context))
-                        customizedViewContainer.visibility = View.VISIBLE
-                        spaceAbove.visibility = View.VISIBLE
-                    } else {
-                        customizedViewContainer.visibility = View.GONE
-                        spaceAbove.visibility = View.GONE
+    fun bind(customizedViewContainer: LinearLayout, viewModel: PromptViewModel) {
+        customizedViewContainer.repeatWhenAttached { containerView ->
+            lifecycleScope.launch {
+                val contentView: PromptContentView? = viewModel.contentView.first()
+                if (contentView == null) {
+                    containerView.visibility = View.GONE
+                    return@launch
+                }
+
+                containerView.width { containerWidth ->
+                    if (containerWidth == 0) {
+                        return@width
                     }
+                    (containerView as LinearLayout).addView(
+                        contentView.toView(containerView.context, containerWidth)
+                    )
+                    containerView.visibility = View.VISIBLE
                 }
             }
         }
     }
 }
 
-private fun PromptContentView.toView(context: Context): View {
-    val resources = context.resources
+private fun PromptContentView.toView(context: Context, containerViewWidth: Int): View {
     val inflater = LayoutInflater.from(context)
     when (this) {
         is PromptVerticalListContentView -> {
             val contentView =
                 inflater.inflate(R.layout.biometric_prompt_content_layout, null) as LinearLayout
 
-            val descriptionView = contentView.requireViewById<TextView>(R.id.customized_view_title)
+            val descriptionView =
+                contentView.requireViewById<TextView>(R.id.customized_view_description)
             if (!description.isNullOrEmpty()) {
                 descriptionView.text = description
             } else {
@@ -83,13 +86,36 @@ private fun PromptContentView.toView(context: Context): View {
 
             // Show two column by default, once there is an item exceeding max lines, show single
             // item instead.
-            val showTwoColumn = listItems.all { !it.doesExceedMaxLinesIfTwoColumn(resources) }
+            val showTwoColumn =
+                listItems.all { !it.doesExceedMaxLinesIfTwoColumn(context, containerViewWidth) }
             var currRowView = createNewRowLayout(inflater)
             for (item in listItems) {
-                val itemView = item.toView(resources, inflater, context.theme)
+                val itemView = item.toView(context, inflater)
+                // If this item will be in the first row (contentView only has description view) and
+                // description is empty, remove top padding of this item.
+                if (contentView.childCount == 1 && description.isNullOrEmpty()) {
+                    itemView.setPadding(
+                        itemView.paddingLeft,
+                        0,
+                        itemView.paddingRight,
+                        itemView.paddingBottom
+                    )
+                }
                 currRowView.addView(itemView)
 
-                if (!showTwoColumn || currRowView.childCount == 2) {
+                // If this is the first item in the current row, add space behind it.
+                if (currRowView.childCount == 1 && showTwoColumn) {
+                    currRowView.addSpaceView(
+                        context.resources.getDimensionPixelSize(
+                            R.dimen.biometric_prompt_content_space_width_between_items
+                        ),
+                        MATCH_PARENT
+                    )
+                }
+
+                // If there are already two items (plus the space view) in the current row, or it
+                // should be one column, start a new row
+                if (currRowView.childCount == 3 || !showTwoColumn) {
                     contentView.addView(currRowView)
                     currRowView = createNewRowLayout(inflater)
                 }
@@ -110,9 +136,15 @@ private fun createNewRowLayout(inflater: LayoutInflater): LinearLayout {
     return inflater.inflate(R.layout.biometric_prompt_content_row_layout, null) as LinearLayout
 }
 
+private fun LinearLayout.addSpaceView(width: Int, height: Int) {
+    addView(Space(context), LinearLayout.LayoutParams(width, height))
+}
+
 private fun PromptContentItem.doesExceedMaxLinesIfTwoColumn(
-    resources: Resources,
+    context: Context,
+    containerViewWidth: Int,
 ): Boolean {
+    val resources = context.resources
     val passedInText: String =
         when (this) {
             is PromptContentItemPlainText -> text
@@ -125,32 +157,26 @@ private fun PromptContentItem.doesExceedMaxLinesIfTwoColumn(
     when (this) {
         is PromptContentItemPlainText,
         is PromptContentItemBulletedText -> {
-            val dialogMargin =
-                resources.getDimensionPixelSize(R.dimen.biometric_dialog_border_padding)
-            val halfDialogWidth =
-                Resources.getSystem().displayMetrics.widthPixels / 2 - dialogMargin
-            val containerPadding =
-                resources.getDimensionPixelSize(
-                    R.dimen.biometric_prompt_content_container_padding_horizontal
-                )
-            val contentPadding =
+            val contentViewPadding =
                 resources.getDimensionPixelSize(R.dimen.biometric_prompt_content_padding_horizontal)
             val listItemPadding = getListItemPadding(resources)
-            val maxWidth = halfDialogWidth - containerPadding - contentPadding - listItemPadding
+            val maxWidth = containerViewWidth / 2 - contentViewPadding - listItemPadding
 
-            val text = "$passedInText"
-            val textSize =
-                resources.getDimensionPixelSize(
-                    R.dimen.biometric_prompt_content_list_item_text_size
+            val paint = TextPaint()
+            val attributes =
+                context.obtainStyledAttributes(
+                    R.style.TextAppearance_AuthCredential_ContentViewListItem,
+                    intArrayOf(android.R.attr.textSize)
                 )
-            val paint = Paint()
-            paint.textSize = textSize.toFloat()
+            paint.textSize = attributes.getDimensionPixelSize(0, 0).toFloat()
+            val textWidth = paint.measureText(passedInText)
+            attributes.recycle()
 
             val maxLines =
                 resources.getInteger(
                     R.integer.biometric_prompt_content_list_item_max_lines_if_two_column
                 )
-            val numLines = ceil(paint.measureText(text).toDouble() / maxWidth).toInt()
+            val numLines = ceil(textWidth / maxWidth).toInt()
             return numLines > maxLines
         }
         else -> {
@@ -160,10 +186,10 @@ private fun PromptContentItem.doesExceedMaxLinesIfTwoColumn(
 }
 
 private fun PromptContentItem.toView(
-    resources: Resources,
+    context: Context,
     inflater: LayoutInflater,
-    theme: Theme,
 ): TextView {
+    val resources = context.resources
     val textView =
         inflater.inflate(R.layout.biometric_prompt_content_row_item_text_view, null) as TextView
     val lp = LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1f)
@@ -178,7 +204,7 @@ private fun PromptContentItem.toView(
             val span =
                 BulletSpan(
                     getListItemBulletGapWidth(resources),
-                    getListItemBulletColor(resources, theme),
+                    getListItemBulletColor(context),
                     getListItemBulletRadius(resources)
                 )
             bulletedText.setSpan(span, 0 /* start */, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
@@ -194,8 +220,8 @@ private fun PromptContentItem.toView(
 private fun PromptContentItem.getListItemPadding(resources: Resources): Int {
     var listItemPadding =
         resources.getDimensionPixelSize(
-            R.dimen.biometric_prompt_content_list_item_padding_horizontal
-        ) * 2
+            R.dimen.biometric_prompt_content_space_width_between_items
+        ) / 2
     when (this) {
         is PromptContentItemPlainText -> {}
         is PromptContentItemBulletedText -> {
@@ -215,5 +241,20 @@ private fun getListItemBulletRadius(resources: Resources): Int =
 private fun getListItemBulletGapWidth(resources: Resources): Int =
     resources.getDimensionPixelSize(R.dimen.biometric_prompt_content_list_item_bullet_gap_width)
 
-private fun getListItemBulletColor(resources: Resources, theme: Theme): Int =
-    resources.getColor(R.color.biometric_prompt_content_list_item_bullet_color, theme)
+private fun getListItemBulletColor(context: Context): Int =
+    Utils.getColorAttrDefaultColor(context, com.android.internal.R.attr.materialColorOnSurface)
+
+private fun <T : View> T.width(function: (Int) -> Unit) {
+    if (width == 0)
+        viewTreeObserver.addOnGlobalLayoutListener(
+            object : ViewTreeObserver.OnGlobalLayoutListener {
+                override fun onGlobalLayout() {
+                    if (measuredWidth > 0) {
+                        viewTreeObserver.removeOnGlobalLayoutListener(this)
+                    }
+                    function(measuredWidth)
+                }
+            }
+        )
+    else function(measuredWidth)
+}
diff --git a/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricViewBinder.kt b/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricViewBinder.kt
index 7bb75bf5ca9b..37d234888144 100644
--- a/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricViewBinder.kt
+++ b/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricViewBinder.kt
@@ -169,11 +169,7 @@ object BiometricViewBinder {
             descriptionView.text = viewModel.description.first()
 
             if (Flags.customBiometricPrompt() && constraintBp()) {
-                BiometricCustomizedViewBinder.bind(
-                    customizedViewContainer,
-                    view.requireViewById(R.id.space_above_content),
-                    viewModel
-                )
+                BiometricCustomizedViewBinder.bind(customizedViewContainer, viewModel)
             }
 
             // set button listeners
diff --git a/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricViewSizeBinder.kt b/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricViewSizeBinder.kt
index 1dfd2e5f9cc9..e3c0cba42e2d 100644
--- a/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricViewSizeBinder.kt
+++ b/packages/SystemUI/src/com/android/systemui/biometrics/ui/binder/BiometricViewSizeBinder.kt
@@ -121,10 +121,6 @@ object BiometricViewSizeBinder {
 
             val largeConstraintSet = ConstraintSet()
             largeConstraintSet.clone(mediumConstraintSet)
-            largeConstraintSet.setVisibility(iconHolderView.id, View.GONE)
-            largeConstraintSet.setVisibility(R.id.biometric_icon_overlay, View.GONE)
-            largeConstraintSet.setVisibility(R.id.indicator, View.GONE)
-            largeConstraintSet.setVisibility(R.id.scrollView, View.GONE)
 
             // TODO: Investigate better way to handle 180 rotations
             val flipConstraintSet = ConstraintSet()
@@ -286,6 +282,10 @@ object BiometricViewSizeBinder {
 
                 fun setVisibilities(size: PromptSize) {
                     viewsToHideWhenSmall.forEach { it.showContentOrHide(forceHide = size.isSmall) }
+                    largeConstraintSet.setVisibility(iconHolderView.id, View.GONE)
+                    largeConstraintSet.setVisibility(R.id.biometric_icon_overlay, View.GONE)
+                    largeConstraintSet.setVisibility(R.id.indicator, View.GONE)
+                    largeConstraintSet.setVisibility(R.id.scrollView, View.GONE)
 
                     if (viewModel.showBpWithoutIconForCredential.value) {
                         smallConstraintSet.setVisibility(iconHolderView.id, View.GONE)