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:

• Criar um tema do zero;
  https://developer.android.com/jetpack/compose/themes
• Ou utilizar um adapter para herdar o tema do contexto atual definido no XML: um dos desenvolvedores da Google envolvido no projeto do Compose criou uma biblioteca que permite fazer isso por meio de um @Composable AppCompatTheme, assim, atributos primários, textos e outras customizações do tema são aplicados automaticamente aos Composables.
  https://github.com/google/accompanist/tree/main/appcompat-theme

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:

• Repositório oficial com vários exemplos:
  https://github.com/android/compose-samples
• Aplicativo em produção que foi refatorado para Compose:
  https://github.com/chrisbanes/tivi

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!