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"
)
}
}
}
)
}
'안드로이드 > Compose' 카테고리의 다른 글
[Compose] TextField에 오류 메시지 표시하기 (0) | 2024.11.03 |
---|---|
[Android][Kotlin] 구글 로그인 (0) | 2024.11.01 |
[Compose] hiltViewModel()과 viewModel() 차이 (0) | 2024.10.28 |