¿Cómo implementar TextWatcher en Android?

Si hay una aplicación que contiene un formulario de inicio de sesión que debe completar el usuario, el botón de inicio de sesión debe estar deshabilitado (es decir, no debe poderse hacer clic en él). Cuando el usuario ingresa las credenciales del formulario, el botón debe estar habilitado para hacer clic para el usuario. Entonces, en este artículo, estamos implementando un TextWatcher para el campo EditText . Eche un vistazo a la siguiente imagen para tener una idea de qué es TextWatcher y cómo puede aumentar la interactividad del usuario.

TextWatcher in Android

Pasos para implementar TextWatcher en Android

Paso 1: crear un proyecto de actividad vacía

Paso 2: Trabajando con activity_main.xml

  • Implemente los dos campos de texto de edición, uno para el correo electrónico y otro para la contraseña.
  • Invoque el siguiente código dentro del archivo activity_main.xml.

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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <!--this is the email edittext field-->
    <EditText
        android:id="@+id/etEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:layout_marginEnd="16dp"
        android:hint="Email"
        android:inputType="textEmailAddress" />
  
    <!--this is the email password field-->
    <EditText
        android:id="@+id/etPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/etEmail"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Password"
        android:inputType="textPassword" />
  
    <!--login button which set to be false for the enabled attribute-->
    <Button
        android:id="@+id/loginButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/etPassword"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:enabled="false"
        android:text="LOGIN" />
  
</RelativeLayout>

Interfaz de usuario de salida:

TextWatcher in Android

Paso 3: Trabajar con el archivo MainAcitvity.java

  • También podemos manejar ambos EditTexts por separado. Pero en este caso, para reducir las líneas de código, se implementa el objeto de escucha de devolución de llamada TextWatcher, y el objeto de escucha de devolución de llamada se pasa al método addTextChangedListener para cada uno de los textos de edición.
  • Invoque el siguiente código dentro del archivo MainActivity.java . Se agregan comentarios para una mejor comprensión.

Java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.Button;
import android.widget.EditText;
  
public class MainActivity extends AppCompatActivity {
  
    // two edit text fields
    EditText etEmail, etPassword;
  
    // one login button
    Button bLogin;
  
    // implement the TextWatcher callback listener
    private TextWatcher textWatcher = new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
  
        }
  
        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            // get the content of both the edit text
            String emailInput = etEmail.getText().toString();
            String passwordInput = etPassword.getText().toString();
  
            // check whether both the fields are empty or not
            bLogin.setEnabled(!emailInput.isEmpty() && !passwordInput.isEmpty());
        }
  
        @Override
        public void afterTextChanged(Editable s) {
  
        }
    };
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // register all the UI elements 
          // with their appropriate IDs
        etEmail = findViewById(R.id.etEmail);
        etPassword = findViewById(R.id.etPassword);
        bLogin = findViewById(R.id.loginButton);
  
        // set the TextChange Listener for both 
          // the edit text fields
        etEmail.addTextChangedListener(textWatcher);
        etPassword.addTextChangedListener(textWatcher);
    }
}

Salida: ejecutar en el emulador

Publicación traducida automáticamente

Artículo escrito por adityamshidlyali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *