Material Design 3 en Compose

Jetpack Compose ofrece una implementación de Material Design 3, la próxima evolución de Material Design. Material 3 incluye temas actualizados, y las funciones de personalización de Material You, como el color dinámico, y Están diseñados para ser coherentes con el nuevo estilo visual y la IU del sistema en Android 12. y superiores.

A continuación, demostramos la implementación de Material Design 3. con la app de ejemplo de Reply como ejemplo. El ejemplo de Reply es basada completamente en Material Design 3.

App de ejemplo de Reply con Material Design 3
Figura 1: App de ejemplo de Reply con Material Design 3

Dependencia

Para comenzar a usar Material 3 en tu app de Compose, agrega Compose Material 3. dependencia a tus archivos build.gradle:

implementation "androidx.compose.material3:material3:$material3_version"

Una vez que se agregue la dependencia, podrás comenzar a agregar sistemas de Material Design. incluidos el color, la tipografía y la forma, a tus aplicaciones.

APIs experimentales

Algunas APIs de M3 se consideran experimentales. En esos casos, debes habilitar en el nivel de la función o del archivo con la anotación ExperimentalMaterial3Api:

// import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

Temas de Material

Un tema de M3 contiene los siguientes subsistemas: esquema de colores, tipografía y formas. Al personalizar estos valores, tus cambios se reflejan automáticamente en los componentes de M3 usar para compilar tu app.

Subsistemas de Material Design: color, tipografía y formas
Figura 2: Subsistemas de Material Design: color, tipografía y formas

Jetpack Compose implementa estos conceptos con MaterialTheme de M3 elemento componible:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}

Para aplicar un tema al contenido de tu aplicación, define el esquema de colores, la tipografía y formas específicas de tu aplicación.

Esquema de colores

La base de un esquema de colores es el conjunto de cinco colores clave. Cada uno de estos los colores se relacionan con una paleta tonal de 13 tonos, que usa Material 3 o los componentes de la solución. Por ejemplo, este es el esquema de colores para el tema claro de Respuesta:

Esquema de colores claros de la app de ejemplo de Reply
Figura 3: Esquema de colores claros de la app de ejemplo de Reply

Obtén más información sobre los roles de color y esquema de colores.

Generar esquemas de colores

Si bien puedes crear un ColorScheme personalizado de forma manual, suele ser más fácil generar uno con los colores de origen de tu marca. El tema Material Builder te permite hacer esto y, de manera opcional, exportar Código de temas de Compose Se generan los siguientes archivos:

  • Color.kt contiene los colores de tu tema con todos los roles definidos para colores de temas claro y oscuro.

val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
// ..
// ..

val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
// ..
// ..

  • Theme.kt contiene una configuración para la app y los esquemas de colores claro y oscuro. el tema.

private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    // ..
)
private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    // ..
)

@Composable
fun ReplyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (!darkTheme) {
            LightColorScheme
        } else {
            DarkColorScheme
        }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

Para admitir temas claros y oscuros, usa isSystemInDarkTheme(). Según el configuración del sistema, define qué esquema de colores usar: oscuro o claro.

Esquemas de colores dinámicos

El color dinámico es la parte clave de Material You, en la que un deriva colores personalizados del fondo de pantalla de un usuario para aplicarlos a su las apps y la IU del sistema. Esta paleta de colores se utiliza como punto de partida para generar esquemas de colores claro y oscuro.

Temas dinámicos de la app de ejemplo de Reply desde el fondo de pantalla (izquierda) y los temas predeterminados de la app (derecha)
Figura 4: Temas dinámicos de la app de ejemplo de Reply desde el fondo de pantalla (izquierda) y los temas predeterminados de la app (derecha)

El color dinámico está disponible en Android 12 y versiones posteriores. Si el color dinámico está disponible, puedes configurar un ColorScheme dinámico. De lo contrario, deberás recurrir para usar un ColorScheme oscuro o claro personalizado.

ColorScheme proporciona funciones de compilador para crear una luz dinámica o Esquema de colores oscuro:

// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
    dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}

Uso del color

Puedes acceder a los colores del tema de Material en tu app mediante MaterialTheme.colorScheme

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)

Cada rol de color se puede usar en varios lugares, según el componente estado, importancia y énfasis.

  • El primario es el color base, que se usa para componentes principales, como los botones, estados activos y el tono de las superficies elevadas.
  • El color de clave secundaria se usa para los componentes menos destacados de la IU, como como chips de filtro, y amplía la oportunidad de expresión del color.
  • El color de clave terciaria se usa para derivar los roles de los acentos contrastantes que se pueden usar para equilibrar los colores primarios y secundarios, o aportar atención a un elemento.

El diseño de la app de ejemplo de Reply usa el color del contenedor principal sobre main-container para poner énfasis en el elemento seleccionado.

Contenedor principal y campos de texto con color en el contenedor principal.
Figura 5: Contenedor principal y campos de texto con color en el contenedor principal.

Card(
    colors = CardDefaults.cardColors(
        containerColor =
        if (isSelected) MaterialTheme.colorScheme.primaryContainer
        else
            MaterialTheme.colorScheme.surfaceVariant
    )
) {
    Text(
        text = "Dinner club",
        style = MaterialTheme.typography.bodyLarge,
        color =
        if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
        else MaterialTheme.colorScheme.onSurface,
    )
}

En el panel lateral de navegación de Reply, puedes ver cómo las opciones son secundarias y terciarias. los colores de los contenedores se usan en contraste para crear énfasis y acento.

Combinación de contenedor terciario y contenedor terciario para el botón de acción flotante.
Figura 6: Combinación de contenedor terciario y contenedor terciario para el botón de acción flotante.

Tipografía

Material Design 3 define una escala de tipo, incluidos los estilos de texto. que se adaptaron de Material Design 2. Los nombres y las agrupaciones se simplificaron a los siguientes: gráficos, encabezados, títulos, cuerpos y etiquetas, con tamaños grandes, medianos y pequeños para cada uno.

Escala de tipografía predeterminada para Material Design 3
Figura 7: Escala de tipografía predeterminada para Material Design 3
M3 Tamaño de fuente/alto de línea predeterminados
displayLarge Roboto 57/64
displayMedium Roboto 45/52
displaySmall Roboto 36/44
headlineLarge Roboto 32/40
headlineMedium Roboto 28/36
headlineSmall Roboto 24/32
titleLarge New- Roboto Medium 22/28
titleMedium Roboto Medium 16/24
titleSmall Roboto Medium 14/20
bodyLarge Roboto 16/24
bodyMedium Roboto 14/20
bodySmall Roboto 12/16
labelLarge Roboto Medium 14/20
labelMedium Roboto Medium 12/16
labelSmall New Roboto Medium, 11/16

Define la tipografía

Compose proporciona la clase Typography de M3, junto con la clase Clases TextStyle y relacionadas con la fuente para modelar el tipo de Material 3 a gran escala. El constructor Typography ofrece valores predeterminados para cada estilo, de modo que puedas omitir cualquier parámetro que no quieras personalizar:

val replyTypography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    titleMedium = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    ),
    // ..
)
// ..

Cuerpo grande, cuerpo medio y etiqueta mediana para diferentes usos de la tipografía.
Figura 8: Cuerpo grande, cuerpo medio y etiqueta mediana para diferentes usos de la tipografía.

Es probable que tu producto no necesite los 15 estilos predeterminados de Material Design escala de tipos. En este ejemplo, se eligen cinco tamaños para un conjunto reducido, mientras que se omiten el resto.

Puedes personalizar la tipografía si cambias los valores predeterminados de TextStyle y propiedades relacionadas con la fuente, como fontFamily y letterSpacing.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Normal,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    fontSize = 16.sp,
    lineHeight = 24.sp,
    letterSpacing = 0.15.sp,
    baselineShift = BaselineShift.Subscript
),

Una vez que hayas definido tu Typography, pásala al MaterialTheme de M3:

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}

Usa estilos de texto

Puedes recuperar la tipografía proporcionada al elemento componible MaterialTheme de M3. Para ello, haz lo siguiente: usando MaterialTheme.typography:

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)

Puedes leer más sobre los lineamientos de Material sobre cómo solicitar tipografía.

Formas

Las superficies de Material se pueden mostrar en diferentes formas. Las formas dirigen la atención, identificar componentes, comunicar el estado y expresar la marca.

La escala de la forma define el estilo de las esquinas del contenedor y ofrece una variedad de y redondear de cuadrado a circular por completo.

Cómo definir formas

Compose proporciona la clase Shapes de M3 con parámetros expandidos para admitir. nuevas formas de M3. La escala de forma de M3 se parece más a la escala de tipo, lo que permite un rango expresivo de formas en toda la IU.

Hay diferentes tamaños de formas:

  • Tamaño extrapequeño
  • Pequeño
  • Mediano
  • Grande
  • Tamaño extragrande

De forma predeterminada, cada forma tiene un valor predeterminado, pero puedes anularlo:

val replyShapes = Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(24.dp)
)

Una vez que hayas definido tu Shapes, puedes pasarla al MaterialTheme de M3:

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}

Cómo usar formas

Puedes personalizar la escala de forma para todos los componentes en el objeto MaterialTheme. puedes hacerlo por componente.

Aplica una forma mediana y grande con valores predeterminados:

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}

Forma mediana para tarjeta y forma grande para el botón de acción flotante en la app de ejemplo de Reply.
Figura 9: Forma mediana para tarjeta y forma grande para el botón de acción flotante en la app de ejemplo de Reply

Hay otras dos formas, RectangleShape y CircleShape, que forman parte de Compose. La forma rectangular no tiene radio de borde y la forma circular se muestra completa. bordes en círculo:

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }

En los siguientes ejemplos, se muestran algunos de los componentes con valores de forma predeterminados. que se les aplicaron:

Valores de formas predeterminados para todos los componentes de Material 3.
Figura 10: Valores de formas predeterminados para todos los componentes de Material 3.

Puedes leer más sobre los lineamientos de Material sobre cómo solicitar forma.

Énfasis

El énfasis en M3 se proporciona usando variantes de color y su apariencia combinaciones. En M3, hay dos formas de agregar énfasis a tu IU:

  • Usa Surface, Surface-Variant y Background junto con On Surface, on-surface-variants del sistema de colores expandido de M3. Por ejemplo: Surface se puede usar con On Surface-Variant y Surface-Variant para ofrecer diferentes niveles de énfasis.
Usar combinaciones de colores neutros para enfatizar el texto
Figura 11: Usa combinaciones de colores neutros para enfatizar.
  • Puedes usar diferentes tamaños de fuente para el texto. Ya viste que puedes proporcionar las ponderaciones personalizadas a nuestra escala de tipos para dar un énfasis diferente.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)

Elevación

Material 3 representa la elevación, principalmente, usando superposiciones de colores tonales. Este es un nuevo capaz de diferenciar contenedores y superficies entre sí, aumentando elevación utiliza un tono más prominente, además de las sombras.

Elevación tonal con elevación de sombra
Figura 12: Elevación tonal con elevación de sombraE

Las superposiciones de elevación en los temas oscuros también cambiaron por las superposiciones de color tonales en Material 3: El color de superposición proviene del espacio de color primario.

Elevación de sombras vs. elevación tonal en Material Design 3
Figura 13: Elevación de sombras en comparación con la elevación tonal en Material Design 3

La superficie de M3, el elemento componible de copia de seguridad detrás de la mayoría de los componentes de M3 incluye compatibilidad con la elevación tonal y de sombras:

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}

Componentes de Material

Material Design incluye un conjunto amplio de componentes de Material (como botones, chips, tarjetas, barras de navegación) que ya siguen a Material Temas y te ayudan a crear atractivas apps de Material Design. Puedes comenzar a usar con propiedades predeterminadas desde el primer momento.

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}

M3 proporciona muchas versiones de los mismos componentes para que se usen en diferentes funciones según el énfasis y la atención.

Énfasis del botón desde el BAF, primario hacia el botón de texto
Figura 14: Énfasis del botón desde el BAF y el botón primario hacia el de texto
  • Un botón de acción flotante extendido para la acción de mayor énfasis:

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}

  • Un botón relleno para una acción de énfasis alto:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}

  • Un botón de texto para una acción de énfasis bajo:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}

Puedes obtener más información sobre los botones y otros componentes de Material. Material 3 proporciona una amplia variedad de paquetes de componentes, como botones y apps. barras, componentes de Navigation que están diseñados específicamente para diferentes usos y tamaños de pantalla.

Material también proporciona varios componentes de navegación que te ayudan a implementar la navegación, según los diferentes tamaños y estados de la pantalla.

NavigationBar se usa para dispositivos compactos cuando deseas orientarte a 5 o menos destinos:

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

NavigationRail se usa para tablets o teléfonos de tamaño pequeño a mediano en modo horizontal. Brinda ergonomía a los usuarios y mejora su experiencia. para esos dispositivos.

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

Muestra de respuestas de BottomNavigationBar(izquierda) y NavigationRail(derecha).
Figura 15: Catálogo de respuestas de BottomNavigationBar (izquierda) y NavigationRail (derecha)
.

Responde usando ambos en los temas predeterminados para brindar una experiencia del usuario interactiva a todos. tamaños de dispositivos.

NavigationDrawer se usa para tablets de tamaño mediano a grande en las que tienes que espacio suficiente para mostrar los detalles. Puedes usar tanto PermanentNavigationDrawer como ModalNavigationDrawer junto con NavigationRail.

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}

Muestra de respuestas del panel lateral de navegación permanente
Figura 16: Muestra de respuestas del panel lateral de navegación permanente

Las opciones de navegación mejoran la experiencia del usuario, la ergonomía y la accesibilidad. Puedes obtener más información sobre los componentes de navegación de Material en el Codelab adaptable de Compose.

Cómo personalizar los temas de un componente

El M3 fomenta la personalización y la flexibilidad. Todos los componentes tienen colores que se les aplicaron, pero exponen APIs flexibles para personalizar sus colores si como en los productos necesarios.

La mayoría de los componentes, como las tarjetas y los botones, proporcionan un objeto predeterminado que expone el color. y de elevación que se pueden modificar para personalizar el componente:

val customCardColors = CardDefaults.cardColors(
    contentColor = MaterialTheme.colorScheme.primary,
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    disabledContentColor = MaterialTheme.colorScheme.surface,
    disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
    defaultElevation = 8.dp,
    pressedElevation = 2.dp,
    focusedElevation = 4.dp
)
Card(
    colors = customCardColors,
    elevation = customCardElevation
) {
    // m3 card content
}

Obtén más información para personalizar Material 3.

IU del sistema

Algunos aspectos de Material You provienen del nuevo estilo visual y de la IU del sistema en Android 12 o versiones posteriores Dos áreas clave donde hay cambios son: Ondas y sobredesplazamiento. No se requiere ningún trabajo adicional para implementar estos cambios.

Onda

Ripple ahora usa un destello sutil para iluminar superficies cuando se presiona. Compose Material Ripple usa una plataforma RippleDrawable de forma interna en Android: La función sparkle ripple está disponible en Android 12 y versiones posteriores para todo el contenido de Material. o los componentes de la solución.

Onda en M2 en comparación con M3
Figura 17: Onda en M2 en comparación con M3

Sobredesplazamiento

El sobredesplazamiento ahora usa un efecto de estiramiento en el borde de los contenedores de desplazamiento. El sobredesplazamiento de estiramiento está activado de forma predeterminada en los elementos componibles de desplazamiento. ejemplo, LazyColumn, LazyRow y LazyVerticalGrid, en Compose Foundation 1.1.0 y versiones posteriores, independientemente del nivel de API.

Sobredesplazamiento con efecto de estiramiento en el borde del contenedor
Figura 18: Sobredesplazamiento con efecto de estiramiento en el borde del contenedor

Accesibilidad

Los estándares de accesibilidad integrados en los componentes de Material están diseñados para brindar un fundamental para el diseño inclusivo de productos. Comprender las características la accesibilidad puede mejorar la usabilidad para todos los usuarios, incluidos aquellos con baja visión, ceguera, discapacidades auditivas, deficiencias cognitivas, motrices deficiencias o discapacidades situacionales (como un brazo roto).

Accesibilidad de color

El color dinámico está diseñado para cumplir con los estándares de accesibilidad relacionados con el contraste de color. El sistema de paletas tonales es fundamental para que cualquier esquema de colores sea accesible de forma predeterminada.

El sistema de colores de Material ofrece valores de tono y medidas estándar que pueden usarse para cumplir con las relaciones de contraste accesibles.

App de ejemplo de Reply: Palés tonales primarios, secundarios y terciarios (de arriba abajo)
Figura 19: App de ejemplo de Reply: Paletas tonales primarias, secundarias y terciarias (de arriba abajo)

Todos los componentes de Material y los temas dinámicos ya usan los roles de color anteriores. a partir de un conjunto de paletas tonos, seleccionadas para satisfacer la accesibilidad y los requisitos de cumplimiento. Sin embargo, si personalizas componentes, asegúrate de usar roles de color adecuados y evitar discrepancias.

Usa el contenedor principal sobre uno principal y el primero sobre el contenedor principal principal-contenedor, y lo mismo para otros colores de acento y neutros para proporcionar y un contraste accesible para el usuario.

El uso de un contenedor terciario además del primario le brinda al usuario botón de contraste:

// ✅ Button with sufficient contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
}

// ❌ Button with poor contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
        contentColor = MaterialTheme.colorScheme.primaryContainer
    )
) {
}

Contraste suficiente (izquierda) en comparación con contraste deficiente (derecha)
Figura 20: Contraste suficiente (izquierda) en comparación con contraste deficiente (derecha)

Accesibilidad de tipografía

La escala de tipo de M3 actualiza el aumento de tipo estático y los valores para ofrecer una representación pero dinámico de categorías de tamaño que escalan a través de dispositivos.

Por ejemplo, en M3, a Display pequeño se le pueden asignar diferentes valores según el contexto del dispositivo, como un teléfono o una tablet.

Pantallas grandes

Material proporciona orientación sobre diseños adaptables y dispositivos plegables para crear tus apps y mejorar la ergonomía de los usuarios que sostienen dispositivos grandes.

Material proporciona diferentes tipos de navegación para ayudarte a para brindar una mejor experiencia del usuario en dispositivos grandes.

Obtén más información sobre los lineamientos de calidad de las apps para pantallas grandes en Android y consulta nuestra muestra de respuesta para obtener un diseño adaptable y accesible.

Más información

Para obtener más información sobre los temas de Material en Compose, consulta lo siguiente: recursos:

Apps de ejemplo

Documentos

Referencia de la API y código fuente

Videos