Jetpack Compose no Android: guia completo para iniciantes e intermediários

03/03/2026 Alexandre

O que é Jetpack Compose?

Jetpack Compose é o toolkit moderno do Android para construção de interfaces declarativas. Ele substitui o XML tradicional e simplifica a criação de UI.

UI declarativa
Menos código
Maior produtividade
Melhor integração com Kotlin

1️⃣ Ativando Compose no projeto

No build.gradle (Module):

buildFeatures {
    compose true
}

composeOptions {
    kotlinCompilerExtensionVersion = "1.5.14"
}

implementation "androidx.compose.ui:ui:1.6.7"
implementation "androidx.compose.material3:material3:1.2.1"
implementation "androidx.activity:activity-compose:1.9.0"

2️⃣ Criando seu primeiro Composable

@Composable
fun Greeting(name: String) {
    Text(text = "Olá, $name!")
}

Chamando na Activity:

setContent {
    Greeting("Android")
}

3️⃣ Layout com Column e Row

@Composable
fun SimpleLayout() {
    Column {
        Text("Título")
        Button(onClick = {}) {
            Text("Clique aqui")
        }
    }
}

4️⃣ Trabalhando com State

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text("Contador: $count")
        Button(onClick = { count++ }) {
            Text("Incrementar")
        }
    }
}

Quando o estado muda, ocorre recomposição automática.

5️⃣ Integração com ViewModel

@Composable
fun UserScreen(viewModel: UserViewModel = viewModel()) {

    val users by viewModel.users.collectAsState()

    LazyColumn {
        items(users) { user ->
            Text(user.name)
        }
    }
}

Compose integra perfeitamente com:

Flow
StateFlow
MVVM

6️⃣ Navegação no Compose

implementation "androidx.navigation:navigation-compose:2.7.7"

Exemplo básico:

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen() }
    composable("detail") { DetailScreen() }
}

Compose vs XML tradicional

XML	Compose
Imperativo	Declarativo
Mais arquivos	Menos arquivos
Mais boilerplate	Mais limpo

Makrosites