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

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 = { })
    

Answer 2

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 3

Hide/Show password in jetpack compose

 @Composable
    fun CommonTextFieldPassword(
        text: MutableState<String>,
        placeholder: String,
        trailingIcon: Int = R.drawable.eye,
        visibility: MutableState<Boolean> = remember { mutableStateOf(false) }
    ) {
        TextField(
            value = text.value,
            onValueChange = { text.value = it },
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.White,
                focusedLabelColor = fadedTextColor,
                textColor = headingColor,
                unfocusedLabelColor = fadedTextColor,
                unfocusedIndicatorColor = fadedTextColor,
                focusedIndicatorColor = headingColor
            ),
            label = { Text(text = placeholder) },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = trailingIcon),
                    contentDescription = "",
                    modifier = Modifier
                        .size(25.dp)
                        .clickable {
                            visibility.value = !visibility.value
                        },
                    tint = if (visibility.value) titleColor else fadedTextColor
                )
            },
            modifier = Modifier.fillMaxWidth(),
            visualTransformation = if (visibility.value) VisualTransformation.None else PasswordVisualTransformation()
        )
    }