¿Cómo alternar la visibilidad de la contraseña en Android?

Como sabemos, alternar significa cambiar entre las dos opciones diferentes presionando un solo botón. Entonces, en este artículo, estaríamos viendo cómo cambiar la visibilidad de la contraseña presionando un solo botón (aquí sería el botón del ojo), es decir, con una entrada de tipo de contraseña, también podemos habilitar un icono, que puede mostrar u ocultar la texto que el usuario está escribiendo. Para implementar este proyecto, estaríamos usando TextInputLayout (hijo de Linear Layout) , que es un componente de diseño que viene con la biblioteca de diseño de materiales de Android. Dado que estaríamos ingresando la contraseña, TextInputEditText se usará en lugar de EditText normal , ya que TextInputEditText es una subclase de EditText y TextEditText es un hijo de TextInputLayout.Hay cinco atributos XML asociados con la alternancia de visibilidad de la contraseña.

• passwordToggleEnabled: este atributo tiene su valor verdadero o falso, por lo que cuando queremos que la contraseña sea conmutable, debemos asignar a este atributo el valor verdadero.
• passwordToggleTint: permite darle al color el icono de cambio de visibilidad.
• passwordToggleTintMode: permite dar diferentes modos de fondo al icono de alternar.
• passwordToggleDrawable: nos permite dar un ícono diferente en lugar de la imagen de ojo predeterminada para el ícono de alternar.
• passwordToggleContentDescription: Nos permite dar la descripción al icono de alternar.

qué

Implementación paso a paso

Paso 1: crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

Ahora vaya al archivo activity_main.xml que representa la interfaz de usuario de la aplicación. A continuación se muestra el código para el archivo activity_main.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.

<!--xml code for the project-->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"                                              
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
<!--TextInput layout which acts as a wrapper to the edit text-->
<com.google.android.material.textfield.TextInputLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColorHint="#0F9D58"
        app:hintTextAppearance="@style/TextAppearance.AppCompat.Large"
        android:hint="Enter your password..."
        <!--Enabling the password toggle>                                                
        app:passwordToggleEnabled="true"
        <!--applying the tint to the password visibility toggle-->
        app:passwordToggleTint="@color/colorPrimary"
  
        android:scrollbarSize="25dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
  
        <!--Using the TextInputEditText,which is 
            same as the edit text,but remember-->
        <!--that we need to use TextInputEditText 
            with TextInputLayout-->
 <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="30dp"
            android:inputType="textPassword"
            android:ems="15"/>
  
 </com.google.android.material.textfield.TextInputLayout>
  
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 3: trabajar con build.gradle (archivo de nivel de aplicación)

Importe la dependencia de los componentes de material en la sección de dependencia.

dependencias {

   // …

   implementación ‘com.google.android.material:material:<versión>’

   // …

 }

Paso 4: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle. Dado que no hay lógica que deba ejecutarse en este proyecto, MainActivity no contiene ningún código.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Producción: