diff --git a/packages/CredentialManager/res/drawable/ic_passkeys_onboarding.png b/packages/CredentialManager/res/drawable/ic_passkeys_onboarding.png
new file mode 100644
index 0000000000000..388d098372524
Binary files /dev/null and b/packages/CredentialManager/res/drawable/ic_passkeys_onboarding.png differ
diff --git a/packages/CredentialManager/res/drawable/ic_passkeys_onboarding_device.xml b/packages/CredentialManager/res/drawable/ic_passkeys_onboarding_device.xml
new file mode 100644
index 0000000000000..9e4f424406286
--- /dev/null
+++ b/packages/CredentialManager/res/drawable/ic_passkeys_onboarding_device.xml
@@ -0,0 +1,32 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/CredentialManager/res/drawable/ic_passkeys_onboarding_fingerprint.xml b/packages/CredentialManager/res/drawable/ic_passkeys_onboarding_fingerprint.xml
new file mode 100644
index 0000000000000..b6ee4f9a18691
--- /dev/null
+++ b/packages/CredentialManager/res/drawable/ic_passkeys_onboarding_fingerprint.xml
@@ -0,0 +1,31 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/CredentialManager/res/drawable/ic_passkeys_onboarding_password.xml b/packages/CredentialManager/res/drawable/ic_passkeys_onboarding_password.xml
new file mode 100644
index 0000000000000..61800f1495d27
--- /dev/null
+++ b/packages/CredentialManager/res/drawable/ic_passkeys_onboarding_password.xml
@@ -0,0 +1,31 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/CredentialManager/res/values/strings.xml b/packages/CredentialManager/res/values/strings.xml
index 8c9023c55effd..870d9832ca0b2 100644
--- a/packages/CredentialManager/res/values/strings.xml
+++ b/packages/CredentialManager/res/values/strings.xml
@@ -18,9 +18,13 @@
Save to another device
- A simple way to sign in safely
-
- Use your fingerprint, face or screen lock to sign in with a unique passkey that can’t be forgotten or stolen. Learn more
+ Safer with passkeys
+
+ No need to create or remember complex passwords
+
+ Use your fingerprint, face, or screen lock to create a unique passkey
+
+ Passkeys are saved to a password manager, so you can sign in on other devices
Choose where to %1$s
diff --git a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateCredentialComponents.kt b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateCredentialComponents.kt
index 5efedd1a88634..29cc7555fc9e9 100644
--- a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateCredentialComponents.kt
+++ b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateCredentialComponents.kt
@@ -144,12 +144,11 @@ fun ConfirmationCard(
) {
ContainerCard() {
Column() {
- Icon(
- painter = painterResource(R.drawable.ic_passkey),
+ Image(
+ painter = painterResource(R.drawable.ic_passkeys_onboarding),
contentDescription = null,
- tint = LocalAndroidColorScheme.current.colorAccentPrimaryVariant,
modifier = Modifier.align(alignment = Alignment.CenterHorizontally)
- .padding(top = 24.dp, bottom = 12.dp)
+ .padding(top = 24.dp, bottom = 12.dp).size(316.dp, 168.dp)
)
TextOnSurface(
text = stringResource(R.string.passkey_creation_intro_title),
@@ -163,11 +162,62 @@ fun ConfirmationCard(
thickness = 16.dp,
color = Color.Transparent
)
- TextSecondary(
- text = stringResource(R.string.passkey_creation_intro_body),
- style = MaterialTheme.typography.bodyLarge,
- modifier = Modifier.padding(horizontal = 28.dp),
+ Row(
+ horizontalArrangement = Arrangement.SpaceBetween,
+ verticalAlignment = Alignment.CenterVertically,
+ modifier = Modifier.fillMaxWidth().padding(horizontal = 24.dp)
+ ) {
+ Image(
+ modifier = Modifier.size(24.dp),
+ painter = painterResource(R.drawable.ic_passkeys_onboarding_password),
+ contentDescription = null
+ )
+ TextSecondary(
+ text = stringResource(R.string.passkey_creation_intro_body_password),
+ style = MaterialTheme.typography.bodyMedium,
+ modifier = Modifier.padding(start = 16.dp),
+ )
+ }
+ Divider(
+ thickness = 16.dp,
+ color = Color.Transparent
)
+ Row(
+ horizontalArrangement = Arrangement.SpaceBetween,
+ verticalAlignment = Alignment.CenterVertically,
+ modifier = Modifier.fillMaxWidth().padding(horizontal = 24.dp)
+ ) {
+ Image(
+ modifier = Modifier.size(24.dp),
+ painter = painterResource(R.drawable.ic_passkeys_onboarding_fingerprint),
+ contentDescription = null
+ )
+ TextSecondary(
+ text = stringResource(R.string.passkey_creation_intro_body_fingerprint),
+ style = MaterialTheme.typography.bodyMedium,
+ modifier = Modifier.padding(start = 16.dp),
+ )
+ }
+ Divider(
+ thickness = 16.dp,
+ color = Color.Transparent
+ )
+ Row(
+ horizontalArrangement = Arrangement.SpaceBetween,
+ verticalAlignment = Alignment.CenterVertically,
+ modifier = Modifier.fillMaxWidth().padding(horizontal = 24.dp)
+ ) {
+ Image(
+ modifier = Modifier.size(24.dp),
+ painter = painterResource(R.drawable.ic_passkeys_onboarding_device),
+ contentDescription = null
+ )
+ TextSecondary(
+ text = stringResource(R.string.passkey_creation_intro_body_device),
+ style = MaterialTheme.typography.bodyMedium,
+ modifier = Modifier.padding(start = 16.dp),
+ )
+ }
Divider(
thickness = 32.dp,
color = Color.Transparent
@@ -702,7 +752,7 @@ fun PrimaryCreateOptionRow(
},
contentDescription = null,
tint = LocalAndroidColorScheme.current.colorAccentPrimaryVariant,
- modifier = Modifier.padding(start = 18.dp).size(32.dp)
+ modifier = Modifier.padding(horizontal = 18.dp).size(32.dp)
)
},
label = {
@@ -764,7 +814,7 @@ fun MoreOptionsInfoRow(
onClick = onOptionSelected,
icon = {
Image(
- modifier = Modifier.size(32.dp).padding(start = 16.dp),
+ modifier = Modifier.padding(horizontal = 16.dp).size(32.dp),
bitmap = providerInfo.icon.toBitmap().asImageBitmap(),
contentDescription = null
)
@@ -774,13 +824,12 @@ fun MoreOptionsInfoRow(
TextOnSurfaceVariant(
text = providerInfo.displayName,
style = MaterialTheme.typography.titleLarge,
- modifier = Modifier.padding(top = 16.dp, start = 16.dp),
+ modifier = Modifier.padding(top = 16.dp),
)
if (createOptionInfo.userProviderDisplayName != null) {
TextSecondary(
text = createOptionInfo.userProviderDisplayName,
style = MaterialTheme.typography.bodyMedium,
- modifier = Modifier.padding(start = 16.dp),
)
}
if (createOptionInfo.passwordCount != null &&
@@ -794,7 +843,7 @@ fun MoreOptionsInfoRow(
createOptionInfo.passkeyCount
),
style = MaterialTheme.typography.bodyMedium,
- modifier = Modifier.padding(bottom = 16.dp, start = 16.dp),
+ modifier = Modifier.padding(bottom = 16.dp),
)
} else if (createOptionInfo.passwordCount != null) {
TextSecondary(
@@ -804,7 +853,7 @@ fun MoreOptionsInfoRow(
createOptionInfo.passwordCount
),
style = MaterialTheme.typography.bodyMedium,
- modifier = Modifier.padding(bottom = 16.dp, start = 16.dp),
+ modifier = Modifier.padding(bottom = 16.dp),
)
} else if (createOptionInfo.passkeyCount != null) {
TextSecondary(
@@ -814,7 +863,7 @@ fun MoreOptionsInfoRow(
createOptionInfo.passkeyCount
),
style = MaterialTheme.typography.bodyMedium,
- modifier = Modifier.padding(bottom = 16.dp, start = 16.dp),
+ modifier = Modifier.padding(bottom = 16.dp),
)
} else if (createOptionInfo.totalCredentialCount != null) {
// TODO: Handle the case when there is total count