Saltar a contenido

107. UT7.1 MATERIAL DESIGN

107.1 Material Design

•1.Elementos del Diseño. •2.Trabajar con Material Design •3.Layouts y Toolbar •4.TabLayout •5.TextInputLayout •6.Floating Action Button (FAB) •7.SnackBar •8.CardView •9.RecyclerView •10.NavigatorDrawer

La última versión, Material 3, permite mejorar la experiencia personal, adaptativa , desde colores dinámicos , accesibilidad mejorada . Proporciona elementos de diseño para pantallas grandes y patrones de diseño.

107.2 Definiciones

Material Design o en la versión actual **Material 3 **, es un conjunto de reglas y principios que guían cómo deben verse y comportarse las interfaces de usuario, especialmente en aplicaciones móviles y web. Piensa en ello como las reglas de moda para las apps: te dice qué colores usar, cómo deben interactuar los elementos en la pantalla, y cómo se deben animar las transiciones, todo para crear una experiencia de usuario coherente y atractiva.
Jetpack Compose está alineado con los principios de Material Design.

107.2.1 ¿Que es Material 3?

https://m3.material.io/get-started

Componentes UI y guias para Android, Flutter y Web

El sistema de diseño se organiza en tres partes principales:

  1. foundation (cimientos)
  2. Styles
  3. Componentes
  4. En el siguiente apartado empezamos viendo como usar Material en los proyectos de Jetpack Compose.

En la segunda parte se presenta la documentación de Material 3

107.3 Temas de Material en Jetpack Compose

Se puede seguir en detalle en este codelab

Material You maneja los temas en Android de una forma bastante innovadora y dinámica. Una de las características clave de Material You (Material3) es su capacidad para adaptar los colores de la interfaz de usuario basándose en los colores del fondo de pantalla del usuario, creando una experiencia más personalizada y coherente.

Uso de Dynamic Color En Android 12 y superior, Material You permite que los temas extraigan colores dinámicos del fondo de pantalla del usuario, generando paletas de colores que se utilizan a lo largo de toda la aplicación. Estos colores se pueden utilizar para ajustar la apariencia de los componentes de la UI, asegurando que la interfaz se sienta más integrada con el dispositivo del usuario.

En este apartado se verá:
* Cómo aplicar Temas de Material a una app de Compose * Cómo agregar una paleta de colores personalizada a tu app * Cómo agregar fuentes personalizadas a tu app * Cómo agregar formas personalizadas a los elementos de tu app * Cómo agregar una barra superior a la app

Disponemos de la herramienta online Material Theme Builder para la creación del Jetpack Compse Theme.kt de nuestro proyecto.

107.3.1 Agregar colores.

107.4 Uso de Material 3

El sistema de diseño de Material 3 se ordena en tres grupos:

  1. Bases y personalización (Foundation and customization)
  2. Estilos (Styles)
  3. Componentes

107.4.1 Foundation

107.4.1.1 Design Tokens

  • Los tokens de diseño apuntan a valores de estilo como colores, fuentes y medidas.
  • Utiliza tokens de diseño en lugar de valores codificados.
  • Cada token está nombrado según cómo o dónde se utiliza (por ejemplo, md.fab.container.color establece el color del contenedor para un FAB).
  • Incluso si el valor final de un token cambia, su nombre y uso permanecen iguales.
  • Material Design tiene tres tipos de tokens: de referencia, de sistema y de componente.

107.4.1.2 Accesibilidad

107.4.1.3 Personalización (customizing material)

107.4.1.4 Design tokens

los ladrillos de construcción de los IU

107.4.2 Estilos

Es el aspecto visual de la IU que refleja un "look and fell"

107.4.2.1 Color System

"Es como pintar sobre un dibujo con números"

alt text

Cada elemento en la pantalla tiene un número, cada número un color.

Disponemos de sistema de * colores estáticos * colores dinámicos

Definiciones principales
* "Color role" Son como los números del panel de pintura. los "color roles" se asignan a elementos concretors del IU. Tienen nombres como primary onPrimary. Ver color roles * Colores dinámicos. Los colores dinámicos toman un color del fondo de escritorio del teléfono y generan un esquema accesible * Colores estáticos . No cambian con el entorno * Baseline color Esquema de color estático incluido en Material3. ver baseline color.

107.4.2.2 Tres niveles de contraste.

Al definir relaciones de color mediante combinaciones de tonos accesibles, el sistema de color permite a los usuarios seleccionar la configuración de contraste que mejor se adapte a sus necesidades visuales. Hay tres niveles diferentes de contraste para elegir:

  • Estándard
  • Medio
  • Alto

107.4.2.3 Parejas de tonos accesibles

El sistema manipula los valores HCT (hue, chroma and tone) para crear una paleta tonal para cada color con tonos que van del 0 al 100.

El color tiene limitaciones físicas, ya sea la física real, nuestras propias limitaciones visuales biológicas o las limitaciones de la representación de colores en pantalla. Por ejemplo, algunos tonos no pueden existir con ciertos cromas o tonos. Las limitaciones del color son la razón por la que colores como el azul claro brillante o el rojo claro brillante no son del todo posibles. Por eso el valor de croma puede aumentar o disminuir para algunos tonos en una paleta tonal.

alt text

107.4.2.4 Definir colores HCT

HUE

CHROMA

TONE

107.4.2.5 Color Roles

  • Los roles de color están asignados a los Componentes Materiales. Utilizarás estos roles de color tanto si estás usandeo el squema base estático como el color dinámico. Si tu producto contiene componentes personalizados, deberán ser correctamente asignados a este conjunto de roles de color.
  • Los roles de color aseguran la accesibilidad. El sistema de color se basa en combinaciones de colores accesibles. Estos pares de colores proporcionan un contraste mínimo accesible de 3:1. Los roles de color están tokenizados.
  • Los roles se implementan en diseño y código a través de tokens. Un token de diseño representa una pequeña decisión de diseño reutilizable que forma parte del estilo visual de un sistema de diseño. Los tokens de diseño son los bloques de construcción de todos los elementos de la interfaz de usuario. Los mismos tokens se utilizan en diseños, herramientas y código. Más sobre tokens.

alt text

107.4.2.5.1 Conceptos generales

  • Superficie – Un rol utilizado para fondos y áreas grandes de baja énfasis en la pantalla.

  • Primario, Secundario, Terciario – Roles de color de acento utilizados para enfatizar o desenfatizar elementos en primer plano.

  • Contenedor – Roles utilizados como color de relleno para elementos en primer plano, como botones. No deben utilizarse para texto o iconos.

  • On – Roles que comienzan con este término indican un color para texto o iconos sobre su color principal emparejado. Por ejemplo, 'on primary' se utiliza para texto e iconos contra el color de relleno primario.

  • Variante – Roles que terminan con este término ofrecen una alternativa de menor énfasis a su par no vari

Emparejando layering y colores

Más sobre * Color Primario

107.4.2.6 Esquemas de colores

107.4.2.7 Elevation

107.4.2.8 Iconos

107.4.2.9 Movimiento

107.4.2.10 Shaoe

107.4.2.11 Tipografía

107.4.3 Componentes

Una larga lista

107.4.3.1 Progress Indicator

https://m3.material.io/components/progress-indicators/overview

107.4.3.2 BasicTextField

107.4.3.3 BottomNavigation

Ejemplo , usando algunas opciones:

BottomNavigation {
    BottomNavigationItem(
        icon = { Icon(Icons.Filled.Home, contentDescription = "Inicio") },
        selected = /* estado que indica si este ítem está seleccionado */,
        onClick = { /* acción al hacer clic */ }
        label = { Text("Inicio") },
        alwaysShowLabel = false // Mostrar la etiqueta solo cuando está seleccionado
    )
    // ... más ítems ...
}

107.4.3.4 SnackBar

https://developer.android.com/jetpack/compose/components/snackbar?hl=es-419

107.5 Apendice

Version 0.5, 12-12-23 Versión 0.6, 8-5-24