Material Design para

Android
INTEGRANTES
Cuzco Cerquin Luis Alberto N00021879
Ramirez Vasquez Jos Mara Alexis N00031534
Tintinapon Muoz Gianmarco Segundo N00035539
Es una gua integral para el diseo visual, de movimientos y de interaccin en
distintas plataformas y dispositivos.
Tema Material
Listas y tarjetas
Visualizacin de sombras
Animaciones
Elementos de diseo
 TEMA MATERIAL

El tema Material te ofrece un nuevo estilo para tu aplicacin, widgets del sistema que te
permiten configurar la paleta de colores y animaciones predeterminadas para informacin tctil
y transiciones de actividades. El tema material se define como:
@android:style/Theme.Material (versin oscura)
@android:style/Theme.Material.Light (versin clara)
@android:style/Theme.Material.Light.DarkActionBar
 Para personalizar la paleta de colores
Personalizar la barra de estado
Permite personalizar fcilmente la barra de estado, especifica un color que se
adapte a tu marca y proporciona suficiente contraste para mostrar los conos de
estado en blanco. Si quieres establecer un color personalizado para la barra de
estado, usa el atributo android:statusBarColor cuando extiendas el tema material.
android:statusBarColor hereda el valor de android:colorPrimaryDark en forma
predeterminada.
Estilos xml

Listas y tarjetas
Android proporciona dos widgets nuevos para mostrar listas y tarjetas con
estilos y animaciones como el nuevo widget RecyclerView que es una
versin ms acoplable de ListView el cual admite diferentes tipos de
diseos y proporciona mejoras en el rendimiento. Tambin esta el nuevo
widget CardView permitiendo mostrar extractos de informacin
importante dentro de tarjetas que tienen apariencia y estilo coherentes.
Crear lista
El widget RecyclerView es una versin ms flexible y avanzada de ListView,
Siendo un contenedor para mostrar grandes conjuntos de datos, los cuales
se pueden desplazar de manera muy eficiente al mantener una cantidad
limitada de vistas. Se lo usa cuando se tiene un conjunto de datos cuyos
elementos cambien en tiempo de ejecucin sobre la base de la accin
del usuario o los eventos de la red. Adems de simplificar la pantalla y dar
una mejor manipulacin de grandes conjuntos de datos, facilitando lo
siguiente:
Administradores de diseo para el posicionamiento de elementos y
animaciones predeterminadas para las operaciones comunes con
elementos, como quitar o agregar elementos.
Figura: Listas con RecyclerView y CardView
Crear tarjetas
CardView extiende la clase FrameLayout y te permite mostrar informacin dentro
de tarjetas que tienen una apariencia uniforme en la plataforma. Pueden tener
sombras y esquinas redondeadas.
Para crear una tarjeta con una sombra, usa el atributo card_view:cardElevation.
CardView usa elevacin real y sombras dinmicas en Android 5.0 (nivel de API 21)
y versiones posteriores, y regresa a una implementacin de sombras programticas
en versiones anteriores. Usa estas propiedades para personalizar la apariencia del
widget CardView:
Para establecer el radio de la esquina en tus diseos, usa el atributo
card_view:cardCornerRadius.
Para establecer el radio en tu cdigo, usa el mtodo CardView.setRadius.
Para establecer el color de fondo de una tarjeta, usa el atributo
card_view:cardBackgroundColor.
Visualizacin de sombras

Adems de las propiedades X e Y, las vistas de Android ahora poseen una

propiedad Z. Esta propiedad nueva representa la elevacin de una vista,
que determina lo siguiente:
El tamao de la sombra: las vistas con valores Z ms elevados proyectan
sombras ms grandes.
El orden del dibujo: las vistas con valores Z ms elevados aparecen sobre
las otras vistas.

Material Design introduce una elevacin para los elementos de la IU. La

elevacin ayuda a los usuarios a comprender la importancia relativa de
cada elemento y a centrar su atencin en la tarea para realizar.
Asignar elevacin a tus vistas
El valor Z de una vista cualquiera tiene dos componentes:
Elevacin: El componente esttico.

Z = elevation + translationZ

Para establecer la elevacin de una vista al definir un diseo, usa el

atributo android:elevation.
 ANIMACIONES
Las nuevas API de animaciones te permiten crear animaciones personalizadas para la
informacin tctil en los controles de IU, adems de realizar cambios en el estado de las
vistas y transiciones entre actividades.

Respuesta tctil
Efecto revelar circular
Transiciones de actividades
Movimiento curvo
Ver cambios de estados
Personalizar la respuesta tctil
Proporciona una confirmacin visual instantnea en el punto de contacto cuando
los usuarios interactan con los elementos de la IU. Las animaciones
predeterminadas de la respuesta tctil para botones usan la nueva
clase RippleDrawable, que realiza una transicin entre diferentes estados con un
efecto de ondas.
En la mayora de los casos, debes aplicar esta funcionalidad en la vista XML
especificando el fondo de la vista como:

?android:attr/selectable ?android:attr/selectableItemBac
ItemBackground kgroundBorderless

Para un efecto de ondas que se extiende ms

all de la vista. Se lo dibujar en la vista primaria
Para un efecto de ondas con lmites. ms cercana de la vista (que lo limitar) con un
fondo de valor no nulo.
Usar el efecto revelar

Las animaciones del efecto revelar proporcionan a los usuarios una continuidad
visual cuando muestras u ocultas un grupo de elementos de la IU. El mtodo
ViewAnimationUtils.createCircularReveal() te permite animar un crculo de recorte
para revelar u ocultar una vista.
Personalizar transiciones de actividades

Proporcionan conexiones visuales entre diferentes estados mediante el movimiento y las

transformaciones entre elementos comunes. Puedes especificar las animaciones
personalizadas para entrar y salir de las transiciones y para las transiciones de elementos
compartidos entre actividades.

Una transicin de entrada determina cmo entran en escena las vistas en una
actividad
Una transicin de salida determina cmo salen de escena las vistas en una actividad.

Una transicin de elementos compartidos determina cmo las vistas que estn
compartidas entre dos actividades realizan la transicin entre estas.
 Fade_in.xlm
Fade_out.xlm

left_in.xlm
left_out.xlm

right_in.xlm
right_out.xlm

Zoom_back_in.xlm
Zoom_back_out.xlm

zoom_forward_in.xlm
Zoom_forward_out.xlm
Usar movimiento curvo

Las animaciones en Material Design se basan en curvas para la interpolacin de

tiempo y los modelos de movimiento espacial. Con Android 5.0 (API nivel 21) y
superior, puedes definir las curvas de sincronizacin personalizadas y los modelos
de movimientos curvos para las animaciones.

El sistema proporciona recursos XML para las tres curvas bsicas en la

especificacin de Material Design:

@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml
Animar cambios de estados de las vistas
La clase StateListAnimator te permite definir los animadores que se ejecutan cuando
cambia el estado de una vista. En el siguiente ejemplo, se muestra cmo definir un
StateListAnimator como un recurso XML:
 Elementos de diseo

Estas nuevas capacidades para los elementos de diseo te permiten implementar

aplicaciones de Material Design:
Los dibujables en vector se pueden escalar sin perder definicin y son perfectos para
los iconos de las aplicaciones de un solo color.
El teido de los dibujables te permite definir mapas de bits como mscaras alfa y
pintarlos con un color durante el tiempo de ejecucin.
La extraccin de color te permite extraer automticamente colores prominentes de
una imagen del mapa de bits.
Extraer colores prominentes de una imagen

La Biblioteca de soporte de Android r21 y superiores incluye la clase Palette, que

te permite extraer colores prominentes de una imagen. Esta clase extrae los
siguientes colores prominentes: como oscuro brillante, claro brillante, etc.
Para extraer estos colores, pasa un objeto Bitmap al mtodo esttico
Palette.generate() en el subproceso en segundo plano en donde cargas tus
imgenes. Si no puedes usar dicho subproceso, llama al mtodo
Palette.generateAsync() y proporciona un gestor de eventos en su lugar.
Crear interfaces dibujables en vector

Puedes definir las interfaces dibujables en vector, que escalan sin perder
definicin. Solo necesitas un archivo de recurso para una imagen en vector, en
oposicin a un archivo de recurso para la densidad de cada pantalla en el caso
de imgenes de mapa de bits. Para crear una imagen en vector, defines los
detalles de la forma dentro de un elemento XML <vector>.
Bibliografa
Android. (2017). Obtenido de Android: https://developer.android.com/design/material/index.html
GRACIAS