Material Design 3 no Compose

O Jetpack Compose oferece uma implementação do Material Design 3, a próxima evolução do Material Design. O Material 3 inclui temas e componentes atualizados, além de recursos de personalização do Material You, como cores dinâmicas, e foi desenvolvido para ser coeso com o novo estilo visual e a interface do sistema no Android 12 e versões mais recentes.

Observação: os termos "Material Design 3", "Material 3" e "M3" são intercambiáveis. A especificação atual do Material Design e a biblioteca androidx.compose.material correspondente são chamadas de "Material Design 2", "Material 2" ou "M2".

Abaixo, demonstramos a implementação do Material Design 3 usando o app de exemplo Reply como exemplo. O exemplo de resposta é baseado inteiramente no Material Design 3.

Figura 1. App de exemplo Reply usando o Material Design 3

Dependência

Para começar a usar o Material 3 no app do Compose, adicione a dependência do Compose Material 3 aos arquivos build.gradle:

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

Depois que a dependência for adicionada, você poderá começar a adicionar sistemas do Material Design, incluindo cores, tipografia e formas, aos seus apps.

APIs experimentais

Algumas APIs do M3 são consideradas experimentais. Nesses casos, vai ser necessário ativar o nível da função ou do arquivo usando a anotação ExperimentalMaterial3Api:

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

Temas do Material Design

Um tema do M3 contém os seguintes subsistemas: esquema de cores, tipografia e formas. Quando você personaliza esses valores, as mudanças são refletidas automaticamente nos componentes do M3 usados para criar o app.

Figura 2. Subsistemas do Material Design: cor, tipografia e formas

O Jetpack Compose implementa esses conceitos com o elemento combinável MaterialTheme do M3:

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

Para aplicar um tema ao conteúdo do app, defina o esquema de cores, a tipografia e as formas específicas do app.

Esquema de cores

A base de um esquema de cores é o conjunto de cinco cores principais. Cada uma dessas cores se relaciona a uma paleta tonal de 13 tons, que são usados pelos componentes do Material 3. Por exemplo, este é o esquema de cores do tema claro para Resposta:

Figura 3. Esquema de cores claras do app de exemplo da Reply

Leia mais sobre o Esquema de cores e funções de cor.

Gerar esquemas de cores

Embora você possa criar um ColorScheme personalizado manualmente, geralmente é mais fácil gerar um usando as cores de origem da sua marca. O Tema do Material Builder permite fazer isso e, opcionalmente, exportar Crie o código de temas. Os seguintes arquivos são gerados:

• Color.kt contém as cores do seu tema com todas as funções definidas para cores de temas claros e escuros.

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)
// ..
// ..
Material3Snippets.kt

• O Theme.kt contém uma configuração para esquemas de cores claras e escuras e o app. 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
    )
}
Material3Snippets.kt

Para oferecer suporte a temas claros e escuros, use isSystemInDarkTheme(). Com base no configuração do sistema, defina qual esquema de cores usar: claro ou escuro.

Esquemas de cores dinâmicas

Cor dinâmica é a parte principal do Material You, em que uma o algoritmo deriva cores personalizadas do plano de fundo de um usuário para e interface do sistema. Essa paleta de cores é usada como ponto de partida para gerar esquemas de cores claras e escuras.

Figura 4. Responda aos temas dinâmicos do app de exemplo usando o plano de fundo (à esquerda) e os temas padrão do app (à direita)

As cores dinâmicas estão disponíveis no Android 12 e em versões mais recentes. Se a cor dinâmica estiver disponível, será possível configurar um ColorScheme dinâmico. Caso contrário, use ao uso de um ColorScheme personalizado claro ou escuro.

O ColorScheme fornece funções do builder para criar um esquema de cores dinâmicas claro ou escuro:

// 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
}
Material3Snippets.kt

Uso de cores

Você pode acessar as cores do tema do Material Design no app via MaterialTheme.colorScheme:

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

Cada função de cor pode ser usada em vários lugares, dependendo do tipo de cor destaque, estado e ênfase.

• A cor primária é a cor de base, usada para componentes principais, como botões em destaque, estados ativos e a tonalidade de superfícies elevadas.
• A cor secundária principal é usada para componentes menos proeminentes na interface, como ícones de filtro, e amplia a oportunidade de expressão de cores.
• A cor terciária principal é usada para derivar as funções de acentos contrastantes que pode ser usado para equilibrar cores primárias e secundárias ou melhorar atenção a um elemento.

O design do app de exemplo do Reply usa a cor do contêiner primário sobre o contêiner primário para dar ênfase ao item selecionado.

Figura 5. Contêiner principal e campos de texto com a cor do contêiner 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,
    )
}
Material3Snippets.kt

Aqui é possível observar, na gaveta de navegação de resposta, como as funções as cores do contêiner são usadas em contraste para criar ênfase e destaque.

Figura 6. Combinação de contêiner terciário e contêiner terciário para o botão de ação flutuante.

Tipografia

O Material Design 3 define uma escala de tipos, incluindo estilos de texto. que foram adaptados do Material Design 2. A nomenclatura e o agrupamento foram simplificados para: display, headline, title, body e label, com tamanhos grandes, médios e pequenos para cada um.

Figura 7. Escala de tipografia padrão do Material Design 3

M3 (link em inglês)	Tamanho da fonte/altura da linha padrão
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

Observação: ao contrário da classe Typography do M2, a classe do Typography do M3 não inclui um parâmetro defaultFontFamily. Nesse caso, você vai precisar usar o parâmetro fontFamily em cada um dos TextStyles individuais.

Definir tipografia

O Compose oferece a classe Typography do M3, assim como a TextStyle e classes relacionadas a fontes: para modelar o tipo do Material 3 escala. O construtor Typography oferece padrões a cada estilo para que você possa omitir os parâmetros que não quiser 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
    ),
    // ..
)
// ..
Material3Snippets.kt

Figura 8. Corpo grande, corpo médio e rótulo médio para diferentes usos de tipografia.

Seu produto provavelmente não vai precisar de todos os 15 estilos padrão da escala de tipografia do Material Design. Neste exemplo, cinco tamanhos são escolhidos para um conjunto reduzido, e o resto é omitido.

Você pode personalizar a tipografia mudando os valores padrão de TextStyle e propriedades relacionadas a fontes, como fontFamily e 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
),
Material3Snippets.kt

Depois de definir o Typography, transmita-o para o MaterialTheme do M3:

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

Usar estilos de texto

É possível recuperar a tipografia fornecida ao elemento combinável MaterialTheme do M3 usando MaterialTheme.typography:

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

Leia mais sobre as diretrizes do Material Design sobre como se inscrever tipografia.

Formas

As superfícies do Material Design podem ser mostradas em diferentes formas. As formas chamam a atenção, identificar componentes, comunicar o estado e expressar a marca.

A escala da forma define o estilo dos cantos do contêiner, oferecendo uma variedade arredondamento de quadrado para totalmente circular.

Definir formas

O Compose oferece à classe Shapes do M3 parâmetros expandidos para oferecer suporte a novas formas do M3. A escala de formas do M3 é mais parecida com a escala de tipos, permitindo um intervalo expressivo de formas em toda a interface.

Há diferentes tamanhos de formas:

• Extrapequena
• Pequeno
• Médio
• Grande
• Extragrande

Cada forma tem um valor padrão, mas é possível substituí-lo:

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

Depois de definir o Shapes, você pode transmiti-lo ao MaterialTheme do M3:

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

Usar formas

É possível personalizar a escala de forma para todos os componentes no MaterialTheme ou por componente.

Aplique formas médias e grandes com valores padrão:

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

Figura 9. Forma média para o card e grande para o botão de ação flutuante no app de exemplo da Reply

Há duas outras formas, RectangleShape e CircleShape, que fazem parte do Compose. A forma retangular não tem um raio de borda, e a forma circular é mostrada totalmente cantos circulares:

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

Os exemplos abaixo demonstram alguns dos componentes com valores de forma padrão aplicadas a elas:

Figura 10. Valores de formas padrão para todos os componentes do Material 3.

Saiba mais sobre as diretrizes do Material Design em aplicar formato.

Ênfase

A ênfase no M3 é fornecida usando variações de cor diferentes. No M3, há duas maneiras de adicionar ênfase à interface:

• Usando superfície, variante de superfície e plano de fundo junto com a superfície, cores das variantes da superfície do sistema de cores expandido do M3. Por exemplo: a superfície pode ser usada com a variante da superfície e a variante de superfície e na superfície para oferecer diferentes níveis de ênfase.

Figura 11. Use combinações de cores neutras para dar ênfase.

• Usar diferentes pesos de fonte para texto. Acima, você viu que pode fornecer pesos personalizados à nossa escala de tipos para fornecer ênfase diferente.

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

Observação: para estados desativados no M3, ainda é aceitável usar "on-x" (em que x podem ser cores primárias, secundárias, de superfície etc.) com valores alfa.

Elevação

O Material 3 representa a elevação usando principalmente sobreposições de cores tonais. Essa é uma nova maneira de distinguir contêineres e superfícies, aumentando a elevação tonal usando um tom mais proeminente, além de sombras.

Figura 12. Elevação de tonalidade com elevação de sombraE

As sobreposições de elevação em temas escuros também mudaram para sobreposições de cores tonais no Material 3. A cor de sobreposição vem do slot de cores principal.

Figura 13. elevação da sombra versus elevação tonal no Material Design 3

A superfície do M3, o elemento combinável por trás da maioria dos componentes do M3, inclui suporte para elevação de tonalidade e sombra:

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

Componentes do Material Design

O Material Design vem com um conjunto rico de componentes do Material Design (como botões, ícones, cards, barra de navegação) que já seguem o Material Theming e ajudam você a criar apps bonitos do Material Design. Você pode começar a usar componentes com propriedades padrão prontas para uso.

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

O M3 oferece muitas versões dos mesmos componentes para serem usadas em diferentes funções de acordo com a ênfase e a atenção.

Figura 14. Botão de ênfase do FAB, principal para o botão de texto

• Um botão de ação flutuante estendido para a ação de maior ênfase:

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

• Um botão preenchido para uma ação de maior ênfase:

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

• Um botão de texto para uma ação de baixa ênfase:

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

Saiba mais sobre os botões e outros componentes (link em inglês) do Material Design. O Material 3 oferece uma ampla variedade de pacotes de componentes, como botões, apps barras, componentes de navegação que são projetados especificamente para diferentes usos capas e tamanhos de tela.

Componentes de navegação

O Material Design também tem vários componentes de navegação que ajudam a implementar navegação, dependendo de diferentes tamanhos e estados de tela.

NavigationBar é usado para dispositivos compactos quando você quer segmentar cinco destinos ou menos:

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

O NavigationRail é usado para tablets ou smartphones de tamanho pequeno a médio em modo paisagem. Ele oferece ergonomia aos usuários e melhora a experiência deles com esses dispositivos.

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

Figura 15. Demonstração de resposta de BottomNavigationBar (à esquerda) e NavigationRail (à direita)

Responda usando os dois em temas padrão para oferecer uma experiência do usuário imersiva para todos e tamanhos de dispositivos móveis.

O NavigationDrawer é usado para tablets de tamanho médio a grande em que você tem espaço suficiente para mostrar detalhes. É possível usar PermanentNavigationDrawer ou ModalNavigationDrawer com NavigationRail.

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

Figura 16. Demonstração de resposta da gaveta de navegação permanente

As opções de navegação melhoram a experiência do usuário, a ergonomia e a acessibilidade. Saiba mais sobre os componentes de navegação do Material Design na Codelab adaptável do Compose.

Personalizar o tema de um componente

O M3 incentiva a personalização e a flexibilidade. Todos os componentes têm cores padrão aplicadas, mas expõem APIs flexíveis para personalizar as cores, se necessário.

A maioria dos componentes, como cards e botões, fornece um objeto padrão que expõe interfaces de cor e elevação que podem ser modificadas para personalizar o 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
}
Material3Snippets.kt

Leia mais sobre como personalizar o Material 3.

IU do sistema

Alguns aspectos do Material You vêm do novo estilo visual e da interface do sistema no Android 12 e versões mais recentes. Duas áreas principais em que há mudanças são ondulação e rolagem. Nenhum trabalho adicional é necessário para implementar essas mudanças.

Ondulação

O Ripple agora usa um brilho sutil para iluminar superfícies quando pressionado. O Compose Material Ripple usa um RippleDrawable da plataforma no Android. Portanto, a ondulação brilhante está disponível no Android 12 e versões mais recentes para todos os componentes do Material Design.

Figura 17. Ondulação no M2 em comparação com o M3

Overscroll

A rolagem agora usa um efeito de alongamento na borda dos contêineres de rolagem. A rolagem esticada é ativada por padrão em elementos combináveis de rolagem do contêiner. Por exemplo, LazyColumn, LazyRow e LazyVerticalGrid: em Compose Foundation 1.1.0 e mais recentes, independente do nível da API.

Figura 18. Overscroll usando o efeito de alongamento na borda do contêiner

Acessibilidade

Os padrões de acessibilidade integrados aos componentes do Material Design foram criados para fornecer uma base para o design de produtos inclusivos. Entender a acessibilidade do seu produto pode melhorar a usabilidade para todos os usuários, incluindo aqueles com baixa visão, cegueira, deficiência auditiva, deficiência cognitiva, deficiência motora ou deficiência situacional (como um braço quebrado).

Acessibilidade colorida

As cores dinâmicas foram projetadas para atender aos padrões de acessibilidade de contraste de cores. O sistema de paletas de tons é fundamental para tornar qualquer esquema de cores acessível por padrão.

O sistema de cores do Material Design fornece valores de tom e medidas padrão que podem ser usado para atender a taxas de contraste acessíveis.

Figura 19. App de exemplo da Reply: paletas tonais primária, secundária e terciária (de cima para baixo)

Todos os componentes do Material Design e temas dinâmicos já usam as funções de cor acima. de um conjunto de paletas tonais selecionadas para atender às necessidades de acessibilidade e cumprimento de requisitos regulatórios. No entanto, se você estiver personalizando componentes, use funções de cor adequadas e evite incompatibilidades.

Use o contêiner principal sobre o primário e o contêiner no primário contêiner principal, e o mesmo para outros destaques e cores neutras, para fornecer contraste acessível ao usuário.

O uso de um contêiner terciário sobre o primário dá ao usuário um botão de baixo 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
    )
) {
}
Material3Snippets.kt

Figura 20. Contraste suficiente (à esquerda) e contraste suficiente (à direita)

Acessibilidade da tipografia

A escala de tipos do M3 atualiza a rampa de tipos estáticos e os valores para oferecer um framework simplificado mas dinâmico de categorias de tamanho que são dimensionadas em todos os dispositivos.

Por exemplo, no M3, a Rede de Display pequena pode receber valores diferentes dependendo no contexto do dispositivo, como um smartphone ou tablet.

Telas grandes

O Material Design oferece orientações sobre layouts adaptáveis e dobráveis para deixar seus apps mais acessível e melhoram a ergonomia de usuários que seguram dispositivos grandes.

O Material Design oferece diferentes tipos de navegação para ajudar você proporcionam uma melhor experiência do usuário em dispositivos grandes.

Saiba mais sobre as diretrizes de qualidade de apps para telas grandes do Android e confira nosso exemplo de resposta para um design adaptável e acessível.

Saiba mais

Para saber mais sobre os temas do Material Design no Compose, confira os links abaixo. recursos:

Apps de exemplo

• App de exemplo Reply no M3

Documentos

• Como migrar do Material 2 para o Material 3 no Compose
• Diretrizes do Material Design

Referência da API e código-fonte

• Referência da API Compose Material 3
• Exemplos do Material 3 do Compose no código-fonte

Vídeos

• Material You no Jetpack Compose