Profesional en Material Design/Theming para Android. UX y UI

¿En que consiste Material Design? Veamos de que va en esta clase.

¿Cual es la diferencia entre Material Design y Material Theming? ¿Que problemas resuelve la creación de Material Theming? Estas y otras preguntas importantes serán tratadas en esta clase.

En esta clase vamos a crear nuestro primer proyecto y a configurarlo para inhabilitar Material Design, esto con fines de apreciar la gran diferencia que teníamos antes y finalmente también vamos a desarrollar la estructura base,

En esta ocasión, aplicaremos los estilos disponibles anteriormente para dispositivos que utilizaban Holo, y a su vez trataremos de personalizarlo para mejorar su apariencia, sin ocupar Material Design, esto para ver con claridad las diferencias tanto en la implementación, como en el resultado.

Es turno de hacer uso de Material Design y probar su función en dispositivos anteriores y posteriores a Android Lollipop, y gracias a las librerías de soporte, tendremos una compatibilidad más amigable.

Actividad Práctica para reforzar el uso de TextInputLayout, un componente introducido con Material Design.

Primeros pasos con Material Design Components y Material Theming.

Breve repaso de los puntos más importantes que vimos a lo largo de esta sección.

¿De qué trata esta sección? Veamos los temas más importantes a considerar, para implementar los Material Desing Components en aplicaciones de android.

En esta clase veremos que es Material Components(MDC), algunos datos importantes a tomar en cuenta antes de continuar implementando Material Design y Theming

Creación de una nueva app, en esta clase adaptaremos el diseño base de la vista principal.

Creación de nuestro objeto POJO y el adaptador para el listado principal.

Preparación de vistas para los detalles de cada componente, tanto para el caso donde se requiera una vista estática, como con un scroll.

Si no tomaste las clases anteriores, debes empezar a partir de aquí, ya que veremos una explicación de nuestra aplicación y como funcionará más adelante cuando implementemos los material design components.

En esta clase veremos como se trabajará con los componentes, desde ver su documentación oficial, hasta su implementación, y para ello tomaremos el Material Button como punto de partida.

Aquí trataremos los primeros diseños del Material Button, ademas de trabajar con componentes como ConstraintLayout y Guideline.

Es momento de personalizar nuestros botones de material design, además de añadir eventos de click.

Exploración y primeros pasos de un componente muy funcional cuando se requiere mantener a la vista, los diferentes módulos principales.

Personalización del Bottom Navigation View y la inserción de un complemento muy útil, el Badge.

Es momento de hacer una pausa y mejorar nuestro listado principal, así aprovecharemos para aprender un poco más sobre el RecyclerView y el MaterialCardView.

Mensajes no invasores diseñados para Material Design.

Primeros diseños de los Text Fields, aquí indagaremos entre los 2 principales diseños y sus 2 principales variantes.

Personalización del diseño en nuestros Texf Fields de acuerdo con las nuevas propiedades de Material Design Components.

Personalización de eventos para los Texf Fields.

Veamos las diferencias entre la primer versión de Material Design y los nuevos estilos enfocados a Material Theming.

Es turno de personalizar el icono, el background, el borde y mucho más! Ademas de añadir eventos de click.

Descubramos este grupo de componentes para la selección de opciones y centrémonos en el Checkbox.

A pesar de no tener una documentación oficial, vamos a ver como implementar el tercer estado de un Checkbox, y nos referimos al Indeterminate.

Conclusiones sobre los Material components vistos en esta sección, y los temas que se verán más adelante con respecto a Material Theming para android.

Introducción a la sección de cómo migrar una app desde Material Desing(AppCompat), a Material Theming(MaterialComponents).

Descarga y explicación de esta app nativa de android llamada: MD Top, la cual es actualizada del curso sobre los fundamentos de android.

Nuevos colores enfocados a Material Theming.

Configuración de los colores dentro de nuestro archivo themes.xml

Cambio general del tema en nuestra app, para que de esta forma Theme, tome el control total del aspecto compatible y no definido.

Modificación de los colores para alterar las superficies en elementos como CardView o menús, así como los fondos y errores.

Cambio de colores para la barra inferior y superior, es decir, NavigationBar y StatusBar respectivamente.

Actualización de un elemento fundamental en los diseños de android, las listas.

Rediseño de la imagen principal y el elemento secundario en una lista, de acuerdo a las últimas recomendaciones de Material Theming.

Rediseño de los textos, ubicación y margenes de acuerdo a las guías oficiales de Material.io para android.

Implementación de un elemento esencial en las últimas tendencias de diseños planos y claros de Material Desing.

Práctica el cambio de los colores entre el background y el surface, toma en cuenta mis comentarios y decide si quieres implementar el cambio y elige la mejor opción a tu gusto. Es opcional debido a la documentación incompleta actualmente para Material Desing en android.

Modificación a la estructura base y frontal superior, de la vista para añadir artistas.

Cambio de aspecto para los Text Fields de la vista AddArtist, con el fin de establecer lo último en diseño de la mano de Material Theming para Android.

Mejoramiento de la experiencia de usuario, para las validaciones.

En esta clase veremos otro de los principios fundamentales para la completa implementación de Material Theming en Android, nos referimos al cambio de formas con Shape.

Aplicación general de Shape en las 3 categorías(small, medium y large).

Haremos los cambios que ya aplicamos en la vista AddArtist, en la del Detalle.

Implementación, principios, consejos y más, sobre el tema oscurso(dark theme), de material design para android.

Configuración de los colores para el modo night en themes.

Más correcciones para el modo oscuro y buenas prácticas en android.

Solución a recursos alternos para el modo noche, en iconos de tipo Drawable.

Conclusiones de la sección.

Introducción a la sección de Material Components, parte 2.

Introducción a el elemento Card, con Material Card View para android.

Diseño básico para una Card.

Principales elementos para una Material Card View con mayor complejidad, ImageView y MaterialButton.

Cómo cargar una imagen directamente de una URL a un ImageView con Glide, y diseño de un RatingBar en modo lectura.

Inserción y buenas prácticas para los textos y divisores.

Diseño base para los chips, distribución y margenes según los lineamientos recomendados en Material io.

Como controlar los diferentes tipos de eventos que nos ofrecen los Chips para android con Java y XML.

Creación del fragment e inicialización correcta del componente.

Aquí veremos cómo obtener el menú tanto en la barra de acciones, como desde cualquier componente que pueda ejecutar un evento de Click. Ampliando así nuestras habilidades para la UI y UX.

Creación de un Autocomplete, el cual trabaja con un tipo de menu que se muestra en las sugerencias.

Introducciòn a los Dialogs de Material Components para android.

Diseño bàsico para la vista general del componente Dialog, y primer muestra de un Dialog con Material Design.

Dialogs para selección múltiple y de confirmación. También veremos como añadir Temas por default, provenientes de Material Components.

Diseño de la vista personalizada para nuestro Dialog a pantalla completa.

Configuración de un Fragment para que se comporte como un Dialog, además de adquirir un estilo a pantalla completa con MaterialComponents.

Modificación de un estilo, para añadir animaciones de entrada y salida en Android. Mejoras en la UI.

Primeros pasos para el componente AppBar. Construcción e inicialización del componente que posteriormente lanzará sus 2 versiones, Top y Bottom.

Implementación de la versión Top de la AppBar, en esta clase crearemos una vista a base de <include/>, para ver como ahorrar tiempo y recursos con Material Design.

Diseño de la vista básica y personalización enfocada a mejorar la Experiencia del Usuario(UX).

Integración de un FloatinActionButton con un AppBar:Bottom, veremos como personalizar la UI para un correcto funcionamiento entre estos MDC.

En esta clase veremos como implementar eventos de Click para el menú, el navigationIcon y aprenderemos como enviar correctamente un Snackbar en estos escenarios.

Primeros pasos para la inicialización de un nuevo componente, los Pickers.

Para esta ocasión, vamos a ver como generar un DatePicker con el estilo de un Dialog.

Implementaremos mejoras a la parte visual, un estilo a pantalla completa y la adición de eventos para los diferentes botones y áreas que afectan a nuestros Pickers.

Clase extra para mostrar cómo resolver el problema del AppBar Bottom al adaptarse a un FloaginActionButton con el estilo diamante.

Repaso a todos los temas vistos en la sección, para hacer un pequeño resumen de todas las nuevas habilidades adquiridas.

Objetivo, temas y habilidades que obtendrás sobre esta sección.

Actualización de los diálogos dentro de la aplicación MD Top, para implementar los diseños basados en MDC, los cuales son compatibles con Shapes.

En esta clase aprenderemos a remplazar los antiguos Calendars, por los nuevos Pickers de Material Components.

Implementación del Picker en AddArtistActivity y optimización de código.

Modificación masiva para todos los diálogos, buenas prácticas y más.

Manipulación de colores para propiedades como Titulo, selección e icono ToogleButton, para los Pickers, todo a través de Themes y Styles.

Optimización de las AppBarTop, tanto en propiedades anteriores, como en la modificación de colores dinámicos para una correcta visualización en el tema oscuro.

Modificación del titulo y el icono de navegación, para una mejor visualización con respecto al fondo de la imagen y de la barra de acciones.

En esta clase vamos a comprender como es que funcionan los colores RGB y de que forma podemos crear un color dinámico en base a la AppBar y su contracción(Parte I).

En esta clase vamos a comprender como es que funcionan los colores RGB y de que forma podemos crear un color dinámico en base a la AppBar y su contracción(Parte II).

Mejores prácticas a la hora de retroceder desde el NavigationIcon en la Activity del detalle.

Proceso completo para guardar un valor de forma permanente en las SharedPreferences, en especifico el tipo de tema seleccionado por el usuario.

Creación de un SplashScreen de la forma correcta, en la misma actividad del lanzamiento, esto de acuerdo a las recomendaciones del equipo oficial de desarrollo.

Creación de un icono compatible con todas las versiones de android, incluso adaptable a cualquier densidad, esto no solo es una buena práctica en el diseño de iconos launcher, si no que también nos ayudará más adelante con nuestra SplashScreen personalizada.

Integración total del SplashScreen y el icono adaptativo.

Conclusiones de la sección, una revisión sobre que somos capaces ahora.

Problema a resolver, objetivo, temas y habilidades adquiridas después de terminar esta sección, son los puntos que veremos en esta clase.

Introducción a las transiciones entre actividades para android, con su respectiva configuración para Material Theme.

En esta clase vamos a ver cómo utilizar la transición por default, y poder manipularla para diferentes tipos de casos.

Transición de deslizamiento a un borde de la pantalla.

Mejores prácticas para la aplicación de transiciones en conjunto con explode.

En esta clase aprenderemos a implementar las transiciones que están compuestas por más de una animación.

Continuando con las transiciones, ahora veremos opciones más avanzadas para generar animaciones más completas.

Compartir un elemento en pantalla, es decir, animar un elemento de la actividad 1 a la actividad 2, para simular una conservación del mismo objeto.

Veamos las diferencias que nos exige el sdk de android para compartir más de un elemento.

En esta clase mejoraremos el efecto de recorte final y optimizaremos las transiciones para un mejor enfoque.

Actividad práctica para fortalecer lo aprendido con respecto a las transiciones y los elementos excluidos.

Veamos algunos de los problemas que podemos tener al compartir múltiples elementos en pantalla, además de ver algunos casos incompatibles.

Modificación de la vista del detalle para comenzar a animar el nombre como elemento compartido.

En esta ocasión vamos a disminuir la diferencia visual entre el elemento del listado y el detalle, con respecto a el nombre completo.

Mejoramiento en la imagen del detalle, inclusión de una portada que ofrezca un mejor resultado.

Optimización en las transiciones para lograr un mejor resultado con el nombre compartido.

Actividad práctica para optimizar la duración de las animaciones, y así poder ofrecer un mejor flujo de trabajo y cuidar de la UX.

Añadir una nueva transición especialmente para la vista de añadir.

En esta clase vamos a crear una nueva transición que cubra todos los escenarios de nuestra app para las salidas de las animaciones.

Clase extra y práctica con el fin de obtener un resultado más completo.

Revisión de los temas y habilidades adquiridas con respecto a las transiciones y animaciones vistas en la sección.

Objetivo y temas principales de la sección.

Inicio de un nuevo modulo que contendrá 2 variantes del Navigation Drawer.

Primeros pasos de cómo incluir el componente NavigationView, para crear un Navigation Drawer con Material Design.

Inclusión del contenedor DrawerLayout para el correcto funcionamiento del NavigationView en su modalidad Modal.

En esta clase veremos paso a paso, cómo añadir el listener y a manipular los eventos de selección para el menú de nuestro Modal Navigation Drawer.

Así mismo, también veremos cómo cerrar correctamente nuestro Navigation Drawer.

Comenzaremos a desarrollar el Navigation Drawer en su versión Bottom, pero antes, debemos configurar su entorno para un correcto uso.

Para lograr un Modal Navigation Drawer, en realidad debemos hacer uso de Sheet, pero de una forma muy especifica, aquí veremos paso a paso cómo y cuando implementar este MDC de acuerdo a los lineamientos de Material Theming.

Mejorar la interfaz del usuario, corregir diseños y añadir eventos para el Bottom Navigation Drawer.

Fragment contenedor de los distintos tipos de Sheets Bottom que veremos en esta sección.

Diseño de la vista inicial para los primeros pasos con el componente Sheets Bottom en su versión Standar.

Perzonalización de nuestro BottomSheet a través de las propiedades provenientes de la clase BottomSheetBehavior, tanto para su diseño, como su comportamiento.

Diseño de la primera parte del Standar Bottom Sheet, esta clase contempla la cabecera y los botones de acciones rápidas.

Continuación directa de la clase anterior, para concluir el diseño enriquecido de nuestra vista de acuerdo a los lineamientos de Material Design.

Exploremos más a fondo sobre los estados que manipulan el comportamiento y visualización de nuestro Standar Bottom Sheet.

En este apartado vamos a ver cómo manipular el estado de nuestro Standar Bottom Sheet desde un botón auxiliar que nos servirá para expandir o contraer el contenido.

Primeros pasos para crear el modulo referente al modo Modal Bottom Sheet.

Construcción de la vista inicial de nuestro Modal Bottom Sheet, en esta clase veremos las 2 cabeceras de la vista que posteriormente podemos alternar para los modos expandidos o contraidos.

Continuación del diseño de nuestra vista para el Modal Bottom Sheet, además de ello, aquí incluimos un tip para preparar nuestra interfaz y adaptarnos a dispositivos con pantallas más alargadas.

Evento para cancelar la pantalla completa y escenarios con vistas que nos demuestre que pasa si el contenido no necesita el complemento de la vista extra.

Últimos ajustes a nuestro Modal Bottom Sheet a pantalla completa, tanto en lo visual como en el código optimizado.

Recapitulación de los temas aprendidos durante la sección. Descarga del proyecto disponible.

Esta clase esta diseñada para informar el objetivo de la sección y los temas principales a tratar.

Primeros pasos para la creación del módulo que contendrá las vistas a las cuales posteriormente aplicaremos el nuevo sistema de transiciones nativo de android, Motion.

En esta clase nos enfocaremos en diseñar 2 vistas que posteriormente se transformarán entre sí, esto gracias a los patrones de Motion.

Implementación básica del patrón de Motion Container Transform

Transición inversa para lograr que la vista final regrese a la apariencia del floating action button.

Implementación básica del patrón de Motion Shared Axis.

Con esta nueva configuración, seremos capaces de ofrecer un sistema de navegación en una vista de tipo secuencial.

Mejoras al patrón Shared Axis y mejores prácticas al diseño.

Implementación básica del patrón de Motion Fade Through.

Repaso de lo aprendido en esta sección de Motion y disponibilidad de descargar el proyecto completo hasta este punto(Motion).

¿Que veremos en esta sección? Descubrelo de manera rápida en esta clase.

Para esta clase vamos a modificar la tipografía de forma básica y paso a paso.

Mejores prácticas con el usos de fuentes personalizadas en android.

En este vídeo exploraremos y personalizaremos los títulos de nuestras apps, esto incluye las barras de acciones.

Es turno de implementar y ajustar los subtítulos, algo muy útil para resaltar secciones o elementos dentro de nuestros diseños.

Ajustes a nuestro diseño adaptado, que mejoraba las transiciones con sharedElement, y que requiere ajustes finales para la adopción total de la tipografía en android.

Ajustemos el contenido de nuestras apps, veamos cómo llegar al equilibrio entre espacio optimizado, limpio, intuitivo y legible.

Ahora veremos en que casos debe usarse este estilo, así como ajustar el espacio entre las letras, algo muy útil cuando las fuentes son muy anchas.

Finalmente tenemos a los estilos mas pequeños y discretos de material theming, los subtítulos y los textos auxiliares.

Hagamos un breve repaso de algunas de las habilidades recientemente adquiridas.