O Jetpack Compose oferece uma implementação do Material Design 3, a próxima evolução do Material Design. O Material 3 inclui temas, componentes e recursos de personalização atualizados do Material You, como cores dinâmicas, e foi projetado para ser coeso com o novo estilo visual e a interface do sistema no Android 12 e versões mais recentes.
Demonstramos abaixo a implementação do Material Design 3 usando o app de exemplo Reply (link em inglês). O exemplo Reply é baseado totalmente no Material Design 3.
Dependência
Para começar a usar o Material 3 no app 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 cor, tipografia e forma, 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
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
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 seu app.
O Jetpack Compose implementa esses conceitos com o elemento combinável MaterialTheme
do M3:
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
Para aplicar um tema ao conteúdo do app, defina o esquema de cores, a tipografia e as formas específicas dele.
Esquema de cores
A base de um esquema de cores é o conjunto de cinco cores principais. Cada uma dessas cores está relacionada a uma paleta de tons de 13 tons, que são usados pelos componentes do Material 3. Por exemplo, este é o esquema de cores do tema claro para 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. A ferramenta Material Theme
Builder permite fazer isso e, como opção, exportar
o código de temas do Compose. Os seguintes arquivos são gerados:
- O
Color.ktcontém as cores do seu tema, com todos os papéis definidos para cores 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) // .. // ..
- O
Theme.ktcontém uma configuração para esquemas de cores claras e escuras e o tema do app.
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 oferecer suporte a temas claros e escuros, use isSystemInDarkTheme(). Com base na
configuração do sistema, defina qual esquema de cores usar: claro ou escuro.
Esquemas de cores dinâmicas
A cor dinâmica é a parte principal do Material You, em que um algoritmo deriva cores personalizadas do plano de fundo de um usuário para ser aplicado aos apps e à interface do sistema. Essa paleta de cores é usada como ponto de partida para gerar esquemas de cores claras e escuras.
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, volte
a usar um ColorScheme claro ou escuro personalizado.
ColorScheme fornece funções do builder para criar um esquema de cores dinâmico 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
}
Uso de cores
Você pode acessar as cores de tema do Material Design no seu app via
MaterialTheme.colorScheme:
Text(
text = "Hello theming",
color = MaterialTheme.colorScheme.primary
)
Cada função de cor pode ser usada em vários lugares, dependendo do estado, destaque e ênfase do componente.
- 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 da chave secundária é usada para componentes menos proeminentes na interface, como ícones de filtro, e expande a oportunidade para expressão de cores.
- A cor terciária principal é usada para derivar os papéis de tons contrastantes que podem ser usados para equilibrar cores primárias e secundárias ou dar atenção aprimorada a um elemento.
O design do app de exemplo Reply usa a cor do contêiner principal sobre o contêiner principal para enfatizar o item selecionado.
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,
)
}
Na gaveta de navegação da resposta, é possível observar como as cores secundárias e terciárias do contêiner são usadas em contraste para criar ênfase e destaque.
Tipografia
O Material Design 3 define uma escala de tipos (link em inglês), 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.
| 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 |
Definir tipografia
O Compose oferece a classe Typography do M3, além das classes
TextStyle e relacionadas a fontes já existentes, para modelar a escala de tipo
do Material 3. 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
),
// ..
)
// ..
Seu produto provavelmente não vai precisar de todos os 15 estilos padrão da escala de tipo do Material Design. Neste exemplo, cinco tamanhos são escolhidos para um conjunto reduzido, enquanto o restante é 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
),
Depois de definir o Typography, transmita-o ao MaterialTheme do M3:
MaterialTheme(
typography = replyTypography,
) {
// M3 app Content
}
Usar estilos de texto
É possível extrair 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
)
Leia mais sobre as diretrizes do Material Design sobre como aplicar tipografia (link em inglês).
Formas
As superfícies do Material Design podem ser mostradas em diferentes formas. As formas direcionam a atenção, identificam componentes, comunicam o estado e expressam a marca.
A escala da forma define o estilo dos cantos do contêiner, oferecendo um intervalo de arredondamento de quadrado a 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édia
- 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)
)
Depois de definir o Shapes, você pode transmiti-lo ao MaterialTheme do M3:
MaterialTheme(
shapes = replyShapes,
) {
// M3 app Content
}
Usar formas
Você pode personalizar a escala da forma para todos os componentes no MaterialTheme ou
fazer isso por componente.
Aplique formas média e grande com valores padrão:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
shape = MaterialTheme.shapes.large,
onClick = {
}
) {
/* fab content */
}
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 mostra as bordas circulares completas:
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Os exemplos abaixo demonstram alguns dos componentes com valores de forma padrão aplicados a eles:
Leia mais sobre as diretrizes do Material Design sobre como aplicar formas (link em inglês).
Ênfase
A ênfase no M3 é fornecida usando variações de cor e suas combinações de cores. No M3, há duas maneiras de dar ênfase à interface:
- Usando superfície, variante de superfície e plano de fundo junto com as cores da superfície, variantes da superfície do sistema de cores expandido do M3. Por exemplo, a superfície pode ser usada com a variante de superfície, e a variante de superfície pode ser usada com a superfície para fornecer diferentes níveis de ênfase.
- Usar diferentes pesos de fonte para texto. Acima, você viu que pode fornecer pesos personalizados para nossa escala de tipografia para dar uma ênfase diferente.
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
Elevação
O Material 3 representa a elevação usando principalmente sobreposições de cores tonais. Essa é uma nova maneira de diferenciar contêineres e superfícies, aumentando a elevação tonal com um tom mais proeminente, além de sombras.
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.
A Superfície do M3, o elemento combinável por trás da maioria dos componentes do M3, inclui suporte à elevação de tonalidade e sombra:
Surface(
modifier = Modifier,
tonalElevation = /*...
shadowElevation = /*...
) {
Column(content = content)
}
Componentes do Material Design
O Material Design vem com um conjunto avançado de componentes do Material Design, como botões, ícones, cards e barra de navegação, que já seguem os temas do Material e ajudam você a criar apps incríveis desse sistema. Você pode começar a usar componentes com propriedades padrão pronto para uso.
Button(onClick = { /*..*/ }) {
Text(text = "My Button")
}
O M3 oferece muitas versões dos mesmos componentes para serem usadas em diferentes papéis, de acordo com a ênfase e a atenção.
- 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),
)
}
- Um botão preenchido para uma ação de alta ênfase:
Button(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.view_entry))
}
- Um botão de texto para uma ação de baixa ênfase:
TextButton(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.replated_articles))
}
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, barras de apps e componentes de navegação projetados especificamente para diferentes casos de uso e tamanhos de tela.
Componentes de navegação
O Material Design também oferece vários componentes que ajudam a implementar a navegação, dependendo de diferentes tamanhos e estados de tela.
NavigationBar é usado para dispositivos compactos quando você quer segmentar cinco ou menos
destinos:
NavigationBar(modifier = Modifier.fillMaxWidth()) {
Destinations.entries.forEach { replyDestination ->
NavigationBarItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
A NavigationRail é usada para tablets ou smartphones de tamanho pequeno a médio no
modo paisagem. Ele oferece ergonomia e melhora a experiência dos usuários
nesses dispositivos.
NavigationRail(
modifier = Modifier.fillMaxHeight(),
) {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
BottomNavigationBar (à esquerda) e NavigationRail (à direita)Responda usando os dois no tema padrão para oferecer uma experiência do usuário imersiva em todos os tamanhos de dispositivo.
A NavigationDrawer é usada em tablets de tamanho médio a grande em que há
espaço suficiente para mostrar detalhes. Você pode usar PermanentNavigationDrawer ou
ModalNavigationDrawer com NavigationRail.
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { },
label = { }
)
}
}) {
}
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 no 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 expondo cores e interfaces de 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
}
Leia mais sobre como personalizar o Material 3.
interface 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 alterações.
Ondulação
O Ripple agora usa um brilho sutil para iluminar superfícies quando pressionado. O Compose Material Ripple usa um RippleDrawable de plataforma internamente no Android. Portanto, a ondulação brilhante está disponível no Android 12 e em versões mais recentes para todos os componentes do Material Design.
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, no
Compose Foundation 1.1.0 e versões mais recentes, independente do nível da API.
Acessibilidade
Os padrões de acessibilidade integrados aos componentes do Material Design foram projetados 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ências cognitivas, deficiências motoras ou deficiências situacionais (como um braço quebrado).
Acessibilidade colorida
As cores dinâmicas foram projetadas para atender aos padrões de acessibilidade para 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 oferece valores e medidas de tom padrão que podem ser usados para atender a taxas de contraste acessíveis.
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 aos requisitos de acessibilidade. No entanto, se você estiver personalizando componentes, use as funções de cor adequadas e evite incompatibilidades.
Use as cores não primárias sobre a primária e os contêineres principais sobre o primário. O mesmo para outros destaques e cores neutras permite oferecer um contraste acessível ao usuário.
O uso de um contêiner terciário sobre o primário oferece 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
)
) {
}
Acessibilidade da tipografia
A escala de tipo do M3 atualiza a rampa de tipo estático e os valores para oferecer um framework simplificado, mas dinâmico, de categorias de tamanho que podem ser dimensionadas para todos os dispositivos.
Por exemplo, no M3, a tela pequena pode receber valores diferentes dependendo do contexto do dispositivo, como um smartphone ou tablet.
Telas grandes
O Material Design oferece orientações sobre layouts adaptáveis e dobráveis para tornar seus apps acessíveis e melhorar a ergonomia de usuários que seguram dispositivos grandes.
O Material Design oferece diferentes tipos de navegação para ajudar você a oferecer uma experiência do usuário melhor em dispositivos grandes.
Saiba mais sobre as diretrizes de qualidade de apps para telas grandes do Android e consulte 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 recursos abaixo:
Apps de exemplo
Documentos
Referência da API e código-fonte
Vídeos
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Migrar do Material 2 para o Material 3 no Compose
- Material Design 2 no Compose
- Sistemas de design personalizados no Compose