Skip to content

Latest commit

 

History

History
96 lines (47 loc) · 3.89 KB

File metadata and controls

96 lines (47 loc) · 3.89 KB

Kotlin-Intermedio > Sesión 6

Sesión 6: Material Design

Introducción

Material Design es un sistema que envuelve a una guia de estilo de diseño, herramientas y componentes para aplicaciones móviles y web. La base del concepto de este es que toda la interfaz debe ser representado por materiales, (específicamente papel y tinta) y añade conceptos visuales como textura, representación de luces y sombras o altura.

¿En qué se basa Material Design?

Material Design recibe su nombre por estar basado en objetos materiales. Piezas colocadas en un espacio (lugar) y con un tiempo (movimiento) determinado.

Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal.

Precisamente este diseño basado en objetos es una manera de intentar aproximarse a la realidad, algo que en un mundo donde todo es táctil y virtual es difícil. Material Design quiere guiarse por las leyes de la física, donde las animaciones sean lógicas, los objetos se superpongan pero no puedan atravesarse el uno al otro y demás.

No es exclusivo

No debemos pensar en Material Design como ese diseño destinado para las aplicaciones móviles de Android. De hecho, es multiplataforma. Tantos los smartphones, tablets, smartwatches o televisores pueden hacer uso de este diseño. También las páginas webs. Material Design ha sido creado pensando en todos los sistemas, no solo Android.

Puedes consultar la documentación en la siguiente liga

1. Objetivos 🎯


  • Implementar la guía de estilos de Material Design.
  • Utilizar los componentes de la biblioteca com.google.android.material.
  • Adaptar viejas interfaces a este nuevo modelo.

2. Contenido 📘


Components

Un component es un View apegado a los estándares y usos de Material Design. La biblioteca com.google.android.material nos provee de clases que pueden reemplazar las Views que hemos utilizado anteriormente (Buttons, ImageViews, EditText, etc.), o que agregan nuevas funcionalidades. Utilizaremos los elementos más básicos.


Appbar y Navigation drawer

Crearemos y personalizaremos la barra superior de nuestra aplicación y añadiremos items con funcionalidades. Agregaremos también un Navigation drawer con distintas opciones de navegación y datos de perfil.


Themes

Los estilos son recursos que permiten definir una serie de atributos visuales y de comportamiento para los elementos de la UI. Los temas son estilos que definen una serie de características de manera global (para toda la app). En este ejemplo, crearemos y manipularemos estilos para nuestras Views y utilizaremos sus atributos de manera individual para darle estilo a nuestra aplicación.


3. Proyecto 🔨

Adaptaremos nuestro proyecto al guideline de Material Design sustituyendo Components y personalizando nuestros Themes. Implementaremos Components avanzados como una Appbar y crearemos transiciones animadas.

4. Postwork 📝

Con lo aprendido en esta sesión, continúa con la implementación de Material Design en tu proyecto.


Anterior | Siguiente