Jetpack Compose Preview para validar telas em múltiplos dispositivos Android na Cora

Saiba como utilizamos essa ferramenta super útil aqui na Cora

O que é o Jetpack Compose Preview?

O Jetpack Compose Preview é uma ferramenta útil para o desenvolvimento de aplicativos Android, que permite que os desenvolvedores vejam as alterações quase instantaneamente, economizando tempo e garantindo qualidade. Com a versão mais recente do Jetpack Compose, os desenvolvedores podem usar vários Previews ao mesmo tempo para modificar seus aplicativos com mais eficiência.

Instalando o Jetpack Compose

O primeiro passo é ter o Jetpack Compose instalado. É recomendado que você tenha a última versão da biblioteca, pois ela vem com melhorias significativas na experiência do usuário. Para fazer a instalação, siga as instruções da documentação oficial do Android.

Iniciando o Preview

Depois de ter configurado o ambiente apropriadamente, você pode iniciar o Compose Preview ao adicionar as seguintes dependências ao seu arquivo build.gradle:

Agora, quando precisarmos visualizar algum Composable é só adicionar a anotação @Preview no código, e teremos uma pré-visualização do que estamos construindo.

Vamos ao código 😎

Como exemplo vou utilizar uma funcionalidade aqui da Cora que é a: Parceria Cora

Aqui temos o código que representa a tela mostrada acima:

para visualizarmos como ficou a nossa tela utilizando Jetpack Compose, precisamos utilizar a anotação @Preview:

Obtendo o seguinte resultado:

Mas como podemos fazer para testar em vários dispositivos android diferentes?

Os previews do Jetpack Compose, podem ser agrupados fornecendo assim múltiplas configurações(modo claro e escuro, cor do fundo da tela, dispositivos, etc.).

No nosso caso de uso, vou demonstrar como utilizar 4 dispositivos pré-definidos para pré-visualizar como a tela vai ser comportar nos diferentes dispositivos, primeiro é necessário criar uma annotation class com as anotações de Preview de cada dispositivo desejado, nesse caso vou utilizar os pré-definidos pela biblioteca, como mostra o código abaixo:

Agora e só trocar o @Preview do nosso composable por @DevicesPreview,

E voilà, assim temos o nosso preview para múltiplos dispositivos. ⭐️

Para finalizar vamos testar nossa tela em um dos Previews, é possível interagir com o Preview, diretamente no Android Studio, clicando no botão indicado na imagem abaixo:

Outra alternativa é instalar o Preview em um dispositivo Android, seja emulador ou dispositivo físico, clicando neste botão:

Bônus:

É possível também definir as propriedades, clicando na engrenagem que fica do lado esquerdo de cada Preview:

Que tal interagir clicando nos claps (de 1 a 50) pra mostrar que curtiu o texto? 👏

Você também pode acessar nossa Página de Carreiras para saber mais sobre nossas vagas e acompanhar a Cora no Linkedin e no Instagram de Corajosers.