¿Cómo usar el diseño de entrada de texto material en Android?

Material Design Components (MDC Android) ofrece a los diseñadores y desarrolladores una forma de implementar Material Design en su aplicación de Android. Desarrollados por un equipo central de ingenieros y diseñadores de UX en Google, estos componentes permiten un flujo de trabajo de desarrollo confiable para crear aplicaciones de Android atractivas y funcionales. Si le gusta la forma en que los elementos de la interfaz de usuario de los componentes de diseño de material de Google para Android que están diseñados por Google son bastante impresionantes, aquí hay algunos pasos que deben seguirse para obtenerlos, y uno de ellos es el diseño de entrada de texto de material de Google . Entonces, en este artículo, implementaremos el diseño de entrada de texto en Android usando la biblioteca de diseño de materiales. 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .

Paso 2: agregar la dependencia requerida

Incluya la dependencia de componentes de diseño de materiales de Google en el archivo build.gradle . Después de agregar las dependencias, no olvide hacer clic en el botón » Sincronizar ahora» presente en la esquina superior derecha.  

implementación ‘com.google.android.material:material:1.3.0-alpha02’

Tenga en cuenta que mientras sincroniza su proyecto, debe estar conectado a la red y asegurarse de agregar la dependencia al archivo Gradle de nivel de aplicación como se muestra a continuación.

Paso 3: Cambia el tema de la aplicación Base

Vaya a aplicación -> src -> principal -> res -> valores -> estilos.xml y cambie el tema base de la aplicación. estilos.xml

<resources>
    
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    
</resources>

Paso 4: trabajar con el archivo activity_main.xml

Dentro del  archivo activity_main.xml use el siguiente código. Dará como resultado el siguiente diseño.

actividad_principal.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="horizontal"
    tools:context=".MainActivity">
  
    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter password"
        app:endIconMode="password_toggle">
  
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
  
    </com.google.android.material.textfield.TextInputLayout>
  
</LinearLayout>

Más optimización

Paso 5: Dentro del archivo “ styles.xml ” escribe lo siguiente para hacer el esquema de la elección deseada. 

<style name="Cut" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">12dp</item>
</style>
  
<style name="Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">16dp</item>
</style>

Paso 6: ahora úsalos dentro de la propiedad shapeAppearance de TextInputLayout . Dará como resultado el siguiente diseño.

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter password"
        app:endIconMode="password_toggle">
  
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
  
</com.google.android.material.textfield.TextInputLayout>
  
<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter password"
        app:endIconMode="password_toggle"
        app:endIconTint="@color/colorAccent"
        app:shapeAppearance="@style/Cut">
  
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
  
</com.google.android.material.textfield.TextInputLayout>
  
<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter text"
        app:endIconMode="clear_text"
        app:endIconTint="@color/colorPrimaryDark"
        app:shapeAppearance="@style/Rounded">
  
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
  
</com.google.android.material.textfield.TextInputLayout>

Interfaz de usuario de salida: