You can create an icon to hide or show a password based on a user toggle to improve security and enhance the user experience.
Version compatibility
This implementation requires that your project minSDK be set to API level 21 or higher.
Dependencies
Show or hide a password based on user toggle
To show or hide a password based on a user toggle, create an input field for entering information and use a clickable icon for the toggle:
Key points about the code
- Maintains the password visibility state in
showPassword
. - Uses a
TextField
composable for password entry. - Has a clickable trailing icon, which toggles the value of
showPassword
. - Defines the
visualTransformation
attribute and thepainter
of the trailing icon by the state ofshowPassword
. - Dictates the
visualTransformation
attribute to display or hide the password.
Results
![Toggling the show and hide password icon](https://developer.android.google.cn/static/quick-guides/content/password_visibility_toggle.gif?authuser=7)
Parent collections
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?authuser=7)
Display text
Text is a central piece of any UI. Find out different ways
you can present text in your app to provide a delightful user experience.
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?authuser=7)
Request user input
Learn how to implement ways for users to interact
with your app by entering text and using other means of input.
Have questions or feedback
Go to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts.