Android Studio - EditText con tasto cancella

In questo articolo vedremo come realizzare una EditText con il pulsante sul lato destro che cancella il contenuto.

Per prima cosa occorre creare un'icona ed inserirla nel progetto come descritto in questo articolo

Una volta creata l'icona dobbiamo inserire l'EditText all'interno del 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"
	tools:context=".MainActivity">

	<EditText
	android:id="@+id/editText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:inputType="textMultiLine\|textCapSentences" />

	</LinearLayout>

view raw activity_main_clearText.xml hosted with ❤ by GitHub

Come si può vedere è una normalissima EditText. Ora occorre inserire questa riga di codice per impostare il pulsante Cancella nell'EditText all'interno del file MainActivity.kt

	//Imposta l'EditText con il pulsante cancella contenuto chiamando la funzione
	//setupClearButtonWithAction()
	editText.setupClearButtonWithAction()

view raw editText_clear_bn_set.kt hosted with ❤ by GitHub

Ora occorre scrivere la funzione che permette di inserire e gestire il pulsante cancella nell'EditText

	//funzione che permette di inserire il pulsante cancella nell'EditText
	private fun EditText.setupClearButtonWithAction() {
	addTextChangedListener(object : TextWatcher {
	override fun afterTextChanged(editable: Editable?) {
	val clearIcon = if (editable?.isNotEmpty() == true) R.drawable.ic_clear else 0
	//ic_clear è il nome dell'icona creata all'interno della cartella drawable
	setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0)
	}

	override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
	override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) = Unit
	})

	//gestisce il clic sul pulsante cancella
	setOnTouchListener(View.OnTouchListener { _, event ->
	if (event.action == MotionEvent.ACTION_UP) {
	if (event.rawX >= (this.right - this.compoundPaddingRight)) {
	//cancella il contenuto dell'EditText
	this.setText("")
	return@OnTouchListener true
	}
	}
	return@OnTouchListener false
	})
	}

view raw editText_clear_bn_fun.kt hosted with ❤ by GitHub

Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialedittext9

	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import android.text.Editable //Importazione della Classe: Editable
	import android.text.TextWatcher //Importazione della Classe: TextWatcher
	import android.view.MotionEvent //Importazione della Classe: MotionEvent
	import android.view.View
	import android.widget.EditText
	import kotlinx.android.synthetic.main.activity_main.*

	class MainActivity : AppCompatActivity() {

	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)

	//Imposta l'EditText con il pulsante cancella contenuto chiamando la funzione
	//setupClearButtonWithAction()
	editText.setupClearButtonWithAction()
	}

	//funzione che permette di inserire il pulsante cancella nell'EditText
	private fun EditText.setupClearButtonWithAction() {
	addTextChangedListener(object : TextWatcher {
	override fun afterTextChanged(editable: Editable?) {
	val clearIcon = if (editable?.isNotEmpty() == true) R.drawable.ic_clear else 0
	//ic_clear è il nome dell'icona creata all'interno della cartella drawable
	setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0)
	}

	override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
	override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) = Unit
	})

	//gestisce il clic sul pulsante cancella
	setOnTouchListener(View.OnTouchListener { _, event ->
	if (event.action == MotionEvent.ACTION_UP) {
	if (event.rawX >= (this.right - this.compoundPaddingRight)) {
	//cancella il contenuto dell'EditText
	this.setText("")
	return@OnTouchListener true
	}
	}
	return@OnTouchListener false
	})
	}
	}