Propiedades clave de Material Design EditText en Android

En el artículo anterior Material Design EditText en Android con ejemplos , se discutió cómo implementar el diseño de materiales EditText y cómo se diferencian del EditText normal. En este artículo se ha discutido sobre cómo personalizar los campos de texto de edición de MDC con sus propiedades clave. Eche un vistazo a la siguiente imagen para hacerse una idea de las propiedades clave de los campos de texto de edición de MDC.

Personalización de MDC EditText mediante el uso de propiedades clave

Propiedad clave 1: color y ancho del trazo del cuadro

• Invoque el siguiente código dentro del archivo activity_main.xml.
• Los atributos que deben concentrarse son boxStrokeColor, boxStrokeWidth, boxStrokeWidthFocused . Dentro del TextInputLayout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Filled EditText" />
  
    <!--this is the material design filled EditText with helper text-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/filled_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Something"
        app:boxStrokeColor="@android:color/black"
        app:boxStrokeWidth="3dp"
        app:boxStrokeWidthFocused="7dp"
        app:helperText="Enter in text format only">
  
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
  
    </com.google.android.material.textfield.TextInputLayout>
  
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Outlined EditText" />
  
    <!--this is the material design outlined EditText with helper text-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/outline_edit_text"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Something"
        app:boxStrokeColor="@android:color/black"
        app:boxStrokeWidth="3dp"
        app:boxStrokeWidthFocused="7dp"
        app:helperText="Enter in text format only">
  
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
  
    </com.google.android.material.textfield.TextInputLayout>
  
</LinearLayout>

Interfaz de usuario de salida: Ejecutar en el emulador

Propiedad clave 2: agregar el modo de icono final y el modo de icono de inicio

Hay 4 tipos de modos de iconos finales para MDC EditTexts. Esos son:

1. Borrar texto.
2. cambio de contraseña.
3. disfraz.
4. Menú desplegable.

Nota: Para cambiar la contraseña, se requiere el tipo de entrada para MDC EditText.

• Para el icono de inicio, se necesita un icono de vector. Por lo tanto, importe el icono del vector haciendo clic con el botón derecho en el dibujo -> nuevo -> Vector activo. Luego seleccione los iconos vectoriales deseados.
• Consulte la siguiente imagen si no puede ubicar el cuadro de diálogo de activos vectoriales en Android Studio.

• Invoque el siguiente código en el archivo activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Filled EditText" />
  
    <!--this is the material design filled EditText with helper text-->
    <!--the attribute endIconMode will make the end icon mode according 
        to the EditText context-->
    <!--the startIconDrawable attribute sets the icon at 
        the start of the EditText-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/filled_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Something"
        app:endIconMode="clear_text"
        app:helperText="Enter in text format only"
        app:startIconDrawable="@drawable/ic_text_fields_black_24dp">
  
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
  
    </com.google.android.material.textfield.TextInputLayout>
  
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Outlined EditText" />
  
    <!--this is the material design outlined EditText with helper text-->
    <!--the attribute endIconMode will make the end icon mode according 
        to the EditText context-->
    <!--the startIconDrawable attribute sets the icon at 
        the start of the EditText-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/outline_edit_text"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Password"
        app:endIconMode="password_toggle"
        app:helperText="Enter in text format only"
        app:startIconDrawable="@drawable/ic_vpn_key_black_24dp">
  
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword" />
  
    </com.google.android.material.textfield.TextInputLayout>
  
</LinearLayout>

Interfaz de usuario de salida: Ejecutar en el emulador

Propiedad clave 3: texto auxiliar

• Este es el texto pequeño que se puede invocar para informar al usuario qué tipo de datos se deben ingresar en EditText.
• Invoque lo siguiente dentro del archivo activity_main.xml. Los comentarios se agregan dentro del código para una mejor comprensión.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Filled EditText" />
  
    <!--this is the material design filled 
        EditText with helper text-->
    <!--the attribute helperText sets the helper 
        text below the EditText box-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/filled_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Height"
        app:helperText="Height should be in-terms of feet (ft.)">
  
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
  
    </com.google.android.material.textfield.TextInputLayout>
  
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Outlined EditText" />
  
    <!--this is the material design outlined
         EditText with helper text-->
    <!--the attribute helperText sets the helper text
         below the EditText box-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/outline_edit_text"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Password"
        app:helperText="Password must be a number">
  
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="numberPassword" />
  
    </com.google.android.material.textfield.TextInputLayout>
  
</LinearLayout>

Interfaz de usuario de salida: Ejecutar en el emulador