1. Introducción
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. |
Material Components for Android (MDC Android) no es un sistema o framework nuevo que requiera un cambio de paradigma en tu app. MDC Android se basa en las mismas clases y APIs que ya conoces en Android, como los botones y los campos de texto de AppCompat. Los componentes que proporciona MDC Android se pueden usar según sea necesario y mejoran de inmediato el diseño de tu app existente.
Qué compilarás
En este codelab, reemplazarás algunos componentes existentes en un formulario por otros nuevos de MDC.
Componentes de MDC-Android en este codelab
- Campos de texto
- Botones
- Menús
Requisitos
- Conocimientos básicos de desarrollo de Android
- Android Studio (descárgalo aquí si todavía 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?
2. Configura tu entorno de desarrollo
Descarga la app de inicio del codelab
La app de inicio se encuentra en el directorio material-components-android-codelabs-111-starter/kotlin. Asegúrate de usar cd en ese directorio antes de comenzar.
… 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 111-starter
Cómo cargar el código de inicio en Android Studio
- 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. Navega al directorio en el que instalaste el código de muestra y selecciona kotlin -> shipping (o busca shipping en tu computadora) para abrir el proyecto de envío.
- 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.
- 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 ejecutar la app de inicio
|
|
¡Listo! Deberías ver la app y su formulario.
3. Actualiza los campos de texto
Los campos de texto de Material Design tienen una gran ventaja de usabilidad sobre los campos de texto sin formato. Si defines la zona de impacto con un contorno o un relleno de fondo, es más probable que los usuarios interactúen con tu formulario o identifiquen los campos de texto dentro de contenido más complicado.
Importa MDC-Android
Navega hasta el archivo build.gradle del módulo app y asegúrate de que el bloque dependencies incluya una dependencia en MDC Android:
api 'com.google.android.material:material:1.1.0-alpha05'
Reemplaza los estilos de los campos de texto
En shipping_info_activity.xml, agrega el siguiente estilo a todos los componentes XML de TextInputLayout:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Cada TextInputLayout debería verse de la siguiente manera:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
Compila y ejecuta:
Todos los campos de texto se actualizaron para usar los diseños más recientes en MDC.
Cómo agregar un error
Los campos de texto de MDC tienen una presentación de errores integrada. El MDC agrega texto rojo debajo del campo de texto y actualiza las decoraciones para que también sean rojas.
En ShippingInfoActivity.kt, actualiza onCreate() para verificar la entrada de texto y establecer errores según corresponda. Debería verse algo similar a lo siguiente:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
Realiza la compilación y ejecuta la aplicación. Presiona GUARDAR, pero deja al menos un campo de texto vacío:
Los campos de texto que están vacíos son rojos y tienen texto de error debajo de ellos.
4. Actualiza el botón
El MDC tiene botones con las siguientes características:
- Ondas de tinta
- Esquinas redondeadas
- Compatibilidad con temas
- Diseño y tipografía perfectos
- Se basa en AppCompatButton (la clase de botón estándar de Android), por lo que sabes cómo usarlos en tu código.
Clase de botón de reemplazo opcional
De forma predeterminada, la biblioteca de Material infla automáticamente los botones normales en botones de MDC. Sin embargo, puedes reemplazar de forma opcional todas las referencias a Button por MaterialButton para que puedas acceder a métodos adicionales que solo están disponibles en un MaterialButton, como cambiar el radio de la esquina. Los botones de MDC son un componente simple listo para usar. Solo tienes que reemplazar el nombre del componente XML Button por MaterialButton y aplicar el estilo MaterialButton predeterminado al MaterialButton.
En shipping_info_activity.xml, cambia el botón de la siguiente manera:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Para:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Compila y ejecuta:
5. Agregar tarjeta
MaterialCardView es un componente creado en CardView con lo siguiente:
- Elevación y diseño correctos
- Atributos de color y ancho del trazo
Cómo incluir contenido en una tarjeta
Encapsula tu LinearLayout que contiene tu contenido en shipping_info_activity.xml con un componente MaterialCardView, de la siguiente manera:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
Realiza la compilación y ejecuta la aplicación. Todo el formulario debe estar dentro de una tarjeta:
El componente Material Card View es una forma familiar, pero novedosa, de incluir tu contenido en una tarjeta con facilidad.
6. Resumen
Reemplazaste algunos componentes comunes para mostrar valor inmediato: campos de texto, botones, tarjetas, y no tuviste que rediseñar toda la app. Otros componentes también pueden marcar una gran diferencia, como la barra superior de la app y TabLayout.
Próximos pasos
Si visitas el catálogo de widgets de Android, podrás explorar aún más componentes de MDC-Android.