CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-compose-textfield
newAndroidDeveloper
newAndroidDeveloper

Reputation: 201

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

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

Upvotes: 20

Views: 7947

Answers (2)

Dragan N
Dragan N

Reputation: 61

use three vars:

var password by rememberSaveable { mutableStateOf("") }
var valueChanged by remember { mutableStateOf(false) } 
var transforms by remember { mutableStateOf(false) }

then for TextField parameters use something like:

value = password,
visualTransformation =
                if (transforms) {
                    PasswordVisualTransformation('*')
                } else VisualTransformation.None,
onValueChange = { newValue ->
                if (...) {
                    password = newValue 
                    valueChanged = true
                    transforms = false
                }                    
            }.also {
                LaunchedEffect(it) {
                    if (valueChanged) {
                        delay(500)  // delay of half a second
                        transforms = true
                        valueChanged = false
                    }
                }
            }

Upvotes: 2

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364025

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(),
)

Upvotes: 26

Related Questions