Toggle password field jetpack compose

Question

Hi I am trying to change visualTransformation dynamically when the user click on see password button. I can manage to filter password but couldn't achive to show in plain text. Any idea for that ? Here is what I got so far.

fun UserInputText(
    keyboardType: KeyboardType = KeyboardType.Text,
    onTextChanged: (TextFieldValue) -> Unit,
    textFieldValue: TextFieldValue,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    borderColor: Color = editTextBorderColor,
    keyboardShown: Boolean,
    onTextFieldFocused: (Boolean) -> Unit,
    focusState: Boolean,
    placeholder: String = "",
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier.border(
            width = 2.dp,
            color = borderColor,
            shape = RoundedCornerShape(16.dp)
        )
    ) {
        var lastFocusState by remember { mutableStateOf(FocusState.Inactive) }
        val focusRequester = FocusRequester()
        val focusRequesterModifier = Modifier.focusRequester(focusRequester)

        BasicTextField(
            value = textFieldValue,
            onValueChange = { onTextChanged(it) },
            modifier =
            modifier.focus().then(focusRequesterModifier)
                .align(Alignment.TopStart)
                .focusObserver { state ->
                    if (lastFocusState != state) {
                        onTextFieldFocused(state == FocusState.Active)
                    }
                    lastFocusState = state
                },
            keyboardOptions = KeyboardOptions(
                keyboardType = keyboardType,
                imeAction = ImeAction.Send
            ),
            visualTransformation = visualTransformation,
            maxLines = 1,
            cursorColor = inputTextColor,
            textStyle = MaterialTheme.typography.body1.copy(color = inputTextColor)
        )
        if(keyboardType == KeyboardType.Password) {
            Image(
                vectorResource(id = R.drawable.ic_icons_watch_count_24), modifier = Modifier
                    .align(Alignment.TopEnd)
                    .padding(end = 16.dp, top = 16.dp).clickable(onClick = {})
            )
        }
    }
}

Answer 1

You can use the standard TextField composable:

var password by rememberSaveable { mutableStateOf("") }
var passwordVisible by rememberSaveable { mutableStateOf(false) }

TextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    singleLine = true,
    placeholder = { Text("Password") },
    visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
    trailingIcon = {
        val image = if (passwordVisible)
            Icons.Filled.Visibility
        else Icons.Filled.VisibilityOff

        // Please provide localized description for accessibility services
        val description = if (passwordVisible) "Hide password" else "Show password"

        IconButton(onClick = {passwordVisible = !passwordVisible}){
            Icon(imageVector  = image, description)
        }
    }
)

Note: to use Icons.Filled.Visibility and Icons.Filled.VisibilityOff add in the dependencies: implementation "androidx.compose.material:material-icons-extended:$compose_version"

Answer 2

Check this:

    var passwordVisibility: Boolean by remember { mutableStateOf(false) }
    TextField(value = "Enter Password",
        visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
        leadingIcon = {
            IconButton(onClick = {
                passwordVisibility = !passwordVisibility
            }) {
                Icon(imageVector = vectorResource(id = R.drawable.ic_icons_watch_count_24))
            }
        },
        onValueChange = { })