XML ou Jetpack Compose, eis a questão

#Android
#UI/UX

Layout XML vs Jetpack Compose

Qual abordagem usar no seu próximo projeto Android?

Robson Lima ● 8 min de leitura ● Android · Kotlin

Se você tá começando no desenvolvimento Android ou já mexeu um pouco, provavelmente se deparou com essa dúvida: devo usar XML ou Jetpack Compose? Ambos servem pra criar telas, mas funcionam de formas bem diferentes. Nesse artigo vou te mostrar como cada um funciona na prática, com código e tudo.

Desenvolvimento com Layout XML

O XML foi a forma padrão de criar interfaces no Android por muitos anos. A ideia é separar a interface (XML) da lógica (Kotlin/Java) em arquivos diferentes. Você desenha a tela num arquivo .xml e conecta os elementos na Activity ou Fragment via código.

Funciona bem, tem muito material na internet, e boa parte dos projetos legados ainda usa essa abordagem. O problema começa quando a UI fica complexa — o XML pode crescer muito e virar um pesadelo de manter.

activity_main.xml

<!-- Um layout simples com um título e um botão -->
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:gravity="center"
  android:padding="24dp">

  <TextView
      android:id="@+id/tvTitle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Olá, Android!"
      android:textSize="24sp"
      android:textStyle="bold" />

  <Button
      android:id="@+id/btnClick"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="16dp"
      android:text="Clique aqui" />

</LinearLayout>

MainActivity.kt

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)

      // Conectando o botão via findViewById
      val button = findViewById<Button>(R.id.btnClick)
      val title  = findViewById<TextView>(R.id.tvTitle)

      button.setOnClickListener {
          title.text = "Você clicou! 🎉"
      }
  }
}

Atenção: O findViewById é antigo e pode lançar exceções em runtime. A maioria dos projetos modernos com XML já usa ViewBinding pra evitar esse problema.

Vantagens

Preview visual da tela no Android Studio
Muito conteúdo e documentação disponível
Curva de aprendizado mais suave pra quem vem do zero
Compatível com projetos mais antigos

Desvantagens

UI e lógica em arquivos separados (mais contexto pra ter em mente)
Código verboso pra layouts complexos
Reuso de componentes é mais trabalhoso
Menor performance em alguns cenários

Desenvolvimento com Jetpack Compose

Jetpack Compose é a abordagem moderna e declarativa pra criar UIs no Android. Em vez de descrever como montar a tela passo a passo, você declara o que a tela deve mostrar com base no estado atual. A UI se atualiza automaticamente quando o estado muda — sem precisar manipular Views manualmente.

Tudo é Kotlin puro, tudo no mesmo lugar. Componentes são funções anotadas com @Composable, e você pode combinar e reutilizar com muito mais facilidade do que no XML.

MainScreen.kt — Compose

// O mesmo exemplo do XML, agora em Compose
@Composable
fun MainScreen() {
  // Estado reativo — quando muda, a UI atualiza sozinha
  var title by remember { mutableStateOf("Olá, Android!") }

  Column(
      modifier = Modifier
          .fillMaxSize()
          .padding(24.dp),
      horizontalAlignment = Alignment.CenterHorizontally,
      verticalArrangement = Arrangement.Center
  ) {
      Text(
          text = title,
          fontSize = 24.sp,
          fontWeight = FontWeight.Bold
      )

      Spacer(modifier = Modifier.height(16.dp))

      Button(onClick = { title = "Você clicou! 🎉" }) {
          Text("Clique aqui")
      }
  }
}

// Reutilizando componentes fica simples assim:
@Composable
fun MyButton(label: String, onClick: () -> Unit) {
  Button(
      onClick = onClick,
      shape = RoundedCornerShape(12.dp),
      colors = ButtonDefaults.buttonColors(
          containerColor = MaterialTheme.colorScheme.primary
      )
  ) {
      Text(label)
  }
}

💡 Perceba que não existe arquivo XML. Todo o layout, estado e interações estão em Kotlin. O remember garante que o estado sobrevive a recomposições, e o mutableStateOf dispara a atualização da UI automaticamente.

Principais atributos e modificadores

// Modifier — equivalente aos atributos XML, mas em cadeia
Box(
  modifier = Modifier
      .fillMaxWidth()          // match_parent
      .height(120.dp)          // layout_height
      .padding(16.dp)          // padding
      .background(            // background color
          Color.Blue,
          shape = RoundedCornerShape(8.dp)
      )
      .clickable { /* ação */ }
) {
  Text(
      text = "Card interativo",
      color = Color.White,
      style = MaterialTheme.typography.titleMedium,
      modifier = Modifier.align(Alignment.Center)
  )
}

Critério XML Compose

Linguagem XML + Kotlin/Java Kotlin puro

Reatividade Manual (observers, LiveData) Nativa (State, recomposição)

Reuso de componentes Trabalhoso (custom views, includes) Simples (@Composable functions)

Curva de aprendizado Mais suave Requer mudar o mindset

Mercado (2024+) Legado / manutenção Novos projetos

Gostou do conteúdo?

Me segue nas redes pra não perder os próximos artigos sobre Android, Kotlin e arquitetura mobile.

GitHub ● LinkedIn

#Android #JetpackCompose #Kotlin

● Ilustração por Leonardo.ai, Artigo por Claude.ai com revisão humana