Material Design Para Android 6g561k

Material Design para Android INTEGRANTES Cuzco Cerquin Luis Alberto N00021879 Ramirez Vasquez José María Alexis N00031534

Tintinapon Muñoz Gianmarco Segundo N00035539

Es una guía integral para el diseño visual, de movimientos y de interacción en distintas plataformas y dispositivos.  Tema Material  Listas y tarjetas  Visualización de sombras

 Animaciones  Elementos de diseño

TEMA MATERIAL 

El tema Material te ofrece un nuevo estilo para tu aplicación, widgets del sistema que te permiten configurar la paleta de colores y animaciones predeterminadas para información táctil y transiciones de actividades. El tema material se define como:



@android:style/Theme.Material (versión oscura)



@android:style/Theme.Material.Light (versión clara)



@android:style/Theme.Material.Light.DarkActionBar

 Para personalizar la paleta de colores

Personalizar la barra de estado  Permite personalizar fácilmente 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 versión más acoplable de ListView el cual ite diferentes tipos de diseños y proporciona mejoras en el rendimiento. También esta el nuevo widget CardView permitiendo mostrar extractos de información importante dentro de tarjetas que tienen apariencia y estilo coherentes.

Crear lista  El widget RecyclerView es una versión más 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 ejecución sobre la base de la acción del o los eventos de la red. Además de simplificar la pantalla y dar una mejor manipulación de grandes conjuntos de datos, facilitando lo siguiente:  es de diseño 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 información 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 elevación real y sombras dinámicas en Android 5.0 (nivel de API 21) y versiones posteriores, y regresa a una implementación de sombras programáticas en versiones anteriores. Usa estas propiedades para personalizar la apariencia del widget CardView: Para establecer el radio de la esquina en tus diseños, usa el atributo card_view:cardCornerRadius.

•

 • Para establecer el radio en tu código, usa el método CardView.setRadius.  • Para establecer el color de fondo de una tarjeta, usa el atributo card_view:cardBackgroundColor.

Visualización de sombras  Además de las propiedades X e Y, las vistas de Android ahora poseen una propiedad Z. Esta propiedad nueva representa la elevación de una vista, que determina lo siguiente:  El tamaño de la sombra: las vistas con valores Z más elevados proyectan sombras más grandes.  El orden del dibujo: las vistas con valores Z más elevados aparecen sobre las otras vistas.

 Material Design introduce una elevación para los elementos de la IU. La elevación ayuda a los s a comprender la importancia relativa de cada elemento y a centrar su atención en la tarea para realizar.

Asignar elevación a tus vistas El valor Z de una vista cualquiera tiene dos componentes: •Elevación: El componente estático. Z = elevation + translationZ

Para establecer la elevación de una vista al definir un diseño, usa el atributo android:elevation.

ANIMACIONES Las nuevas API de animaciones te permiten crear animaciones personalizadas para la información táctil en los controles de IU, además de realizar cambios en el estado de las vistas y transiciones entre actividades.  Respuesta táctil  Efecto revelar circular  Transiciones de actividades  Movimiento curvo  Ver cambios de estados

Personalizar la respuesta táctil  Proporciona una confirmación visual instantánea en el punto de o cuando los s interactúan con los elementos de la IU. Las animaciones predeterminadas de la respuesta táctil para botones usan la nueva clase RippleDrawable, que realiza una transición entre diferentes estados con un efecto de ondas.

 En la mayoría de los casos, debes aplicar esta funcionalidad en la vista XML especificando el fondo de la vista como:

 ?android:attr/selectable ItemBackground

 ?android:attr/selectableItemBac kgroundBorderless

 

Para un efecto de ondas con límites.

Para un efecto de ondas que se extiende más allá de la vista. Se lo dibujará en la vista primaria más 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 s una continuidad visual cuando muestras u ocultas un grupo de elementos de la IU. El método ViewAnimationUtils.createCircularReveal() te permite animar un círculo 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 transición de entrada determina cómo entran en escena las vistas en una actividad •Una transición de salida determina cómo salen de escena las vistas en una actividad. •Una transición de elementos compartidos determina cómo las vistas que están compartidas entre dos actividades realizan la transición 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 interpolación de tiempo y los modelos de movimiento espacial. Con Android 5.0 (API nivel 21) y superior, puedes definir las curvas de sincronización personalizadas y los modelos de movimientos curvos para las animaciones.

El sistema proporciona recursos XML para las tres curvas básicas en la especificación 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 cómo definir un StateListAnimator como un recurso XML:

Elementos de diseño  Estas nuevas capacidades para los elementos de diseño te permiten implementar aplicaciones de Material Design:  Los dibujables en vector se pueden escalar sin perder definición y son perfectos para los iconos de las aplicaciones de un solo color.

 El teñido de los dibujables te permite definir mapas de bits como máscaras alfa y pintarlos con un color durante el tiempo de ejecución.  La extracción de color te permite extraer automáticamente 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 método estático Palette.generate() en el subproceso en segundo plano en donde cargas tus imágenes. Si no puedes usar dicho subproceso, llama al método 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 definición. Solo necesitas un archivo de recurso para una imagen en vector, en oposición a un archivo de recurso para la densidad de cada pantalla en el caso de imágenes de mapa de bits. Para crear una imagen en vector, defines los detalles de la forma dentro de un elemento XML .

Bibliografía Android. (2017). Obtenido de Android: https://developer.android.com/design/material/index.html

GRACIAS