Como adotar Jetpack Compose em seu projeto Android

E fazer UIs em Kotlin sem uma linha de XML

Desde que foi anunciado, o Jetpack Compose começou a aparecer de forma recorrente no radar dos devs Android. Isso porque bom e velho XML já havia chegado ao limite de otimizações e melhorias possíveis há um tempo, o que estava impedindo que evoluções em UI no Android acontecessem. O Kotlin ganhou nosso coração para escrever o código dos nossos apps e agora, com o Jetpack Compose, podemos fazer UIs em Kotlin sem uma linha de XML.

A novidade traz um fôlego novo ao desenvolvimento de interfaces no Android. Nós aqui na Concrete passamos um mês em uma iniciativa de Pesquisa e Desenvolvimento sobre o assunto, aprendemos muito sobre a lib (que é um paradigma diferente do framework atual) e neste post vamos falar um pouco sobre como um app já existente pode começar a usar o novo framework, de maneira gradual. Então este post é pra você que já tem um app Android. quer começar a utilizar o Jetpack Compose e não sabe por onde começar. Vamos lá?

Como deixar meu app pronto para o Compose?

  • Android Studio 7.0 ou superior
  • Android Gradle Plugin 7.0 ou superior
  • Kotlin 1.5.10

Com essas ferramentas atualizadas, vamos ao passo a passo.

Tarefa 1: configure o projeto para dar suporte ao Compose seguindo as instruções deste link.

Tarefa 2: criar um tema

A customização dos componentes no Compose pode ser feita personalizando atributos e modifiers. No entanto, é importante criar um tema que vai estabelecer as cores, formas e fontes que serão utilizadas nos componentes @Composable para que elas possam ser trocadas com mais facilidade.

Os atributos definidos neste tema serão herdados pelo MaterialTheme.*.

  • Ex.: MaterialTheme.colors.surface é a cor padrão de superfícies de diversos componentes e pode ser alterada com override no tema.

No caso de apps existentes, há duas alternativas para criar o tema:

Se o projeto tiver um design system, é recomendado começar por ele. Definindo tipografias, cores, formas e um tema para que as telas em Compose possam utilizar.

Tarefa 3: escolher uma abordagem para adotar o Compose

Se o seu app já foi construído usando o framework de Views do Android, você terá que optar por uma das abordagens recomendadas pela Google:

  • Bottom-up: adotar nos elementos menores do app, como custom views, botões e etc. e ir subindo para partes maiores, como RecyclerViews e Fragments
  • Top-down: começar por containers de interface, como Fragments e ViewGroups, e ir compondo pedaços menores

Minha recomendação pessoal é que apps pequenos, com telas relativamente simples, adotem uma abordagem top-down, enquanto que em apps mais complexos você assume riscos menores convertendo pedaços menores da interface primeiro (bottom-up).

Como a comunidade tem feito?
É importante lembrar que muitos componentes do Compose ainda não chegaram ao nível de refinamento e otimização do framework de views. Portanto, a comunidade tem adotado a abordagem de usar o Compose apenas para desenhar a interface dos componentes do framework de Views.

No exemplo acima, o framework de Views é usado para navegação, ciclo de vida e interação com outras partes do Android, enquanto o Jetpack Compose foi usado apenas para desenhar a interface dos Fragments. Isso permite manter o comportamento padrão de componentes estáveis (Fragments e Activities) e aproveitar os recursos e produtividade do Compose, que desenha o conteúdo destes componentes.

Abaixo, algumas repos para usar como referência para aprender o Compose:

Pronto, com os passos acima, seu app está pronto para começar a usar o Jetpack Compose e você poderá aos poucos adotar o novo framework no seu app. Para entender melhor como o Jetpack Compose funciona, dá uma olhada neste post aqui.

E se você tiver qualquer dúvida ou comentário, aproveite os campos abaixo. Quer trabalhar em um time que está sempre à frente quando o assunto são novas tecnologias? Acesse aqui, se candidate a alguma de nossas vagas e vamos aprender juntos. Até a próxima!

Concrete

Nós desenvolvemos produtos digitais com inovação, agilidade…

Concrete

Nós desenvolvemos produtos digitais com inovação, agilidade e excelentes práticas, para que o mercado brasileiro e latino-americano acompanhe a velocidade do mercado digital mundial.

Wesley Jonathan Marcolino

Written by

Android Developer

Concrete

Nós desenvolvemos produtos digitais com inovação, agilidade e excelentes práticas, para que o mercado brasileiro e latino-americano acompanhe a velocidade do mercado digital mundial.