Android Studio - EditText: mostra/nascondi password

In questo articolo vedremo come realizzare una EditText che permette di visualizzare o nascondere la password inserita.

ESEMPIO 1:
In questo esempio vedremo come visualizzare/nascondere la password inserita in una EditText tramite l'utilizzo di una CheckBox.
Ecco come si presenta il file activity_main.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	tools:context=".MainActivity">
	<EditText
	android:id="@+id/editText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:inputType="text|textPassword" />
	<CheckBox
	android:id="@+id/checkBox"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="Mostra password" />
	</LinearLayout>

view raw activity_main_shpw.xml hosted with ❤ by GitHub

Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialedittext10
	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import android.text.method.HideReturnsTransformationMethod //Importazione della Classe: HideReturnsTransformationMethod
	import android.text.method.PasswordTransformationMethod //Importazione della Classe: PasswordTransformationMethod
	import android.widget.CheckBox //Importazione della Classe: CheckBox
	import kotlinx.android.synthetic.main.activity_main.*
	class MainActivity : AppCompatActivity() {
	private var showPass: CheckBox? = null
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)
	showPass = findViewById(R.id.checkBox)
	//funzione che gestisce il click all'interno della CheckBox
	showPass!!.setOnCheckedChangeListener { _, isChecked ->
	//Se la CheckBox è selezionata
	if (isChecked) {
	// mostra password
	editText.transformationMethod = HideReturnsTransformationMethod.getInstance()
	} else {
	// nascondi password
	editText.transformationMethod = PasswordTransformationMethod.getInstance()
	}
	//questa riga di codice serve per impostare il cursore alla fine della password
	editText.setSelection(editText.length())
	}
	}
	}

view raw MainActivity_shpw.kt hosted with ❤ by GitHub

Ecco un video dimostrativo

Download Project
Download file APK
Visualizza su

---

ESEMPIO 2:
In questo esempio vedremo come visualizzare/nascondere la password inserita in una EditText tramite un pulsante a fianco della EditText.
Per prima cosa occorre creare due icone, una per mostrare la password ed una per nasconderla ed inserirle nel progetto come descritto in questo articolo

Ecco come si presenta il file activity_main.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:gravity="center_vertical"
	android:orientation="horizontal"
	tools:context=".MainActivity">
	<EditText
	android:id="@+id/editText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_marginLeft="16dp"
	android:layout_weight="1"
	android:inputType="text|textPassword" />
	<ImageView
	android:id="@+id/ivShowHide"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginRight="16dp"
	android:src="@drawable/ic_visibility_on" />
	</LinearLayout>

view raw activity_main_shpw2.xml hosted with ❤ by GitHub

Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialedittext11
	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import android.text.method.HideReturnsTransformationMethod //Importazione della Classe: HideReturnsTransformationMethod
	import android.text.method.PasswordTransformationMethod //Importazione della Classe: PasswordTransformationMethod
	import android.widget.ImageView //Importazione della Classe: ImageView
	import kotlinx.android.synthetic.main.activity_main.*
	class MainActivity : AppCompatActivity() {
	private var showPass: ImageView? = null
	//impostazione iniziale di password non visibile
	private var isShowPass = false
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)
	showPass = findViewById(R.id.ivShowHide)
	//con questo si imposta l'immagine cliccabile
	showPass!!.setOnClickListener {
	isShowPass = !isShowPass
	showPassword(isShowPass)
	}
	// con questa riga di codice si imposta l'EditText e l'immagine all'avvio dell'app
	showPassword(isShowPass)
	}
	private fun showPassword(isShow: Boolean) {
	if (isShow) {
	// mostra password
	editText.transformationMethod = HideReturnsTransformationMethod.getInstance()
	// questa riga serve per modificare l'immagine
	showPass!!.setImageResource(R.drawable.ic_visibility_off)
	} else {
	// nascondi password
	editText.transformationMethod = PasswordTransformationMethod.getInstance()
	// questa riga serve per modificare l'immagine
	showPass!!.setImageResource(R.drawable.ic_visibility_on)
	}
	//questa riga di codice serve per impostare il cursore alla fine della password
	editText.setSelection(editText.length())
	}
	}

view raw MainActivity_shpw2.kt hosted with ❤ by GitHub

Ecco un video dimostrativo

Download Project
Download file APK
Visualizza su

---

ESEMPIO 3:
In questo esempio vedremo come visualizzare/nascondere la password inserita in una EditText tramite un pulsante all'interno della EditText.
Per prima cosa occorre inserire questa riga di codice all'interno del file build.gradle

implementation"com.android.support:design:28.0.0"

view raw build.gradle hosted with ❤ by GitHub

all'interno della funzione dependencies

Ora occorre creare il layout nel file activity_main.xml

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:gravity="center_vertical"
	android:paddingLeft="16dp"
	android:paddingRight="16dp"
	android:paddingTop="16dp"
	tools:context=".MainActivity">
	<com.google.android.material.textfield.TextInputLayout
	android:id="@+id/pass"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:layout_alignParentStart="true"
	android:layout_alignParentTop="true"
	app:passwordToggleEnabled="true">
	<com.google.android.material.textfield.TextInputEditText
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:inputType="textPassword"
	android:hint="Password">
	</com.google.android.material.textfield.TextInputEditText>
	</com.google.android.material.textfield.TextInputLayout>
	</RelativeLayout>

view raw activity_main_shpw3.xml hosted with ❤ by GitHub

Le righe che permettono di avere l'EditText con il pulsante mostra/nascondi password sono dalla riga 14 alla riga 31

In questo modo non è necessario creare alcun codice all'interno del file MainActivity.kt, infatti eseguendo l'app, si vedrà che premendo il pulsante viene visualizzata o nascosta la password, così come il simbolo all'interno della EditText cambia di conseguenza.

Ecco un video dimostrativo

Download Project
Download file APK
Visualizza su

---

ESEMPIO 4:
In questo esempio, partendo dall'esempio 3, vedremo come personalizzare l'icona del tasto visualizza/nascondi password.
Per prima cosa occorre creare due icone, una per mostrare la password ed una per nasconderla ed inserirle nel progetto come descritto in questo articolo

Una volta create le due icone occorre:

1. Aprire la cartella res
2. Cliccare con il tasto destro sulla cartella drawable
3. Selezionare New
4. Selezionare Drawable resource file

5. Dare un nome al file ad esempio icon_selector
6. Cliccare sul pulsante OK per confermare

Una volta aperto il file icon_selector.xml inserire le seguenti righe di codice:

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:drawable="@drawable/ic_visibility_on" android:state_checked="true"/>
	<item android:drawable="@drawable/ic_visibility_off"/>
	</selector>

view raw icon_selector.xml hosted with ❤ by GitHub

Ora bisogna aprire il file activity_main.xml, posizionarsi prima della chiusura della View TextInputLayout ed inserire queste righe in modo da selezionare le icone create e dare un colore diverso da quello predefinito:

app:passwordToggleDrawable="@drawable/icon_selector"

view raw drawable1.xml hosted with ❤ by GitHub

app:passwordToggleTint="@color/colorAccent"

view raw drawable2.xml hosted with ❤ by GitHub

Ricordo che come colore al posto di "@color/colorAccent" è possibile inserire il colore in formato esadecimale ad esempio: "#FF418A".
Ecco come si presenta il file activity_main.xml

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:gravity="center_vertical"
	android:paddingLeft="16dp"
	android:paddingRight="16dp"
	android:paddingTop="16dp"
	tools:context=".MainActivity">
	<com.google.android.material.textfield.TextInputLayout
	android:id="@+id/pass"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:layout_alignParentStart="true"
	android:layout_alignParentTop="true"
	app:passwordToggleEnabled="true"
	app:passwordToggleDrawable="@drawable/icon_selector"
	app:passwordToggleTint="@color/colorAccent">
	<com.google.android.material.textfield.TextInputEditText
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:inputType="textPassword"
	android:hint="Password">
	</com.google.android.material.textfield.TextInputEditText>
	</com.google.android.material.textfield.TextInputLayout>
	</RelativeLayout>

view raw activity_main_shpw4.xml hosted with ❤ by GitHub

Le righe aggiunte si trovano alla riga 22 e riga 23

Ecco un video dimostrativo

Download Project
Download file APK
Visualizza su