Skip to content

Latest commit

 

History

History
79 lines (39 loc) · 2.78 KB

File metadata and controls

79 lines (39 loc) · 2.78 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.

1. Objetivos 🎯


  • Implementar la guía de estilos de Material Design.
  • Utilizar los componentes de la librería 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 librería 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 agregarles 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 trancisiones animadas.

4. Postwork 📝

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


Anterior | Siguiente