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 3.1 — Composição Básica de Text e Card com @Composable

Contexto: Composição Básica de Text e Card com @Composable no contexto de Jetpack Compose: @Composable, Previews e Layouts (Column, Row, Box).

Requisitos de Execução:

  1. Criar função @Composable que renderize card com título e subtítulo utilizando Column.

Resultado Esperado

Componente visual Compose renderizado com hierarquia de layouts.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_3_1_SeuNome
  2. Envie na tarefa: Atividade Cap 3 - Jetpack Compose: @Composable, Previews e Layouts (Column, Row, Box)
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CartaoInformativo(titulo: String, descricao: String) {
    Card(modifier = Modifier.padding(16.dp)) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = titulo)
            Text(text = descricao)
        }
    }
}

🔍 Nível 2: Prática

Problema 3.2 — Layouts Horizontais e Verticais com Row, Column e Spacer

Contexto: Layouts Horizontais e Verticais com Row, Column e Spacer no contexto de Jetpack Compose: @Composable, Previews e Layouts (Column, Row, Box).

Requisitos de Execução:

  1. Alinhar ícone e texto horizontalmente com espaçamento uniforme utilizando Row e Arrangement.SpaceBetween.

Resultado Esperado

Linha de layout com alinhamento e distribuição balanceada.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_3_2_SeuNome
  2. Envie na tarefa: Atividade Cap 3 - Jetpack Compose: @Composable, Previews e Layouts (Column, Row, Box)
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui

import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun BarraAcoes(onSalvar: () -> Unit, onCancelar: () -> Unit) {
    Row(
        modifier = Modifier.fillMaxWidth().padding(8.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Button(onClick = onCancelar) { Text("Cancelar") }
        Button(onClick = onSalvar) { Text("Confirmar") }
    }
}

⚡ Nível 3: Integração

Problema 3.3 — Sobreposição e Alinhamento em Camadas com Box

Contexto: Sobreposição e Alinhamento em Camadas com Box no contexto de Jetpack Compose: @Composable, Previews e Layouts (Column, Row, Box).

Requisitos de Execução:

  1. Renderizar badge de notificação sobreposto a um container utilizando Box e Alignment.TopEnd.

Resultado Esperado

Camadas visuais sobrepostas com precisão de coordenadas no Box.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_3_3_SeuNome
  2. Envie na tarefa: Atividade Cap 3 - Jetpack Compose: @Composable, Previews e Layouts (Column, Row, Box)
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun NotificacaoBadgeBox(contador: Int, modifier: Modifier = Modifier) {
    Box(modifier = modifier.size(48.dp)) {
        Box(modifier = Modifier.fillMaxSize().background(Color.LightGray))
        if (contador > 0) {
            Box(
                modifier = Modifier.size(18.dp).background(Color.Red, CircleShape).align(Alignment.TopEnd),
                contentAlignment = Alignment.Center
            ) {
                Text(text = contador.toString(), color = Color.White)
            }
        }
    }
}

🏆 Nível 4: Desafio Corporativo

Problema 3.4 — Componentes com Suporte a @Preview Multi-dispositivo e Modo Escuro

Contexto: Componentes com Suporte a @Preview Multi-dispositivo e Modo Escuro no contexto de Jetpack Compose: @Composable, Previews e Layouts (Column, Row, Box).

Requisitos de Execução:

  1. Configurar anotação @Preview exibindo visualização em tema Claro, Escuro e em dimensões de Tablet.

Resultado Esperado

Previews Compose configurados para validação rápida no Android Studio.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_3_4_SeuNome
  2. Envie na tarefa: Atividade Cap 3 - Jetpack Compose: @Composable, Previews e Layouts (Column, Row, Box)
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui

import android.content.res.Configuration
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Preview(name = "Light Mode", showBackground = true)
@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
fun PreviewCartaoInformativo() {
    MaterialTheme {
        CartaoInformativo(titulo = "Faturamento", descricao = "R$ 45.000,00 neste mes")
    }
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos