diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt index 6a2f94ea1..5973733a5 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt @@ -30,8 +30,13 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.requiredSize import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicSecureTextField import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.foundation.text.input.TextFieldState +import androidx.compose.foundation.text.input.TextObfuscationMode import androidx.compose.foundation.text.selection.DisableSelection import androidx.compose.foundation.text.selection.SelectionContainer import androidx.compose.material.icons.Icons @@ -812,7 +817,7 @@ fun PhoneNumber() { // [END android_compose_text_auto_format_phone_number_textfieldconfig] // [START android_compose_text_auto_format_phone_number_transformtext] -class NanpVisualTransformation() : VisualTransformation { +class NanpVisualTransformation : VisualTransformation { override fun filter(text: AnnotatedString): TransformedText { val trimmed = if (text.text.length >= 10) text.text.substring(0..9) else text.text @@ -862,31 +867,43 @@ val Purple = Color(0xFF800080) // [START android_compose_text_showhidepassword] @Composable fun PasswordTextField() { - var password by rememberSaveable { mutableStateOf("") } + val state = remember { TextFieldState() } var showPassword by remember { mutableStateOf(false) } - val passwordVisualTransformation = remember { PasswordVisualTransformation() } - - TextField( - value = password, - onValueChange = { password = it }, - label = { Text("Enter password") }, - visualTransformation = if (showPassword) { - VisualTransformation.None + BasicSecureTextField( + state = state, + textObfuscationMode = + if (showPassword) { + TextObfuscationMode.Visible } else { - passwordVisualTransformation + TextObfuscationMode.RevealLastTyped }, - keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password), - modifier = Modifier.fillMaxWidth(), - trailingIcon = { - Icon( - if (showPassword) { - Icons.Filled.Visibility - } else { - Icons.Filled.VisibilityOff - }, - contentDescription = "Toggle password visibility", - modifier = Modifier.clickable { showPassword = !showPassword } - ) + modifier = Modifier + .fillMaxWidth() + .padding(6.dp) + .border(1.dp, Color.LightGray, RoundedCornerShape(6.dp)) + .padding(6.dp), + decorator = { innerTextField -> + Box(modifier = Modifier.fillMaxWidth()) { + Box( + modifier = Modifier + .align(Alignment.CenterStart) + .padding(start = 16.dp, end = 48.dp) + ) { + innerTextField() + } + Icon( + if (showPassword) { + Icons.Filled.Visibility + } else { + Icons.Filled.VisibilityOff + }, + contentDescription = "Toggle password visibility", + modifier = Modifier + .align(Alignment.CenterEnd) + .requiredSize(48.dp).padding(16.dp) + .clickable { showPassword = !showPassword } + ) + } } ) }