Is there a Jetpack Compose equivalent of A password field with the password visible to the user?

Question

• Product: Android App
• Programming language: kotlin

When using XML to create the UI. There is an option for a password field with the password visible to the user. All the developer have to do is set the inputType = TYPE_TEXT_VARIATION_VISIBLE_PASSWORD

In Jetpack Compose there is the option to create a textField(). Then pass in visualTransformation = PasswordVisualTransformation() to make the typing turn into dots. However, it does not preview the letters for a few seconds before turning into dots like how it was with XML.

Was wondering if there is an equivalent jetpack compose function of a password field with the password visible to the user for a few seconds before it turns into a dot.

Thank you

Answer 1

The inputType configures the keyboard type that is shown, acceptable characters and appearance of the edit text.
With 1.0.0 to have a Password field you can use a TextField with the KeyboardType.Password:

keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)

Check also this ticket for futher configuration.

To use a Password field with visualTransformation(mask character used instead of original text):

var password by rememberSaveable { mutableStateOf("") }
TextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Enter password") },
    visualTransformation = PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
)

To use a password field visible to the user, just remove the visualTransformation (and use the default VisualTransformation.None):

var password by rememberSaveable { mutableStateOf("") }
TextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Enter password") },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
)

If you want to switch between the two options:

var passwordVisibility by remember { mutableStateOf(false) }

TextField(
   //...
   keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
   visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
)