PDF - VERSÃO DE IMPRESSÃO

Lição 5 - Componentes visuais de interface com o usuário

objetivo

Olá, estudante! Tudo bem? Você já explorou os conceitos de componentes visuais tradicionais no desenvolvimento Android usando XML. Agora, vamos nos aprofundar em uma abordagem moderna e declarativa: o Jetpack Compose. Esse framework simplifica a criação de interfaces do usuário no Android utilizando Kotlin para definir layouts de forma concisa e dinâmica.

Assim, os objetivos desta lição são apresentar as principais vantagens e características do Jetpack Compose, demonstrando como ele revoluciona a construção de interfaces, e oferecer exemplos práticos para que você comece a utilizá-lo em seus projetos. Ao final desta lição, você estará apto(a) a implementar componentes visuais no Compose e compreender como essa ferramenta pode otimizar o desenvolvimento de aplicativos modernos.

Vamos lá?

problematização

Você já parou para pensar em como o uso do Jetpack Compose poderia otimizar seus projetos no dia a dia? Para compreendermos como isso acontece, considere que você precisa criar uma interface dinâmica, interativa e altamente personalizada. Usar layouts baseados em XML pode funcionar, concorda? Contudo, o processo frequentemente envolveria alternar diferentes arquivos, gerenciar referências manualmente e lidar com mudanças que podem se tornar complicadas à medida que o projeto cresce. Além disso, adicionar elementos interativos e garantir que a interface responda a mudanças no estado do aplicativo pode gerar um código mais extenso e propenso a erros.

Nesse cenário, o Jetpack Compose seria essencial, visto que ele foi criado justamente para resolver esses problemas. Esse framework substitui o modelo tradicional baseado em XML por uma abordagem declarativa, permitindo que você crie interfaces diretamente no Kotlin. Com ele, você escreve menos código, evita redundâncias e facilita a personalização e a manutenção da interface.

Interessante, não é mesmo? Agora, vamos compreender um pouco mais afundo como isso acontece na prática!

case

Agora que você já sabe o quanto é importante aprender o assunto da lição de hoje, vamos estudar uma situação em que o tema é usado?

A startup fictícia chamada DesignFlow foi contratada para desenvolver um aplicativo Android de gestão de tarefas. A principal solicitação foi que a interface fosse moderna, responsiva e altamente personalizável para atender às expectativas dos usuários. Durante a análise inicial, a equipe percebeu que, ao utilizar layouts tradicionais baseados em XML, o desenvolvimento se tornaria mais complexo, pois seria preciso alternar constantemente entre os arquivos XML e o código Kotlin, além de dificultar a implementação de mudanças em tempo real e a integração com estados dinâmicos da aplicação.

Para enfrentar esses desafios, a equipe optou por adotar o Jetpack Compose como framework principal para construir a interface. Essa abordagem permitiu criar telas de forma declarativa, utilizando apenas Kotlin, eliminando a necessidade de arquivos XML separados e reduzindo a verbosidade do código. Com o Compose, você conseguiu implementar rapidamente listas dinâmicas que se adaptam ao estado da aplicação e botões interativos que respondem a ações do usuário, tudo de forma fluida e integrada.

O resultado foi um aplicativo com uma interface leve, moderna e altamente flexível, que não apenas atendeu às expectativas da equipe, mas também reduziu significativamente o tempo necessário para ajustes e personalizações futuras. A experiência de desenvolvimento foi mais eficiente e o produto final entregou uma experiência superior aos usuários.

Logo, o caso apresentado demonstra como o uso de ferramentas modernas, como o Jetpack Compose, pode otimizar o desenvolvimento de componentes visuais de interface com o usuário. A situação apresentada destaca a transição de layouts tradicionais para uma abordagem declarativa, simplificando a criação, a personalização e a integração de interfaces dinâmicas, fundamentais para uma experiência moderna e responsiva.

Vamos nos aprofundar nesse assunto?

Conceitualização

O Jetpack Compose é o framework oficial da Google para a construção de interfaces no Android e é baseado em uma abordagem declarativa. Kunneth (2023) o define como um framework declarativo de interface do usuário da Google para Android que simplifica drasticamente a criação de interfaces de usuários para aplicativos Android. Diferentemente do modelo tradicional, que usa XML para definir layouts, o Compose permite que você escreva toda a interface diretamente em Kotlin.

O framework foi introduzido pela Google em 2019 como uma alternativa moderna e eficiente ao modelo tradicional de desenvolvimento de interfaces no Android baseado em XML (Alves, 2021). Ele surgiu como uma resposta à necessidade de simplificar a criação de interfaces, tornando-as mais intuitivas e menos propensas a erros. A ideia central é permitir que desenvolvedores escrevam interfaces de usuário diretamente no Kotlin, reduzindo a dependência de XML e promovendo um design mais dinâmico e reativo.

As características principais do Jetpack Compose são:

Declaração simplificada: crie interfaces definindo o estado da UI, sem a necessidade de gerenciar alterações manuais.
Totalmente integrado ao Kotlin: aproveite todo o poder da linguagem para criar componentes dinâmicos e reutilizáveis.
Interoperabilidade com layouts tradicionais: o Compose pode coexistir com layouts XML em um mesmo projeto, permitindo transições suaves.
Flexibilidade e produtividade: menos código, mais controle e personalização.

Como funciona o Jetpack Compose?

No Compose, os componentes visuais são chamados de composables. Kunneth (2023) indica que uma função “Composable” é facilmente identificada pela anotação @Composable, que define o comportamento e a aparência de um elemento da interface. Cada elemento no Compose é um composable, uma função Kotlin que pode ser facilmente reutilizada em várias partes do aplicativo. De maneira geral, isso incentiva práticas de desenvolvimento modular, em que interfaces complexas são compostas por pequenos componentes reutilizáveis. Visualize, na Figura 1, um exemplo de composable.

Figura 1 - Componente de interface do usuário em Compose
Fonte: o autor.

#PraCegoVer: na linha 1, temos: import androidx.compose.foundation.layout*; na linha 2, temos import android.compose.material3.*; na linha 3, temos import android.compose.runtime.*; na linha 4, temos import android.compose.ui.Modifier; na linha 5, temos import android.compose.ui.unit.dp; na linha 7, @Composable; na linha 8, fun MyApp() {; na linha 9, var count by remember { mutableStateOf(0) }; na linha 11, Column(; na linha 12, modifier = Modifier.padding(16.dp); na linha 13, ) {; na linha 14, Text(text = “Contagem: $count”); na linha 15, Button(; na linha 16, onClick = { count++ },; na linha 17, modifer = Modifier.padding(top = 8.dp); na linha 18, ) {; na linha 19, Text(text = “Incrementar”); na linha 20, }; na linha 21, }; na linha 22, }. Nas linhas 6 e 10, não há conteúdo escrito.

Vantagens do Compose sobre XML

Antes de explorarmos as vantagens específicas, é importante destacarmos como o Jetpack Compose supera as limitações dos layouts tradicionais baseados em XML. No modelo convencional, criar interfaces no Android pode ser um processo verboso e fragmentado, dado que o desenvolvedor precisa alternar entre arquivos XML e o código Kotlin para gerenciar os componentes visuais. Além disso, a integração de estados dinâmicos, como listas atualizáveis ou botões interativos, exige lógica adicional e maior esforço de manutenção.

De acordo com Kunneth (2023), todo o código do Compose deve ser escrito em Kotlin, oferecendo uma abordagem declarativa que simplifica o desenvolvimento. Isso não apenas reduz a complexidade, mas também permite maior flexibilidade e rapidez na personalização de layouts. O Compose transforma a forma como criamos e gerenciamos UIs, tornando o processo mais intuitivo, produtivo e alinhado com as necessidades modernas de design.

Essa é uma das maiores mudanças trazidas pelo Compose: a substituição do modelo imperativo (XML) por um modelo declarativo. No modelo imperativo, o desenvolvedor especifica como a interface deve ser renderizada. No Compose, o modelo declarativo permite descrever o que a interface deve mostrar com base no estado atual, simplificando a lógica.

Exemplo: no XML, um botão e um contador exigem várias etapas, incluindo a manipulação de IDs e findViewById. No Compose, tudo é feito diretamente no Kotlin com uma estrutura compacta e intuitiva.

A seguir, conheça as principais vantagens do Compose em relação ao XML:

Produtividade: escreva menos código e visualize mudanças em tempo real usando o recurso de pré-visualização.
Reatividade: atualize a interface automaticamente com base no estado do aplicativo, sem precisar gerenciar manualmente os elementos visuais.
Modularidade: crie componentes reutilizáveis e mais fáceis de testar.
Desempenho: interface mais leve e otimizada, sem a necessidade de inflar layouts XML.

Agora, conhecendo as vantagens, acompanhe os principais componentes do Compose:

Text: para exibir texto.
Button: botões interativos.
Column e Row: organizadores de layout vertical e horizontal.
LazyColumn: listas dinâmicas, como RecyclerView.

Confira, a seguir, um exemplo de uso do LazyColumn na Figura 2.

Figura 2 - LazyColumn em Compose
Fonte: o autor.

#PraCegoVer: na linha 1, temos: @Composable; na linha 2, fun TaskList(tasks: List<String>) {; na linha 3, LazyColumn {; na linha 4, items(tasks) { task ->; na linha 5, Text(text = task, modifier = Modifier.padding(8.dp)); na linha 6, }; na linha 7, }; na linha 8, }.

Ciclo de vida, pré-visualização e adaptação no Jetpack Compose

O Jetpack Compose revoluciona a construção de interfaces no Android ao adotar um modelo reativo baseado no estado atual da aplicação. Sempre que o estado muda, o Compose reconstrói automaticamente as partes relevantes da interface, eliminando a necessidade de atualizações manuais e reduzindo o risco de inconsistências comuns em modelos baseados em XML. Além disso, o Compose oferece a pré-visualização no Android Studio, um recurso que permite aos desenvolvedores visualizar mudanças na interface em tempo real, sem a necessidade de executar o aplicativo. Isso acelera significativamente o processo de design e ajuste de layouts. Por fim, com a diversidade de dispositivos Android, incluindo tablets, relógios e TVs, o Compose facilita a criação de interfaces adaptativas e responsivas, garantindo que a aplicação se ajuste automaticamente a diferentes tamanhos e formatos de tela.

saiba aplicar

Compreender as vantagens e as características do Jetpack Compose é essencial para você, futuro(a) Técnico em Desenvolvimento de Sistemas, porque essa ferramenta transforma a maneira como interfaces são construídas no Android. Ao adotar o Compose, você reduz a complexidade do código, acelera o desenvolvimento e ganha maior flexibilidade para criar interfaces dinâmicas e modernas. Além disso, os exemplos práticos apresentados permitem aplicar os conceitos de forma imediata, ajudando você a dominar essa abordagem declarativa e a otimizar seus projetos com eficiência e inovação.

Agora, para finalizarmos a lição, apresentarei um passo a passo para você aprender a criar um aplicativo em Kotlin usando o Jetpack Compose com todas as vantagens e características de escrita em Kotlin. Para iniciar essa prática, siga os passos a seguir:

Tenha uma máquina com o Android Studio instalado (esse processo você já conhece da primeira parte da disciplina).
Crie um projeto chamado kotlinjetpackcomposeapp e escolha o template “Empty Compose Activity”. Clique em “Next”.
Escolha a linguagem Kotlin.
Clique em “Finish” (Concluir) para criar o projeto.

Passo a passo

1. No arquivo MainActivity.kt, configure o layout inicial do aplicativo para usar Compose, conforme a Figura 3 a seguir.

Figura 3 - LazyColumn em Compose
Fonte: o autor.

#PraCegoVer: na linha 1, temos: package com.example.kotlinjetpackcomposeapp; na linha 3, import android.os.Bundle; na linha 4, import androidx.activity.ComponentActivity; na linha 5, import androidx.activity.compose.setContent; na linha 6, import androidx.activity.enableEdgeToEdge; na linha 7, import androidx.compose.foundation.layout.Arrangement; na linha 8, import androidx.compose.foundation.layout.Column; na linha 9, import androidx.compose.foundation.layout.Spacer; na linha 10, import androidx.compose.foundation.layout.fillMaxSize; na linha 11, import androidx.compose.foundation.layout.height; na linha 12, import androidx.compose.foundation.layout.padding; na linha 13, import androidx.compose.material3.Button; na linha 14, import androidx.compose.material3.MaterialTheme; na linha 15, import androidx.compose.material3.Text; na linha 16, import androidx.compose.runtime.*; na linha 17, import androidx.compose.ui.Modifier; na linha 18, import androidx.compose.ui.tooling.preview.Preview; na linha 19, import androidx.compose.ui.unit.dp; na linha 21, class MainActivity : ComponentActivity() {; na linha 22, override fun onCreate(savedInstanceState: Bundle?) {; na linha 23, super.onCreate(savedInstanceState); na linha 24, enableEdgeToEdge(); na linha 26, setContent {; na linha 27, MaterialTheme {; na linha 28, MyApp(); na linha 29, }; na linha 30, }; na linha 32, }; na linha 33, }. Nas linhas 2, 20 e 25, não há conteúdo descrito.

2. Agora, vamos criar uma tela simples com o Compose com apenas um contador na tela. Crie um componente @Composable para representar a interface logo após a linha 33 da Figura 4.

Figura 4 - Interface do usuário em Compose
Fonte: o autor.

#PraCegoVer: na linha 1, temos: @Composable; na linha 2, fun MyApp() {; na linha 3, var count by remember {; na linha 4, mutableIntStateOf(0); na linha 5, }; na linha 7, Column(; na linha 8, modifier = Modifier; na linha 9, .fillMaxSize(); na linha 10, .padding(16.dp),; na linha 11, verticalArrangement = Arrangement.Center; na linha 12, ) {; na linha 13, Text(; na linha 14, text = "Contagem: $count",; na linha 15, style = MaterialTheme.typography.titleLarge; na linha 16, ); na linha 17, Spacer(modifier = Modifier.height(16.dp)); na linha 18, Button(onClick = { count++ }) {; na linha 19, Text(“Incrementar”); na linha 20, }; na linha 21, }; na linha 22, }. Na linha 6, não há conteúdo descrito.

3. Visualize, agora, a interface em tempo real. Uma das vantagens do Compose é o recurso de Pré-visualização. Ele permite ver como a sua interface está ficando sem precisar executar o aplicativo. Adicione a função de pré-visualização, assim como é visível a seguir:

Figura 5 - Pré-visualização em Compose
Fonte: o autor.

#PraCegoVer: na linha 1, temos: @Preview(showBackground = true); na linha 2, @Composable; na linha 3, fun PreviewMyApp() {; na linha 4, MyApp(); na linha 5, }.

4. Compile e execute o aplicativo em um dispositivo físico ou emulador.

5. Verifique a funcionalidade interativa do contador: ao clicar no botão “Incrementar”, o valor da contagem deve ser atualizado automaticamente.

Ao realizar esse passo a passo, você terá visto na prática como o Jetpack Compose pode simplificar o desenvolvimento de interfaces modernas e interativas. A abordagem declarativa permite escrever um código limpo e reativo, enquanto o suporte nativo do Android Studio acelera o desenvolvimento com recursos, como pré-visualização e ferramentas avançadas. Com a modularidade dos componentes, você pode criar interfaces reutilizáveis e adaptáveis, otimizando tempo e esforço em projetos futuros. Agora explore as possibilidades oferecidas pelo Compose junto de seus colegas e/ou professores e veja como ele pode revolucionar seus projetos Android!

REFERÊNCIAS

ALVES, A. C. B. Afinal, o que é Jetpack Compose? Medium, 28 jul. 2021. Disponível em: https://medium.com/digitalproductsdev/afinal-o-que-%C3%A9-o-jetpack-compose-61e3f6ce602b. 2021. Acesso em: 15 jan. 2025.

KUNNETH, T. Android UI Development with Jetpack Compose: Bring declarative and native UI to life quickly and easily on Android using Jetpack Compose and Kotlin. Birmingham, RJ: Packt Publishing, 2023.

Page updated

Google Sites

Report abuse