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?

O Jetpack Compose é uma lib completamente nova que usa o novo compilador do Kotlin para transformar funções @Composable em interfaces lindas! Como estes recursos estão disponíveis apenas em novas versões do Kotlin, algumas ferramentas precisam estar atualizadas para que você possa começar a adotar o Compose em seu app atual. Então, anota e atualiza aí:

  • 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!

--

--

--

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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wesley Jonathan Marcolino

Wesley Jonathan Marcolino

Android Developer

More from Medium

Kotlin Multiplatform Mobile: The Definitive Cross-platform Bridge

Interesting Android & iOS Project

Deploying a Flutter App to App Store and Google Play with Fastlane

Jetpack Compose: MVVM State management in a simple way