¿Cómo personalizar AppCompat EditText en Android?

EditText es uno de los elementos importantes de la interfaz de usuario que toma los datos como entrada del usuario. El EditText habitual en Android que se ve lo suficientemente decente tiene solo el texto de sugerencia y la línea que hace que el usuario haga clic en esa línea e inserte los datos. Consulte el artículo Widget de EditText en Android usando Java con ejemplos , que explica los conceptos básicos sobre el EditText normal de AppCompat. En este artículo, se ha discutido cómo personalizar AppCompat EditText. Eche un vistazo a la siguiente imagen para diferenciar entre el EditText de AppCompat no personalizado habitual y el EditText de AppCompat personalizado.

Pasos para personalizar AppCompat EditText en Android

Paso 1: crear un proyecto de actividad vacío

• Cree una actividad vacía Proyecto de Android Studio.
• Consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio?

Paso 2: trabajar con el archivo activity_main.xml

• Solo se implementan dos widgets EditText en el archivo de diseño principal. Uno es el nombre de usuario y otro es el campo de contraseña.
• Invoque el siguiente código para implementar la misma interfaz de usuario.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
    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">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
  
        <!--E-mail field-->
        <EditText
            android:id="@+id/emailField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="16dp"
            android:hint="Email" />
  
        <!--Password field-->
        <EditText
            android:id="@+id/passwordField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            android:hint="Password" />
  
    </LinearLayout>
  
</ScrollView>

Interfaz de usuario de salida:

Paso 3: Importar iconos vectoriales

• Importe iconos vectoriales a la carpeta dibujable.
• Para importar los iconos vectoriales, haga clic con el botón derecho en la carpeta dibujable > Nuevo > Activo vectorial.
• Asegúrese de hacer copias del icono único en la carpeta dibujable. Un icono cuando el texto de edición está desenfocado y cuando el texto de edición está enfocado.
• Establezca el color del icono en gris cuando el texto de edición esté desenfocado y establezca el color del icono en colorPrimary cuando EditText esté en foco.
• Consulte la siguiente imagen para obtener los pasos discutidos anteriormente.

• Y la combinación de ambos íconos crea un selector de diseño XML custom_mail_icon de la siguiente manera.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the icon turns to green when the edit text is in focus-->
    <item android:drawable="@drawable/ic_mail_focused" android:state_focused="true" />
  
    <!--the icon turns to grey when the edit text is out of focus-->
    <item android:drawable="@drawable/ic_mail" android:state_focused="false" />
</selector>

• Lo mismo ocurre con el icono del campo de contraseña.

Primero, se discute el EditText con el diseño de esquinas cortadas

Paso 1: cree un fondo de diseño de Selector para EditText

• Este es el diseño que proporciona el cuadro de esquinas cortadas para el campo EditText.
• Para implementar lo mismo, cree un archivo custom_edit_text_cut.xml en la carpeta dibujable e invoque el siguiente código.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  
    <!--the outline box turns to green when the edit text is in focus-->
    <item android:state_enabled="true" android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <stroke android:width="2dp" android:color="@color/colorPrimary" />
        </shape>
    </item>
  
    <!--the outline box turns to grey when the edit text is out of focus-->
    <item android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <stroke android:width="2dp" android:color="@android:color/darker_gray" />
        </shape>
    </item>
  
</selector>

Paso 2: trabajar con el archivo activity_main.xml

• En el archivo activity_main.xml, invoque el fondo para EditText como custom_edit_text_cut.xml.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
    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">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
  
        <!--invoke the background as the 
            custom_edit_text_cut-->
        <EditText
            android:id="@+id/emailField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/custom_edit_text_cut"
            android:drawableStart="@drawable/custom_mail_icon"
            android:drawablePadding="12dp"
            android:hint="Email"
            android:paddingStart="12dp"
            android:paddingEnd="12dp" />
  
        <!--same background for the password field 
            as the custom_edit_text_cut-->
        <EditText
            android:id="@+id/passwordField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/custom_edit_text_cut"
            android:drawableStart="@drawable/custom_vpn_icon"
            android:drawablePadding="12dp"
            android:hint="Password"
            android:paddingStart="12dp"
            android:paddingEnd="12dp" />
  
    </LinearLayout>
  
</ScrollView>

Salida: ejecutar en el emulador

En segundo lugar, se analiza el EditText con el diseño de esquinas redondeadas.

Paso 1: cree un fondo de diseño de Selector para EditText

• Este es el diseño que proporciona el cuadro de esquinas cortadas para el campo EditText.
• Para implementar lo mismo, cree un archivo custom_edit_text_rounded.xml en la carpeta dibujable e invoque el siguiente código.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  
    <!--The outline turns to colorPrimary when the EditText is in focus-->
    <item android:state_enabled="true" android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="12dp" />
            <stroke android:width="2dp" android:color="@color/colorPrimary" />
        </shape>
    </item>
  
    <!--The outline turns to grey when the EditText is out of focus-->
    <item android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="12dp" />
            <stroke android:width="2dp" android:color="@android:color/darker_gray" />
        </shape>
    </item>
  
</selector>

Paso 2: trabajar con el archivo activity_main.xml

• En el archivo activity_main.xml, invoque el fondo para EditText como custom_edit_text_rounded.xml.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
    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">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
  
        <!--invoke the background as the 
            custom_edit_text_rounded-->
        <EditText
            android:id="@+id/emailField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/custom_edit_text_rounded"
            android:drawableStart="@drawable/custom_mail_icon"
            android:drawablePadding="12dp"
            android:hint="Email"
            android:paddingStart="12dp"
            android:paddingEnd="12dp" />
  
        <!--same background for the password field 
            as the custom_edit_text_rounded-->
        <EditText
            android:id="@+id/passwordField1"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/custom_edit_text_rounded"
            android:drawableStart="@drawable/custom_vpn_icon"
            android:drawablePadding="12dp"
            android:hint="Password"
            android:paddingStart="12dp"
            android:paddingEnd="12dp" />
  
    </LinearLayout>
  
</ScrollView>

Salida: ejecutar en el emulador