O Jetpack Compose oferece uma implementação do Material Design 3, a próxima evolução do Material Design. O Material 3 inclui temas atualizados, componentes e recursos de personalização do Material You, como cores dinâmicas, e é projetada para ser coesa com o novo estilo visual e a interface do sistema no Android 12 e superiores.
Demonstramos abaixo a implementação do Material Design 3 usando o app de exemplo Reply como exemplo. O exemplo Reply é totalmente baseada no Material Design 3.
Dependência
Para começar a usar o Material 3 no seu app do Compose, adicione o Compose Material 3.
aos seus 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 alterações serão refletidas automaticamente nos componentes do M3 que você usar para criar seu app.
O Jetpack Compose implementa esses conceitos com o MaterialTheme do M3
combinável:
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
Para aplicar um tema ao conteúdo do aplicativo, defina o esquema de cores, a tipografia e formas específicas para seu app.
Esquema de cores
A base de um esquema de cores é o conjunto de cinco cores principais. Cada um desses se relacionam com uma paleta tonal de 13 tons, que são usadas pelo Material 3 componentes de solução. Por exemplo, este é o esquema de cores do tema claro para Resposta:
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.ktcontém as cores do seu tema com todos os papéis definidos para cores de tema claro e escuro.
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 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
)
}
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 o 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, use
ao uso de um ColorScheme personalizado claro ou escuro.
O ColorScheme fornece funções do builder para criar uma light dinâmica ou
esquema de cores 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 do tema do Material Design no 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 tipo de cor destaque, estado e ênfase.
- A cor primária é a base, usada para os componentes principais, como os proeminentes botões, estados ativos e a tonalidade de superfícies elevadas.
- A cor da tecla secundária é usada para componentes menos proeminentes na interface, como como ícones de filtro e aumenta as chances 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 Reply usa a cor do contêiner principal em cima da main-container 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,
)
}
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.
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.
| 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, 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 você 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 do Material Design escala de tipografia. Neste exemplo, cinco tamanhos são escolhidos para um conjunto reduzido, enquanto o restantes são omitidos.
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
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 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 de 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)
)
Depois de definir o Shapes, você pode transmiti-lo ao MaterialTheme do M3:
MaterialTheme(
shapes = replyShapes,
) {
// M3 app Content
}
Usar formas
É possível personalizar a escala da forma para todos os componentes na MaterialTheme ou
isso pode ser feito 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 é mostrada totalmente
cantos circulares:
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Os exemplos abaixo demonstram alguns dos componentes com valores de forma padrão aplicadas a elas:
Leia mais sobre as diretrizes do Material Design sobre como se inscrever forma.
Ênfase
A ênfase no M3 é fornecida usando variações de cor e sua respectiva cor diferentes. No M3, há duas maneiras de dar ê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.
- 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
)
Elevação
O Material 3 representa a elevação usando principalmente sobreposições de cores tonais. Esta é uma nova maneira de diferenciar contêineres e superfícies, aumentando a tonalidade a elevação usa um tom mais proeminente, além das sombras.
As sobreposições de elevação em temas escuros também mudaram para sobreposições de cores tonais em 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 para 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, barra de navegação) que já seguem o Material Design. Criar temas e ajudar você a criar lindos apps do Material Design. Você pode começar a usar componentes com propriedades padrão prontas para uso.
Button(onClick = { /*..*/ }) {
Text(text = "My Button")
}
O M3 oferece muitas versões dos mesmos componentes para uso 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, 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.
A NavigationBar será usada para dispositivos compactos quando você quiser segmentar cinco ou menos
destinos:
NavigationBar(modifier = Modifier.fillMaxWidth()) {
Destinations.entries.forEach { replyDestination ->
NavigationBarItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
O NavigationRail é usado para tablets ou smartphones de tamanho pequeno a médio em
modo paisagem. Fornece ergonomia e melhora a experiência dos usuários
para esses dispositivos.
NavigationRail(
modifier = Modifier.fillMaxHeight(),
) {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
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 = { }
)
}
}) {
}
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 padrões aplicadas a elas, mas expõe APIs flexíveis para personalizar suas cores se obrigatórios.
A maioria dos componentes, como cards e botões, fornece um objeto padrão para exposição de cor e interfaces de elevação que podem ser modificadas para personalizar seu 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.
IU do sistema
Alguns aspectos do Material You vêm do novo estilo visual e da interface do sistema 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 Android, então a ondulação brilhante está disponível no Android 12 e nas versões mais recentes para todo o Material Design. componentes de solução.
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.
Acessibilidade
Os padrões de acessibilidade integrados aos componentes do Material Design foram projetados para oferecer uma para um design de produto inclusivo. Entender as características a acessibilidade pode melhorar a usabilidade para todos os usuários, incluindo aqueles com visão, cegueira, deficiências auditivas, deficiências cognitivas, motor deficiências 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 fornece valores de tom e medidas padrão que podem ser usado 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 às necessidades de acessibilidade e cumprimento de requisitos regulatórios. No entanto, se você for personalizar componentes, certifique-se de usar funções de cor apropriadas e evitar incompatibilidade.
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 uma má botão 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
)
) {
}
Acessibilidade de tipografia
A escala de tipo M3 atualiza a rampa de tipo estático e os valores para oferecer uma abordagem mas dinâmica de categorias de tamanho que se adaptam a vários 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 os apps mais fáceis de usar. 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
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