Android Academy · Aula

Cores e MaterialTheme

Aplique uma tematização consistente.

Cores e MaterialTheme é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.

Cores no Compose

O Compose representa cores com a classe Color. Há valores prontos, como Color.Red e Color.Blue.

Você passa uma Color para parâmetros como a cor de um Text ou um plano de fundo.

Text(
    text = "Hi",
    color = Color.Blue
)

Valores de cores personalizados

Crie qualquer cor a partir de um código hexadecimal usando Color(0xFFRRGGBB). Os dois primeiros dígitos, FF, significam totalmente opaco.

Por exemplo, 0xFF6200EE é uma cor roxa.

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

Cor do plano de fundo

Use o modificador background para pintar atrás de um componente. Adicione padding para que o conteúdo não encoste nas bordas.

A ordem importa: background seguido de padding preenche a área do padding.

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

O que é MaterialTheme?

MaterialTheme é um sistema que mantém as cores, as fontes e as formas do seu aplicativo em um só lugar.

Os componentes leem essas informações para que todo o aplicativo permaneça consistente e fácil de personalizar.

MaterialTheme {
    Text("Themed app")
}

Esquema de cores do tema

O colorScheme do tema fornece funções nomeadas, como primary, secondary e background.

Ler essas funções em vez de usar cores fixas permite alterar a aparência em um único lugar.

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

Primary e onPrimary

Cada cor principal tem uma parceira on para o texto desenhado sobre ela, como onPrimary.

Usar primary como plano de fundo e onPrimary como texto garante um contraste legível.

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

Tipografia do tema

MaterialTheme também armazena estilos de texto em typography, como titleLarge e bodyMedium.

Passe um deles ao estilo de um Text para manter textos consistentes e com tamanho adequado.

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

Esquemas claro e escuro

Você pode criar um esquema com lightColorScheme() ou darkColorScheme() e passá-lo para MaterialTheme.

Alternar entre esquemas permite que seu aplicativo seja compatível com os modos claro e escuro.

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

Personalizando o esquema

Substitua as funções nomeando-as ao criar um esquema. Aqui, primary se torna um tom de azul-petróleo personalizado.

Tudo que lê colorScheme.primary é atualizado automaticamente.

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

Por que usar o tema?

Definir cores diretamente em todos os lugares torna as reformulações trabalhosas. Ler informações de MaterialTheme significa que uma única alteração atualiza todo o aplicativo.

Isso também ajuda na acessibilidade, pois as cores on mantêm um bom contraste.

Superfície e plano de fundo

O componente Surface aplica uma cor de plano de fundo do tema e uma elevação atrás do conteúdo.

É uma maneira simples de dar a um cartão ou tela a cor de base adequada.

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

Verificação rápida

Teste seus conhecimentos sobre cores e temas.

Recapitulação

Você aprendeu a usar a classe Color, cores hexadecimais personalizadas e o modificador background. MaterialTheme reúne colorScheme, typography e shapes.

Ler funções como primary e onPrimary mantém o contraste e a consistência, além de oferecer suporte a esquemas claros ou escuros.

Excelente trabalho ao concluir o curso de estilização!

Perguntas Frequentes

A aula “Cores e MaterialTheme” é grátis?

Sim — o texto completo de “Cores e MaterialTheme” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.

O que vou aprender em “Cores e MaterialTheme”?

Aplique uma tematização consistente. Você pratica Android Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Android Academy?

Nenhuma experiência prévia é necessária. Android Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Cores e MaterialTheme”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Android Academy?

Sim. Cada aula de Android Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Android Academy