MDC-101 Android: Conceptos básicos sobre componentes de Material (MDC) (Kotlin)

Los componentes de Material (MDC) ayudan a los desarrolladores a implementar Material Design. MDC, creado por un equipo de ingenieros y diseñadores de UX en Google, cuenta con decenas de componentes de IU atractivos y funcionales, y está disponible para Android, iOS, la Web y Flutter. material.io/develop

¿Qué son Material Design y los componentes de Material para Android?

Material Design es un sistema para crear productos digitales atractivos y llamativos. Mediante la unión de estilo, desarrollo de la marca, interacción y movimiento en un conjunto coherente de principios y componentes, los equipos de productos pueden alcanzar su máximo potencial de diseño.

En el caso de las aplicaciones para Android, los componentes de Material para Android (MDC de Android) combinan el diseño y la ingeniería con una biblioteca de componentes para crear coherencia en tu app. A medida que evoluciona el sistema de Material Design, se actualizan estos componentes para garantizar la implementación coherente y perfecta del cumplimiento de los estándares de desarrollo del frontend de Google. MDC también está disponible para la Web, iOS y Flutter.

En este codelab, crearás una página de acceso con varios de los componentes de MDC de Android.

Qué compilarás

Este codelab es el primero de 4 que te guiarán para que compiles una app llamada Shrine, una app de comercio electrónico para Android que vende ropa y artículos para el hogar. Demostrará cómo puedes personalizar los componentes para que reflejen cualquier marca o estilo con Android MDC.

En este codelab, crearás una página de acceso para Shrine que contiene lo siguiente:

• Dos campos de texto: uno para ingresar un nombre de usuario y el otro para la contraseña
• Dos botones, uno para “Cancelar” y otro para “Siguiente”
• El nombre de la app (Shine)
• Una imagen del logotipo de Shrine

Estos son los codelabs relacionados:

• MDC 102: Estructura y diseño de Material Design
• MDC 103: Temas de Material Design con color, forma, elevación y tipo
• MDC 104: Componentes avanzados de Material Design

Al final de MDC-104, compilarás una app para Android que se verá de la siguiente manera:

Componentes de MDC de Android en este codelab

• Campo de texto
• Botón

En este codelab, usarás los componentes predeterminados que proporciona MDC de Android. Aprenderás a personalizarlos en el MDC 103: Temas de Material Design con color, forma, elevación y tipo.

Requisitos

• Conocimientos básicos sobre el desarrollo para Android
• Android Studio (descárgala aquí si aún no lo tienes).
• Un emulador o dispositivo Android (disponible a través de Android Studio)
• El código de muestra (consulta el siguiente paso)

¿Cómo calificarías tu nivel de experiencia con la compilación de apps para Android?

Principiante Intermedio Avanzado

Inicia Android Studio

Cuando abras Android Studio, debería aparecer una ventana con el título "Welcome to Android Studio". Sin embargo, si es la primera vez que inicias Android Studio, sigue los pasos del asistente de configuración de Android Studio con los valores predeterminados. En este paso, descargar e instalar los archivos necesarios puede tardar varios minutos. Puedes permitir que se ejecute en segundo plano mientras realizas los pasos de la siguiente sección.

Descarga la app de inicio del codelab

Descargar app de inicio

La app de inicio se encuentra en el directorio material-components-android-codelabs-101-starter/kotlin.

… o clónalo desde GitHub

Para clonar este codelab desde GitHub, ejecuta los siguientes comandos:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 101-starter

Obtén más ayuda: Cómo clonar un repositorio desde GitHub.

Cómo cargar el código de inicio en Android Studio

1. Una vez que finalice el asistente de configuración y aparezca la ventana Welcome to Android Studio, haz clic en Open an existing Android Studio project. Navegue al directorio en el que instaló el código de muestra y seleccione kotlin -> santuario(o busque shrine en su computadora) para abrir el proyecto de envío.
2. Espera un momento para que Android Studio compile y sincronice el proyecto, como se muestra en los indicadores de actividad de la parte inferior de la ventana de Android Studio.
3. En este punto, es posible que Android Studio genere algunos errores de compilación, ya que te faltan el SDK de Android o las herramientas de compilación, como se muestra más abajo. Sigue las instrucciones de Android Studio para instalar o actualizar estos elementos y sincronizar tu proyecto.

Cómo agregar dependencias de proyectos

El proyecto necesita una dependencia en la biblioteca de compatibilidad de MDC de Android. El código de muestra que descargaste ya debería tener esta dependencia, pero se recomienda realizar los siguientes pasos para asegurarte de que suceda.

1. Navega hasta el archivo build.gradle del módulo app y asegúrate de que el bloque dependencies incluya una dependencia en MDC para Android:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (Opcional) Si es necesario, edita el archivo build.gradle para agregar las siguientes dependencias y sincronizar el proyecto.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Cómo ejecutar la app de inicio

Asegúrate de que la configuración de compilación ubicada a la izquierda del botón Run/Play sea app. Presiona el botón verde Run/Play para compilar y ejecutar la app. En la ventana Select Deployment Target, si ya tienes un dispositivo Android en la lista de dispositivos disponibles, ve al Paso 8. De lo contrario, haz clic en Create New Virtual Device. En la pantalla Select Hardware, selecciona un teléfono, por ejemplo, Pixel 2, y haz clic en Next. En la pantalla System Image, selecciona una versión reciente de Android, preferentemente, el nivel de API más alto. Si no está instalada, haz clic en el vínculo Download que aparece y completa la descarga. Haga clic en Siguiente. En la pantalla Dispositivo virtual de Android (AVD), deja la configuración como está y haz clic en Finalizar. Selecciona un dispositivo Android en el cuadro de diálogo de destino de la implementación. Haga clic en OK. Android Studio compila la app, la implementa y la abre automáticamente en el dispositivo de destino.

Si no pudiste agregar la dependencia o ejecutar la app correctamente, detente y soluciona los problemas en tu entorno de desarrollador.

Si recibes un error INSTALL_fail_INVALID_APK en el momento de la compilación, prueba "Build" -> "Clean Project" en Android Studio.

¡Listo! El código de inicio para la página de acceso de Shrine debe ejecutarse en tu emulador. Deberías ver el nombre "Shrine" y el logotipo de Shrine justo debajo.

Echemos un vistazo al código. Proporcionamos un framework de navegación Fragment simple en nuestro código de muestra para mostrar fragmentos y navegar entre fragmentos.

Abre MainActivity.kt en el directorio shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine. Debe contener lo siguiente:

Nota: Para obtener más información sobre Navigation, cómo crear y mantener rutas de navegación con Android Studio, consulta el ejercicio Aspectos básicos de Android sobre Kotlin 03.2: Cómo definir rutas de navegación

MainActivity.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment

class MainActivity : AppCompatActivity(), NavigationHost {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.shr_main_activity)

       if (savedInstanceState == null) {
           supportFragmentManager
                   .beginTransaction()
                   .add(R.id.container, LoginFragment())
                   .commit()
       }
   }

   override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
       val transaction = supportFragmentManager
               .beginTransaction()
               .replace(R.id.container, fragment)

       if (addToBackstack) {
           transaction.addToBackStack(null)
       }

       transaction.commit()
   }
}

Esta actividad muestra el archivo de diseño R.layout.shr_main_activity, definido en shr_main_activity.xml.

Puedes ver que, en onCreate(),, MainActivity.kt inicia una transacción Fragment para mostrar la LoginFragment. En este codelab, modificaremos LoginFragment. La actividad también implementa un método navigateTo(Fragment), definido en NavigationHost, que permite que cualquier fragmento navegue a un fragmento diferente.

Comando + clic (o Control + clic) shr_main_activity en el archivo de actividad para abrir el archivo de diseño o navega al archivo de diseño en app -> res -> layout -> shr_main_activity.xml.

Nota: Si ves una vista previa de la aplicación en lugar de un archivo XML cuando abres shr_main_activity.xml, cambia de la pestaña Design a la pestaña Text en la parte inferior izquierda del panel. Trabajaremos en la pestaña Text durante este codelab.

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"/>

Aquí, vemos un <FrameLayout> simple que actúa como contenedor de cualquier fragmento que muestra la actividad.

A continuación, abramos LoginFragment.kt.

LoginFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class LoginFragment : Fragment() {

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       return view
   }
}

LoginFragment aumenta el archivo de diseño shr_login_fragment y lo muestra en onCreateView().

Ahora, veamos el archivo de diseño shr_login_fragment.xml para ver cómo se ve la página de acceso.

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

       <ImageView
           android:layout_width="64dp"
           android:layout_height="64dp"
           android:layout_gravity="center_horizontal"
           android:layout_marginTop="48dp"
           android:layout_marginBottom="16dp"
           app:srcCompat="@drawable/shr_logo" />

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_horizontal"
           android:layout_marginBottom="132dp"
           android:text="@string/shr_app_name"
           android:textAllCaps="true"
           android:textSize="16sp" />
   </LinearLayout>
</ScrollView>

Aquí, podemos ver un objeto <LinearLayout> con un elemento <ImageView> en la parte superior, que representa el logotipo de Shrine.

Luego, hay una etiqueta <TextView> que representa la etiqueta de Shrine debajo del logotipo. El texto de esta etiqueta es un recurso de strings llamado @string/shr_app_name. Si Comando + clic (o Control + clic) en el nombre del recurso de strings o abres app -> res -> values -> strings.xml, puedes ver el archivo strings.xml en el que se definen los recursos de strings. Aquí se definirán cuando se agreguen más recursos de strings. Todos los recursos de este archivo deben tener un prefijo shr_ para indicar que forman parte de la app de Shrine.

Ahora que conoces el código de inicio, implementemos el primer componente.

Para comenzar, agregaremos dos campos de texto a nuestra página de acceso para que las personas ingresen su nombre de usuario y contraseña. Utilizaremos el componente MDC Text Field, que incluye una funcionalidad integrada que muestra una etiqueta flotante y mensajes de error.

Los campos de texto de Material Design se mejoraron mucho con el fin de proporcionar más opciones de personalización para respaldar la marca, con mejoras respaldadas por una investigación exhaustiva sobre la experiencia del usuario (UX) para lograr una usabilidad y un diseño visual mejores.

Obtén más información sobre los nuevos campos de texto en su artículo de los lineamientos de Material.

Agrega el XML

En shr_login_fragment.xml, agrega dos elementos TextInputLayout con un elemento secundario TextInputEditText dentro de la etiqueta <LinearLayout>, debajo de la etiqueta <TextView>:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <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
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

Sugerencia: Si quieres abrir rápidamente un archivo en Android Studio, presiona dos veces la tecla Mayúsculas para que aparezca una barra de búsqueda flotante y escribe el nombre del archivo que quieres abrir.

El fragmento anterior representa dos campos de texto, cada uno de los cuales consiste en un elemento <TextInputLayout> y un elemento secundario <TextInputEditText>. El texto de sugerencia para cada campo de texto se especifica en el atributo android:hint.

Incluimos dos recursos de strings nuevos para el campo de texto: @string/shr_hint_username y @string/shr_hint_password. Abre strings.xml para ver estos recursos de string.

strings.xml

<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>

Cómo agregar una validación de entrada

Los componentes de TextInputLayout proporcionan una función de comentarios de errores integrada.

Para mostrar comentarios sobre los errores, realiza los siguientes cambios en shr_login_fragment.xml:

• Establece el atributo app:errorEnabled en true en el elemento ContraseñaTextInputLayout. De esta manera, se agregará padding adicional para el mensaje de error debajo del campo de texto.
• Establece el atributo android:inputType en textPassword en el elemento ContraseñaTextInputEditText. Esta acción ocultará el texto de entrada en el campo de la contraseña.

Con estos cambios, los campos de texto en shr_login_fragment.xml deberían verse así:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <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
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Ahora, prueba ejecutar la app. Deberías ver una página con dos campos de texto para "Username" y "Password".

Observa la animación de etiquetas flotantes:

Las funciones de Campo de texto de MDC incluyen lo siguiente:

• Visualización de comentarios de error integrados
• Cómo admitir un botón de activación de visibilidad de contraseña con app:passwordToggleEnabled
• Ofrece una funcionalidad de texto auxiliar integrada mediante app:helperText
• Se muestra el recuento total y de caracteres máximo con app:counterEnabled y app:counterMaxLength

A continuación, agregaremos dos botones a nuestra página de acceso: "Cancel" y "Next". Utilizaremos el componente MDC Button, que viene con el emblemático efecto de ondas de la tinta de Material Design integrado.

Agrega el XML

En shr_login_fragment.xml, agrega un <RelativeLayout> al <LinearLayout>, debajo de los elementos TextInputLayout. Luego, agrega dos elementos <MaterialButton> a <RelativeLayout>.

El archivo XML resultante debería verse de la siguiente manera:

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.MaterialComponents.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

Nota: El componente MaterialButton tiene un estilo predeterminado de un botón elevado de color. Sin embargo, para este botón Cancelar, queremos un botón sin completar. Para lograrlo, aplicamos un atributo style: @style/Widget.MaterialComponents.Button.TextButton.

Listo. Cuando ejecutes la app, se mostrará una onda de tinta cuando presiones cada botón.

Las funciones del botón MDC incluyen:

• Comentarios táctiles integrados (denominado Ripple de MDC) de forma predeterminada
• Elevación predeterminada
• Radio y trazo de la esquina personalizables

Por último, agregaremos un código de Kotlin a LoginFragment.kt para conectar nuestro botón"NEXT"para realizar la transición a otro fragmento.

Agreguemos un método booleano privado isPasswordValid en LoginFragment.kt debajo de onCreateView(), con lógica para determinar si la contraseña es válida o no. Para los fines de esta demostración, solo nos aseguraremos de que la contraseña tenga al menos 8 caracteres:

LoginFragment.kt

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

A continuación, agrega un objeto de escucha de clics al botón "Next" que establece y borra el error en función del método isPasswordValid() que acabamos de crear. En onCreateView(), este objeto de escucha de clics se debe colocar entre la línea del amplificador y la línea del return view.

Ahora, agreguemos un objeto de escucha de claves a la contraseña TextInputEditText para escuchar los eventos clave que borrarían el error. Este objeto de escucha también debe usar isPasswordValid() para verificar si la contraseña es válida. Puedes agregar esta opción directamente debajo del objeto de escucha de clics en onCreateView().

Tu método onCreateView() ahora debería ser similar al siguiente:

LoginFragment.kt

override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment.
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       // Set an error if the password is less than 8 characters.
       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

       // Clear the error once more than 8 characters are typed.
       view.password_edit_text.setOnKeyListener({ _, _, _ ->
           if (isPasswordValid(password_edit_text.text!!)) {
               // Clear the error.
               password_text_input.error = null
           }
           false
       })

       return view
   }
}

Nota: Si Android Studio encuentra errores Cannot resolveAumenta cuando escribes este código, presiona Alt + Intro o, en Mac, Opción + Regresar para importar los símbolos faltantes.

Ahora podemos navegar a otro fragmento. En onCreateView(), actualiza el elemento OnClickListener para navegar a otro fragmento cuando la validación de errores se realice correctamente. Tu código clickListener debería verse de la siguiente manera:

LoginFragment.kt

// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
   if (!isPasswordValid(password_edit_text.text!!)) {
       password_text_input.error = getString(R.string.shr_error_password)
   } else {
       // Clear the error.
       password_text_input.error = null
       // Navigate to the next Fragment.
       (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
   }
})

Agregamos la línea (activity as NavigationHost).navigateTo(ProductGridFragment(), false) al caso else del objeto de escucha de clics. Esta línea llama al método navigateTo() de MainActivity para navegar a un fragmento nuevo: ProductGridFragment. Actualmente, esta es una página vacía en la que trabajarás en MDC-102.

El parámetro false de navigateTo() le indica a la actividad que no agregue el fragmento actual a la pila de actividades, por lo que el usuario no podrá regresar a la pantalla de acceso con su tecla de retroceso.

Ahora, compila la app. Presiona el botón Siguiente.

¡Lo logró! Esta pantalla será el punto de partida de nuestro próximo codelab en el que trabajarás en MDC-102.

Con el lenguaje de marcado XML básico y aproximadamente 30 líneas de Kotlin, la biblioteca de componentes de Material para Android te ayudó a crear una hermosa página de acceso que cumple con los lineamientos de Material Design, y también tiene un aspecto y comportamiento coherentes en todos los dispositivos.

Si deseas descargar la app completa de MDC 101, descarga el codelab terminado o consulta 101-complete con git: git checkout 101-complete.

Para probar tu versión de la página con la versión completa, abre el proyecto shrine en ese directorio con Android Studio y ejecuta la app.

Próximos pasos

El campo de texto y el botón son dos componentes principales de la biblioteca MDC de Android, pero hay muchos más. Puedes explorar el resto de los componentes de MDC en Android. Como alternativa, consulta MDC 102: Estructura y diseño de Material Design para obtener información sobre la barra superior de la app, la vista de tarjetas y el diseño de la cuadrícula. Gracias por probar los componentes de Material. Esperamos que hayas disfrutado de este codelab.

Pude completar este codelab en una cantidad de tiempo y con un nivel de esfuerzo razonables

Totalmente de acuerdo De acuerdo Neutral En desacuerdo Totalmente en desacuerdo

Me gustaría seguir usando los componentes de Material en el futuro.

Muy de acuerdo Aceptar Neutral En desacuerdo Muy en desacuerdo