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. |
Los componentes de Material para Android (MDC para Android) no son un sistema o framework nuevo que requiera un cambio de paradigma en tu app. MDC para Android se basa en las mismas clases y APIs que ya conoces en Android, como los botones de AppCompat y los campos de texto. Los componentes que proporciona MDC Android pueden usarse según sea necesario y mejorar de inmediato el diseño de tu app existente.
Qué compilarás
En este codelab, reemplazarás algunos componentes existentes de un formulario por otros nuevos mediante 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 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 -> 'envío' [shipping] (o busca envío en tu computadora) para abrir el proyecto 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 en comparación con los campos de texto sin formato. Cuando se define 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 campos de texto dentro de contenido más complicado.
Importa MDC-Android
Navega al 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-alpha05'
Cómo reemplazar estilos de 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 actualizan para usar los diseños más nuevos en MDC.
Agrega un error
Los campos de texto de MDC tienen presentación de errores integrada. 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. Se verá de la siguiente manera:
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 se muestran en rojo y tienen texto de error debajo.
4. Actualiza el botón
MDC tiene botones con lo siguiente:
- 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) para que sepas cómo usarlos en tu código.
Opcionalmente, reemplaza la clase de botón
De forma predeterminada, la biblioteca de Material aumenta automáticamente los botones regulares a botones de MDC. Sin embargo, de manera opcional, puedes reemplazar todas las referencias a Button con MaterialButton para acceder a métodos adicionales que estén disponibles solo en un MaterialButton, como cambiar el radio de la esquina. Los botones de MDC son un componente sencillo listo para usar. Solo debes reemplazar el nombre del componente XML Button por MaterialButton y aplicar el estilo MaterialButton predeterminado a 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" />
A:
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 compilado en CardView con lo siguiente:
- Elevación y estilo correctos
- Atributos de color y ancho del trazo
Cómo unir el contenido en una tarjeta
Une tu LinearLayout que incluye 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 encerrarse en una tarjeta:
El componente de Material Card View es una forma conocida pero novedosa de incluir fácilmente tu contenido en una tarjeta.
6. Resumen
Reemplazaste algunos componentes comunes para mostrar un valor inmediato: campos de texto, botones y tarjetas, y no tuviste que rediseñar por completo tu app. Otros componentes también pueden marcar una gran diferencia, como la Barra superior de la app y TabLayout.
Próximos pasos
Puedes visitar el Catálogo de widgets de Android para explorar aún más componentes de MDC-Android.