Trabajando con EditText en Android

EditText es uno de los widgets básicos de la interfaz de usuario, que se utiliza para tomar la entrada del usuario. EditText se deriva o es la extensión de TextView en Android. Este artículo se ha discutido en detalle sobre EditText en Android. El artículo también contiene algunas de las redirecciones a otros artículos, también consúltelos para obtener una perspectiva detallada del widget EditText en Android. Eche un vistazo a la siguiente lista para tener una idea de la discusión general.

Tipo de entrada para EditText
Obtener los datos o recuperar los datos introducidos por el usuario
Personalización de datos de entrada
Adición de sugerencias para el marcador de posición
Cambiar el color del trazo
Cambiar el color resaltado dentro del EditText
Oyente de eventos para EditText
Mensaje de error para EditText archivado
Implementación de alternancia de visibilidad de contraseña
Conteo de caracteres usando Material Design EditText

La perspectiva detallada de EditText en Android

Paso 1: crear un proyecto de actividad vacío

Cree un proyecto de Android Studio de actividad vacío. Consulte Cómo crear/iniciar un nuevo proyecto en Android Studio para saber cómo crear un proyecto de Android de actividad vacío.

Paso 2: trabajar con el archivo activity_main.xml

El diseño principal de la aplicación contiene el widget EditText y dos botones. Para implementar la interfaz de usuario, invoque el siguiente código dentro del archivo activity_main.xml . Para tener una idea de cómo se ve el EditText básico en Android.

XML

<?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"
    tools:ignore="HardcodedText">
 
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.321" />
 
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="@color/green_500"
        android:text="SUBMIT"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="@+id/editText"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
    <Button
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:backgroundTint="@color/green_500"
        android:text="CANCEL"
        android:textColor="@color/green_500"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

Ahora analicemos los diversos atributos del EditText

1. Tipo de entrada para EditText

Este es uno de los atributos que es necesario especificar en el widget EditText. El cual define el tipo de datos a ser ingresados por el usuario.
Los siguientes son atributos que deben invocarse y hacer referencia a su salida para obtener una comprensión clara.

Atributo de tipo de entrada	Tipo de los datos que se ingresan
número	Valor numérico matemático
teléfono	Número de contacto basado en el código de país
fecha	Para tomar la entrada de fecha
tiempo	Para tomar el tiempo se necesita entrada
textCapCharacters	Para tomar toda la entrada en mayúsculas
textoMultilínea	Hace que el usuario ingrese múltiples líneas de texto
dirección de correo electrónico de texto	Para tomar la dirección de correo electrónico del usuario
textoPersonaNombre	Para tomar el nombre de la persona como entrada
contraseña de texto	Para tomar la contraseña de texto del usuario, que se convierte en puntos de asteriscos después de ingresar los datos
númeroContraseña	Para tomar solo los dígitos numéricos como contraseña
textVisiblePassword	Para tomar la contraseña de texto del usuario, que no se convierte en puntos de asteriscos después de ingresar los datos
textoUri	Para tomar la URL particular del sitio web

Consulte el siguiente código, que contiene solo el teléfono como tipo de entrada, para fines de demostración. Cual el valor de eso puede ser reemplazado con los valores mencionados en la tabla anterior.

XML

<?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"
    tools:ignore="HardcodedText">
 
    <!--the values mentioned in the table are to be
        invoked inside the inputType attribute-->
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
               
        android:inputType="phone"
               
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.321" />
 
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="@color/green_500"
        android:text="SUBMIT"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="@+id/editText"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
    <Button
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:backgroundTint="@color/green_500"
        android:text="CANCEL"
        android:textColor="@color/green_500"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

2. Obtener los datos o recuperar los datos introducidos por el usuario

Para obtener los datos ingresados por el usuario, primero se debe invocar el widget EditText con la identificación. que se usa para señalar los widgets únicos en Android.
Proporcione EditText con la identificación, haciendo referencia al siguiente código, que debe invocarse dentro del archivo activity_main.xml .

XML

<?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"
    tools:ignore="HardcodedText">
 
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.321" />
 
    <Button
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="@color/green_500"
        android:text="SUBMIT"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="@+id/editText"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
    <Button
        android:id="@+id/cancelButton"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:backgroundTint="@color/green_500"
        android:text="CANCEL"
        android:textColor="@color/green_500"
        app:layout_constraintEnd_toStartOf="@+id/submitButton"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

El siguiente código debe invocarse dentro del archivo MainActivity.kt. Que realiza la operación de recuperación y proporciona el mensaje Toast igual que los datos ingresados.
Hay un escenario, si el usuario dejó el EditText en blanco, debe verificarse si está en blanco o no. Para verificar si está en blanco EditText.

Kotlin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // register editText with instance
        val editText: EditText = findViewById(R.id.editText)
 
        // also register the submit button with the appropriate id
        val submitButton: Button = findViewById(R.id.submitButton)
 
        // handle the button with the onClickListener
        submitButton.setOnClickListener {
 
            // get the data with the "editText.text.toString()"
            val enteredData: String = editText.text.toString()
 
            // check whether the retrieved data is empty or not
            // based on the emptiness provide the Toast Message
            if (enteredData.isEmpty()) {
                Toast.makeText(applicationContext, "Please Enter the Data", Toast.LENGTH_SHORT)
                    .show()
            } else {
                Toast.makeText(applicationContext, enteredData, Toast.LENGTH_SHORT).show()
            }
        }
    }
}

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    EditText editText;
    Button submitButton;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // register editText with instance
        editText = (EditText) findViewById(R.id.editText);
 
        // also register the submit button with the appropriate id
        submitButton = (Button) findViewById(R.id.submitButton);
 
        // handle the button with the onClickListener
        submitButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                         
                        // get the data with the
                        // "editText.text.toString()"
                        String enteredData = editText.getText().toString();
 
                        // check whether the retrieved data is
                        // empty or not based on the emptiness
                        // provide the Toast Message
                        if (enteredData.isEmpty()) {
                            Toast.makeText(getApplicationContext(), "Please Enter the Data", Toast.LENGTH_SHORT).show();
                        } else {
                            Toast.makeText(getApplicationContext(), enteredData, Toast.LENGTH_SHORT).show();
                        }
                    }
                });
    }
}

Producción:

3. Personalización de datos de entrada

El EditText permite a los desarrolladores hacer restricciones en la cantidad de datos que el usuario debe ingresar. Por ejemplo, se puede restringir el número de caracteres ingresados, o se puede restringir el número de líneas, o se puede restringir el número de dígitos.
Los siguientes son algunos de los atributos:

Ingrese solo números particulares -> El siguiente atributo toma solo los dígitos 5 y 6 como entrada y el usuario no puede ingresar otros números.

dígitos=”56″

tipo de entrada = «número»

Restrinja la cantidad de caracteres de la entrada -> El siguiente atributo hace que el usuario ingrese solo 6 caracteres.

maxLength=”6″

Restrinja el número de líneas de entrada -> El siguiente atributo hace que el usuario esté restringido a una sola línea, en la que EditText no se expande si la cantidad de datos supera a una sola línea.

lineas=”1″

maxLines=”1″

El siguiente es el ejemplo de numberPassword con solo 6 dígitos como maxLength .

XML

<?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"
    tools:ignore="HardcodedText">
 
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
               
        android:inputType="numberPassword"
        android:maxLength="6"
               
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.321" />
 
    <Button
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="@color/green_500"
        android:text="SUBMIT"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="@+id/editText"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
    <Button
        android:id="@+id/cancelButton"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:backgroundTint="@color/green_500"
        android:text="CANCEL"
        android:textColor="@color/green_500"
        app:layout_constraintEnd_toStartOf="@+id/submitButton"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

4. Agregar sugerencias para el marcador de posición

Las sugerencias para EditText dan confianza al usuario sobre los datos que deben ingresar en EditText.

El atributo que se utiliza para proporcionar el texto de sugerencia para EditText es:

android:hint=”Nombre y Apellido”

Consulte el siguiente código y su salida para una mejor comprensión.

XML

<?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"
    tools:ignore="HardcodedText">
 
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
               
        android:hint="First and Last Name"
               
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.321" />
 
    <Button
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="@color/green_500"
        android:text="SUBMIT"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="@+id/editText"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
    <Button
        android:id="@+id/cancelButton"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:backgroundTint="@color/green_500"
        android:text="CANCEL"
        android:textColor="@color/green_500"
        app:layout_constraintEnd_toStartOf="@+id/submitButton"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

5. Cambia el color del trazo

El color del trazo que aparece cuando está enfocado también se puede cambiar mediante el siguiente atributo

android:backgroundTint=”colorValue”

Consulte el siguiente código y su salida para una mejor comprensión.

XML

<?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"
    tools:ignore="HardcodedText">
 
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
         
        android:backgroundTint="@android:color/holo_red_dark"
         
        android:hint="First and Last Name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.321" />
 
    <Button
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="@color/green_500"
        android:text="SUBMIT"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="@+id/editText"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
    <Button
        android:id="@+id/cancelButton"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:backgroundTint="@color/green_500"
        android:text="CANCEL"
        android:textColor="@color/green_500"
        app:layout_constraintEnd_toStartOf="@+id/submitButton"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

6. Cambia el color resaltado dentro del EditText

El texto dentro de EditText se resalta cuando el usuario selecciona el texto particular de él.
El color del texto resaltado dentro de EditText se puede cambiar usando el siguiente atributo.

android:textColorHighlight=”valor del color”

Consulte el siguiente código y su salida para una mejor comprensión.

XML

<?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"
    tools:ignore="HardcodedText">
 
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
 
        android:textColorHighlight="@android:color/holo_orange_light"
 
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.321" />
 
    <Button
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="@color/green_500"
        android:text="SUBMIT"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="@+id/editText"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
    <Button
        android:id="@+id/cancelButton"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:backgroundTint="@color/green_500"
        android:text="CANCEL"
        android:textColor="@color/green_500"
        app:layout_constraintEnd_toStartOf="@+id/submitButton"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

7. Oyente de eventos para EditText

Los detectores de eventos para EditText también se pueden implementar para realizar acciones particulares. Consulte ¿Cómo implementar TextWatcher en Android?

8. Mensaje de error para el EditText archivado

Si el usuario se pierde alguno de los EditText o deja EditText en blanco sin ingresar ningún dato, se debe alertar al usuario con el mensaje de error.
Para implementar dicha funcionalidad, consulte Implementar validación de formulario (Error al editar texto) en Android

9. Implementación de la alternancia de visibilidad de la contraseña

Implemente la alternancia de visibilidad de la contraseña para EditText consultando ¿Cómo alternar la visibilidad de la contraseña en Android?.

10. Conteo de caracteres usando Material Design EditText

Invoque la siguiente dependencia para acceder a los componentes de Material Design.

implementación ‘com.google.android.material:material:1.2.1’

Los siguientes atributos deben invocarse dentro de TextInputLayout

aplicación: contador habilitado = «verdadero»

aplicación: contador MaxLength = «6»

Consulte el siguiente código y su salida para una mejor comprensión.

XML

<?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"
    tools:ignore="HardcodedText">
 
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Something"
 
        app:counterEnabled="true"
        app:counterMaxLength="6"
 
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
 
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
 
 
    </com.google.android.material.textfield.TextInputLayout>
 
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

Publicación traducida automáticamente

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

La perspectiva detallada de EditText en Android

XML

Ahora analicemos los diversos atributos del EditText

1. Tipo de entrada para EditText

XML

2. Obtener los datos o recuperar los datos introducidos por el usuario

XML

Kotlin

Java

3. Personalización de datos de entrada

XML

4. Agregar sugerencias para el marcador de posición

XML

5. Cambia el color del trazo

XML

6. Cambia el color resaltado dentro del EditText

XML

7. Oyente de eventos para EditText

8. Mensaje de error para el EditText archivado

9. Implementación de la alternancia de visibilidad de la contraseña

10. Conteo de caracteres usando Material Design EditText

XML

Deja una respuesta Cancelar la respuesta