Como criar um app Android com Jetpack Compose

Se você está começando no desenvolvimento Android em 2025, aprender Jetpack Compose é um passo essencial. O Jetpack Compose é o framework oficial do Google para construção de interfaces modernas no Android, baseado em Kotlin e com foco em produtividade, reatividade e código limpo.

Neste tutorial, você vai aprender como criar seu primeiro app Android com Jetpack Compose, configurar o ambiente e entender os conceitos fundamentais — tudo otimizado para mecanismos de busca e para te ajudar a ranquear bem com seu conteúdo técnico.

📌 O que é o Jetpack Compose?

O Jetpack Compose é um toolkit declarativo para criar interfaces de usuário no Android usando Kotlin. Ao invés de trabalhar com XML, você escreve tudo em código Kotlin, o que reduz a complexidade e melhora a manutenção.

🧰 Pré-requisitos para começar

Antes de tudo, você vai precisar de:

• Android Studio Hedgehog ou superior (recomendado: Android Studio Koala)

• SDK mínimo Android 8 (API 26)

• Conhecimentos básicos em Kotlin (mas não obrigatórios)

🛠 Passo a Passo: Criando um App com Jetpack Compose

✅ 1. Crie um novo projeto no Android Studio

1. Abra o Android Studio

2. Clique em New Project

3. Escolha o template “Empty Compose Activity”

4. Defina o nome do app e o pacote

5. Selecione a linguagem Kotlin e o mínimo SDK desejado (API 26 ou superior)

6. Finalize e aguarde a criação do projeto

✅ 2. Estrutura inicial do projeto

Ao criar o projeto com Compose, você verá algo assim no MainActivity.kt:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Jetpack Compose")
                }
            }
        }
    }
}

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

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

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Você clicou $count vezes")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { count++ }) {
            Text("Clique aqui")
        }
    }
}

Button(onClick = { count++ }) {
    Icon(Icons.Default.Add, contentDescription = "Adicionar")
    Spacer(Modifier.width(8.dp))
    Text("Adicionar")
}

@Preview(showBackground = true)
@Composable
fun CounterAppPreview() {
    MyAppTheme {
        CounterApp()
    }
}