본문 바로가기
안드로이드/Compose

[Compose] TextField password 보이기/숨기기

by jinwo_o 2024. 11. 3.

https://alitalhacoban.medium.com/show-hide-password-jetpack-compose-d0c4abac568f

 

Show-Hide Password in TextField | Jetpack Compose

First, I’ll create a composable function named ShowHidePasswordTextField which is annotated with @Composable keyword like below. It’ll…

alitalhacoban.medium.com

@Composable
fun ShowHidePasswordTextField() {

    var password by remember { mutableStateOf(value = "") }
    var showPassword by remember { mutableStateOf(value = false) }

    OutlinedTextField(
        modifier = Modifier.fillMaxWidth(),
        value = password,
        onValueChange = { newText ->
            password = newText
        },
        label = { Text(text = "Password") },
        placeholder = { Text(text = "Type password here") },
        shape = RoundedCornerShape(percent = 20),
        visualTransformation = if (showPassword) {
            VisualTransformation.None
        } else {
            PasswordVisualTransformation()
        },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
        trailingIcon = {
            if (showPassword) {
                IconButton(onClick = { showPassword = false }) {
                    Icon(
                        imageVector = Icons.Filled.Visibility,
                        contentDescription = "hide_password"
                    )
                }
            } else {
                IconButton(
                    onClick = { showPassword = true }) {
                    Icon(
                        imageVector = Icons.Filled.VisibilityOff,
                        contentDescription = "hide_password"
                    )
                }
            }
        }
    )
}