Tematización de Material Design EditText en Android con ejemplo

Requisito previo : Material Design EditText en Android con ejemplos

En el artículo anterior Material Design EditText en Android con ejemplos Material design Text Fields ofrece más personalización y hace que la experiencia del usuario sea mejor que los campos de texto normales. Por ejemplo, Icono para borrar todo el campo EditText, texto de ayuda, etc. En este artículo, se ha discutido cómo podemos personalizar los campos de texto de edición de Material design. Eche un vistazo a la siguiente imagen para tener una idea de cómo los EditTexts de diseño de materiales pueden ser tematizados.

Nota: Ahora, en este artículo, solo personalizaremos el EditText de diseño de materiales y, sobre la implementación, consulte el artículo de requisitos previos anterior. El EditText de diseño de materiales se incluye en los componentes pequeños.

Pasos para Tematizar el Material Design EditText

Trabajar con 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-->
    <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: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: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

Ahora personalizando los campos EditText anulando el diseño de material predeterminado

• Como hemos visto hay tres tipos que dan forma a los componentes de Material design en el artículo Introducción a Material Design en Android . Esos son borde triangular, esquina cortada ,y esquina redondeada.
• Trabajando con estilos.xml. Invoque el siguiente código para personalizar MDC EditText. Los comentarios se agregan dentro del código para una mejor comprensión.

<resources>
  
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
  
        <!--this changes the filled colour of the MDC Filled EditText-->
        <!--this also changes the color of the hint font and helper text too-->
        <item name="colorOnSurface">@color/colorPrimaryDark</item>
  
        <!--this customizes the hint font of the EditText-->
        <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
  
        <!--this changes the helper text font-->
        <item name="textAppearanceCaption">@style/TextAppearance.App.Caption</item>
  
        <!--this is to change the shape of the MDC EditText-->
        <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
  
    </style>
  
    <style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
        <!--this changes the font face of the hint text-->
        <item name="fontFamily">sans-serif-condensed</item>
        <item name="android:fontFamily">sans-serif-condensed</item>
    </style>
  
    <style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
        <!--this changes the font face of the helper text-->
        <item name="fontFamily">sans-serif-black</item>
        <item name="android:fontFamily">sans-serif-black</item>
    </style>
  
    <style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <!--this makes the 10 dp of cut corners of the MDC EditText-->
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">10dp</item>
    </style>
  
</resources>

Interfaz de usuario de salida: Ejecutar en el emulador

• Hay más atributos para establecer el radio de esquinas particulares.

cuadroEsquinaRadioSuperiorInicio
cuadroEsquinaRadioSuperiorFin

cuadroEsquinaRadioInferiorInicio
cuadroEsquinaRadioInferiorFin

• El siguiente código y salida es un ejemplo de lo mismo. El código debe invocarse dentro de styles.xml .

<resources>
  
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
  
        <!--this changes the filled colour of the MDC Filled EditText-->
        <!--this also changes the color of the hint font and helper text too-->
        <item name="colorOnSurface">@color/colorPrimaryDark</item>
  
        <!--this customizes the hint font of the EditText-->
        <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
  
        <!--this changes the helper text font-->
        <item name="textAppearanceCaption">@style/TextAppearance.App.Caption</item>
  
        <!--this is to change the shape of the MDC EditText-->
        <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
  
    </style>
  
    <style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
        <!--this changes the font face of the hint text-->
        <item name="fontFamily">sans-serif-condensed</item>
        <item name="android:fontFamily">sans-serif-condensed</item>
    </style>
  
    <style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
        <!--this changes the font face of the helper text-->
        <item name="fontFamily">sans-serif-black</item>
        <item name="android:fontFamily">sans-serif-black</item>
    </style>
  
    <style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <!--this makes the 10 dp of cut corners of the MDC EditText-->
        <item name="cornerFamily">rounded</item>
  
        <!--this attribute makes changes to the Bottom Right corner of the EditText according to the value-->
        <item name="cornerSizeBottomRight">24dp</item>
  
        <!--this attribute makes changes to the Top Left corner of the EditText according to the value-->
        <item name="cornerSizeTopLeft">24dp</item>
    </style>
  
</resources>

Interfaz de usuario de salida: Ejecutar en el emulador