How to create a composable password with Jetpack Compose

Password text field and password confirmation text field (Strings in Spanish)
  • Stateless components.
  • State hoisting.
  • Slot pattern.
  • Modifier parameter to customize the composable.
  • The VisualTransformation attribute allows displaying the password or not.
  • The TrailingIcon attribute is the typical eye icon, but if you change the state of the show password variable, the icon would change.
  • Line 71 validates the security password level. There is a validateStrenghtPassword parameter that allows you to set true if you want to validate the security level of the password.
  • Strengthchecker is a function that allows you to validate the security level of the password. I will show you an example in the bonus section
  • onHasStrongPassword is a high-orden function that lets you know the security level of the password. We are applying the state hoisting here.
  • BuildAnnotatedString is a function that allows you to create a custom string with different styles for each word, for example
Composable password text field (Strings in Spanish)
  • The TrailingIcon attribute is the typical eye icon, but if you change the state of the show password variable, the icon would change.
  • Line 71 validates if the password text field is equal to the confirmation password text field; otherwise, it displays a text.
password confirmation text field (Strings in spanish)

Testing

semantics properties for a composable (Line 23 of passwordtextfield Composable)
semantics properties for a composable (Line 81 of passwordtextfield Composable)
Password Text Field Tests
Confirm Password Text Field Tests

Bonus

StrengthChecker function

Resources

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juan Guillermo Gómez Torres

Tech Lead in Wordbox. @GDGCali Founder. @DevHackCali Founder. Firebase & GCPcloud & Kotlin @GoogleDevExpert . Android lover.