Android Academy · Aula

Temas e estilos

Defina Styles reutilizáveis para widgets e Themes para seu aplicativo. Configure funções de cor do Material 3, escala tipográfica, fontes personalizadas e modo escuro.

Temas e estilos é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 2 de 5. 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 5 aulas no total.

Estilos e temas

Dois conceitos frequentemente confundidos:

Estilo — conjunto de atributos de uma visualização aplicado a um único widget (por exemplo, tamanho do texto, cor e preenchimento). Definido com style="@style/MyButton".
Tema — conjunto de atributos semânticos aplicado a uma Activity ou ao app. As visualizações consultam os atributos do tema com ?attr/colorPrimary.

Definindo um estilo

Crie estilos em res/values/styles.xml. Os estilos podem herdar de um pai:

<!-- res/values/styles.xml -->
<resources>
    <style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
        <item name="android:textColor">@color/on_surface</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
    </style>

    <style name="PrimaryButton" parent="Widget.Material3.Button">
        <item name="android:paddingHorizontal">24dp</item>
        <item name="cornerRadius">8dp</item>
    </style>
</resources>

<!-- Using a style in XML: -->
<TextView
    style="@style/TitleText"
    android:text="Hello!" />

Definindo um tema

Os temas herdam de um pai do Material 3 e substituem atributos de cor e forma:

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Color -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorOnPrimary">@color/on_primary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorBackground">@color/background</item>

        <!-- Typography -->
        <item name="textAppearanceBodyMedium">@style/BodyMedium</item>

        <!-- Shape -->
        <item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
    </style>
</resources>

Sistema de cores do Material 3

O Material 3 usa funções semânticas de cor em vez de valores hexadecimais brutos. Principais funções:

colorPrimary — cor principal da marca
colorOnPrimary — texto e ícones sobre o plano de fundo primário
colorSecondary — cor de destaque
colorSurface — planos de fundo de cartões e folhas
colorError — estados de erro
colorBackground — plano de fundo da janela

Recursos de cor

Defina as cores em res/values/colors.xml:

<!-- res/values/colors.xml -->
<resources>
    <color name="primary">#6750A4</color>
    <color name="on_primary">#FFFFFF</color>
    <color name="secondary">#625B71</color>
    <color name="on_secondary">#FFFFFF</color>
    <color name="surface">#FFFBFE</color>
    <color name="background">#FFFBFE</color>
    <color name="error">#B3261E</color>
</resources>

Tema escuro

Os temas DayNight do Material 3 gerenciam automaticamente o modo escuro. Adicione uma variante noturna para as cores:

<!-- res/values-night/colors.xml  (night override) -->
<resources>
    <color name="primary">#D0BCFF</color>
    <color name="on_primary">#381E72</color>
    <color name="surface">#1C1B1F</color>
    <color name="background">#1C1B1F</color>
</resources>

// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)   // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)    // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // auto

Tipografia

O Material 3 define uma escala tipográfica. Use os atributos textAppearance para manter o texto consistente:

<TextView
    android:textAppearance="?attr/textAppearanceDisplayLarge"
    android:text="Big Title" />

<TextView
    android:textAppearance="?attr/textAppearanceHeadlineMedium"
    android:text="Section Header" />

<TextView
    android:textAppearance="?attr/textAppearanceBodyMedium"
    android:text="Body text content here" />

<TextView
    android:textAppearance="?attr/textAppearanceLabelSmall"
    android:text="Caption" />

Fontes personalizadas

Adicione uma fonte a res/font/ e faça referência a ela no seu tema ou estilo:

<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400"
          app:font="@font/roboto_regular" />
    <font app:fontStyle="normal" app:fontWeight="700"
          app:font="@font/roboto_bold" />
</font-family>

<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
    <item name="android:fontFamily">@font/my_font</item>
</style>

Aplicando um tema a uma Activity

Defina o tema em AndroidManifest.xml. Você pode usar um tema diferente por Activity:

<!-- AndroidManifest.xml -->
<application
    android:theme="@style/Theme.MyApp">

    <!-- Different theme for splash screen -->
    <activity
        android:name=".SplashActivity"
        android:theme="@style/Theme.MyApp.Splash" />

    <activity
        android:name=".MainActivity" />
</application>

Lendo atributos do tema no código

Acesse qualquer atributo do tema no código Kotlin durante a execução:

fun getColorFromTheme(context: Context, attrResId: Int): Int {
    val typedValue = TypedValue()
    context.theme.resolveAttribute(attrResId, typedValue, true)
    return typedValue.data
}

// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)

Material Theme Builder

Use o Material Theme Builder (m3.material.io/theme-builder) para gerar um esquema completo de cores do Material 3 a partir da cor da sua marca. Ele exporta arquivos XML prontos para uso em colors.xml e themes.xml. Esta é a maneira mais rápida de obter um sistema de design consistente.

Verificação rápida

Qual é a principal diferença entre um Style e um Theme no Android?

Recapitulação: temas e estilos

O design consistente começa aqui:

Estilos — atributos no nível do widget, reutilizáveis em várias visualizações
Temas — atributos no nível do app ou da Activity, com funções semânticas de cor
Funções de cor do Material 3: colorPrimary, colorSurface, colorError etc.
Modo escuro com values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM
Escala tipográfica por meio dos atributos textAppearance
Use o Material Theme Builder para gerar esquemas de cores rapidamente

A seguir: desenhando visualizações personalizadas do zero.

Perguntas Frequentes

A aula “Temas e estilos” é grátis?

Sim — o texto completo de “Temas e estilos” é 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 5 aulas no total.

O que vou aprender em “Temas e estilos”?

Defina Styles reutilizáveis para widgets e Themes para seu aplicativo. Configure funções de cor do Material 3, escala tipográfica, fontes personalizadas e modo escuro. 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 2 de 5.

Quanto tempo leva a aula “Temas e estilos”?

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