Instruções Gerais:

  • Resolva as atividades em ordem progressiva de maturidade.
  • Cada nível adiciona requisitos técnicos, tratamento de erros e casos de borda reais.
  • Consulte o gabarito comentado ao final de cada questão para autoavaliação.

🎯 Nível 1: Fundamentos

Problema 5.1 — Configuração de ColorScheme do Material Design 3

Contexto: Configuração de ColorScheme do Material Design 3 no contexto de Material Design 3 (M3), Temas Dinâmicos (Dark/Light) e Tipografia.

Requisitos de Execução:

  1. Definir paletas de cores lightColorScheme e darkColorScheme para o tema corporativo.

Resultado Esperado

Esquema de cores M3 configurado com tons primários e secundários.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_5_1_SeuNome
  2. Envie na tarefa: Atividade Cap 5 - Material Design 3 (M3), Temas Dinâmicos (Dark/Light) e Tipografia
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui.theme

import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.ui.graphics.Color

val DarkColorScheme = darkColorScheme(
    primary = Color(0xFF90CAF9),
    secondary = Color(0xFF80CBC4),
    background = Color(0xFF121212)
)

val LightColorScheme = lightColorScheme(
    primary = Color(0xFF1976D2),
    secondary = Color(0xFF00796B),
    background = Color(0xFFFAFAFA)
)

🔍 Nível 2: Prática

Problema 5.2 — Suporte a Dynamic Color do Android 12+ (Material You)

Contexto: Suporte a Dynamic Color do Android 12+ (Material You) no contexto de Material Design 3 (M3), Temas Dinâmicos (Dark/Light) e Tipografia.

Requisitos de Execução:

  1. Implementar AppTheme que ative dynamicLightColorScheme quando suportado pelo hardware.

Resultado Esperado

Tema dinâmico Material You integrado com fallback para dispositivos legados.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_5_2_SeuNome
  2. Envie na tarefa: Atividade Cap 5 - Material Design 3 (M3), Temas Dinâmicos (Dark/Light) e Tipografia
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui.theme

import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val context = LocalContext.current
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    MaterialTheme(colorScheme = colorScheme, content = content)
}

⚡ Nível 3: Integração

Problema 5.3 — Tipografia Customizada com Google Fonts e Escala M3

Contexto: Tipografia Customizada com Google Fonts e Escala M3 no contexto de Material Design 3 (M3), Temas Dinâmicos (Dark/Light) e Tipografia.

Requisitos de Execução:

  1. Configurar Typography com fontes corporativas aplicando bodyLarge, titleMedium e headlineSmall.

Resultado Esperado

Escala tipográfica corporativa configurada no tema Compose.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_5_3_SeuNome
  2. Envie na tarefa: Atividade Cap 5 - Material Design 3 (M3), Temas Dinâmicos (Dark/Light) e Tipografia
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui.theme

import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

val AppTypography = Typography(
    headlineSmall = TextStyle(
        fontFamily = FontFamily.SansSerif,
        fontWeight = FontWeight.Bold,
        fontSize = 24.sp
    ),
    bodyLarge = TextStyle(
        fontFamily = FontFamily.SansSerif,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
)

🏆 Nível 4: Desafio Corporativo

Problema 5.4 — Componentes Customizados com MaterialTheme.shapes e Elevation

Contexto: Componentes Customizados com MaterialTheme.shapes e Elevation no contexto de Material Design 3 (M3), Temas Dinâmicos (Dark/Light) e Tipografia.

Requisitos de Execução:

  1. Criar container de cartão corporativo respeitando cantos arredondados e elevação tonal do M3.

Resultado Esperado

Componente corporativo com identidade visual consistente e acessível.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_5_4_SeuNome
  2. Envie na tarefa: Atividade Cap 5 - Material Design 3 (M3), Temas Dinâmicos (Dark/Light) e Tipografia
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui

import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CartaoCorporativoElevado(conteudo: String) {
    Card(
        shape = RoundedCornerShape(12.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant),
        modifier = Modifier.padding(12.dp)
    ) {
        Text(text = conteudo, modifier = Modifier.padding(16.dp))
    }
}