Jetpack Compose: navegando entre telas com o Navigation

Navegação no sistema Android - Apresentação

Eu sou o Alex Felipe, instrutor da Alura e estou aqui para te dar as boas-vindas do curso de Jetpack Compose: Navegando entre telas com o Navigation.

A partir desse curso, vou assumir que você tem alguns pré-requisitos para que você consiga acompanhar todo o conteúdo com tranquilidade. Quais são esses pré-requisitos?

Basicamente, que você saiba criar seus composables utilizando lazy layout e estados, porque a partir desse curso vou oferecer diversas telas justamente para que você consiga reutilizá-las aplicando o principal conceito que vamos trabalhar aqui, que é a navegação com o Navigation.

Caso você não tenha a mínima ideia do que seja lazy layout e estados, não precisa se preocupar, porque aqui na Alura temos um curso focado para esse conteúdo.

Ele está presente no curso “Jetpack Compose: utilizando Lazy Layout e estados”. Então, sim, se você vir que não sabe muito bem sobre esse assunto, fique à vontade para acessar esse curso, estudar todo o conteúdo, visualizar os principais pontos sobre lazy layout e estados, e assim por diante.

Também nesse curso você vai ter muito mais informações além dessas, e pode ser bastante útil para que você consiga acompanhar todo o conteúdo sem nenhum problema.

Dado que eu passei esses pontos de pré-requisitos, nosso próximo passo é entender o que vamos fazer de projeto nesse curso e quais são os detalhes técnicos que iremos abordar.

Vamos começar com a parte do projeto. Basicamente, o projeto é conhecido como Panucci e a ideia dele é simular um aplicativo de restaurante. Até mesmo no título da app bar temos “Restorante Panucci”, que vem do italiano.

Neste app, o que vamos ter? Já temos diversas telas prontas, tudo que você está vendo nesta tela já está pronto, você não vai precisar implementar nenhum código visual.

Logo de cara, já temos a tela de “Destaques do dia” e, na parte de baixo, esse componente conhecido como bottom app bar, que é a barra inferior do aplicativo.

Podemos interagir e clicar em cada uma dessas abas, como é o caso da “Destaques”, que está selecionada e exibe os destaques do dia; se clicarmos em “Menu”, vamos para o menu; em “Bebidas”, vamos para as bebidas; e assim por diante.

Cada item, em cada tela, vai ter uma ação, como é o caso de clicar em um produto do destaque, ele vai acessar uma tela de detalhes do produto. Se fizermos a mesma coisa no menu, vamos para os detalhes; nas bebidas, também vamos para os detalhes.

Como podemos ver, temos outros botões, como é o caso do floating action button. Se clicamos nele, vamos para a tela de pedido, que determina tudo que pedimos, o pagamento, a parte de confirmar etc.

Entenda que o objetivo é mais essa tela existirem sem ter a lógica. A lógica que vamos focar vai ser isso que estou mostrando para você, que é a navegação. Até mesmo quando clicamos em “Pedir”, ele volta para tela etc. Então, esse vai ser nosso foco, o nosso projeto vai ser esse.

Agora vem aquela questão: dado que esse é o projeto, o que vamos focar em técnica, o que vamos aprender?

Iremos aprender inicialmente quais são os princípios de navegação dentro de um aplicativo Android, porque existem comportamentos esperados para qualquer usuário que mexa nesse sistema operacional.

Vamos entender quais são as preocupações que precisamos ter para garantirmos esse mesmo comportamento. Vamos perceber que o Navigation, que vai ser uma biblioteca para resolver esses problemas vai nos auxiliar muito.

Vamos entender que, com o Jetpack Compose, vamos ter uma implementação específica do Navigation; vamos aprender como navegar entre as telas como reagir a cada componente visual.

Por exemplo, só nessas telas que envolvem “Destaques”, “Menu” e “Bebidas”, temos a bottom app bar, como o app bar de cima, mas, se entramos em “Detalhes” ou nos pedidos, não temos mais esses componentes.

Vamos aprender a fazer toda essa integração com o Navigation. Perceba que é um curso, um conteúdo muito importante para que você melhore cada vez mais a experiência de uso do seu aplicativo. Vai ser fundamental para que, daqui para frente, você melhore suas habilidades como Dev Android.

E aí, o que você achou do conteúdo? Gostou? Então te espero na primeira aula.

Navegação no sistema Android - Apresentando o projeto

Antes de começar o assunto principal do curso, que é sobre navegação dos nossos aplicativos no Android, primeiro vou mostrar o projeto de exemplo que iremos utilizar durante o conteúdo.

O app é chamado de Panucci e a ideia dele é simular um aplicativo de restaurante. Até mesmo na execução do aplicativo, na app bar do topo, temos o título “Restorante Panucci”, que vem do italiano, que seria “Restaurante Panucci”.

Perceba que esse vai ser nosso app e nesse momento vou mostrar quais são as telas, as funcionalidades que ele tem, e apresentar a estrutura de código para que você se familiarize com o código e, dessa forma, seja mais tranquilo de entender por onde vamos começar.

Logo de cara, quando executamos o app, vamos entrar na tela inicial que mostra os destaques do dia. Basicamente, simula uma tela com os produtos mais vendidos, que são recomendados etc.

Perceba que é uma lista que mostra diversos produtos e cada produto tem uma informação específica, computada a partir de “Lorem ipsum”, uma imagem aleatória, e isso acontece porque estou utilizando um sample data. A intenção é colocar valores fictícios para apenas preencher essas informações.

Outro ponto a se observar é que temos alguns componentes do Material Design, como é o caso da app bar do topo, da outra app bar na parte de baixo, em que determinamos qual a tela em que estamos, e do outro botão no canto inferior direito, que é o nosso floating action button.

Um ponto importante de se notar é que nesse momento estou utilizando o Material Design 3, que é uma versão mais recente que a versão 2. Então, alguns aspectos visuais podem ser um pouco diferentes, como é o caso do floating action button, que já não é circular totalmente, só arredondado nas pontas.

Isso acontece justamente porque no Material Design 3 tem algumas diferenças. Por isso ele tem esse aspecto. Esse é um pouco legal de se comentar.

Agora que eu trouxe esses primeiros detalhes, vamos entender quais são as outras telas, como as acessamos e entender o que temos de projeto inicial.

Novamente, logo de cara, entramos na tela de destaques e, como podemos ver, na app bar da parte de baixo, vamos ter selecionada a parte de “Destaques”. Logo, se clicamos em um dos outros botões ou abas, vamos ter acesso às outras telas, como, por exemplo, se eu clicar em “Menu”, ele vai selecionar a aba de menu e vai mostrar uma nova tela.

Então, perceba que agora ele mostra o menu, que seria a simulação para apresentar todos os produtos dentro do nosso aplicativo. A ideia do menu seria essa.

Em seguida, temos as “Bebidas”, que tem a ideia de apresentar todas as bebidas. Novamente, as informações apresentadas são fictícias e são adicionadas de maneira aleatória, isso porque estou utilizando um sample data. Então, não precisa se atentar a essas informações apresentadas, tudo que você vê aqui são informações fictícias.

Temos acesso a essas telas e a mais duas telas que vão fazer parte do exemplo inicial, que é a tela de detalhes do produto, que podemos acessar a partir de “Destaques”.

Se eu clico em um dos produtos, ele vai abrir uma tela mostrando as informações desse produto. Ele mostra o nome, o preço, a descrição e a imagem, o que também mostra nos outros itens, mas de maneira enxuta. Por fim, tem um botão de “Pedir”.

Se voltamos nos destaques e clicamos em “Pedir” ou no floating action button, vamos ter acesso a uma tela que mostra o pedido para você conferir se está tudo certo ou se precisa fazer algum ajuste.

Nessa tela também vamos ter uma lista simulando os produtos que escolhemos para o nosso pedido. Tem até um botão na direita, em cada item, mostrando que podemos adicionar a quantidade.

Se clicamos para subir, ele vai aumentar os itens; se clicamos na parte de baixo, ele vai subtrair os itens, e assim por diante. Mas entenda que é uma lógica muito simples, ela não foi feita para computar as informações aqui embaixo, foi apenas uma simulação.

Então, essas são as funcionalidades, essas são as telas que temos disponíveis no nosso app. É a partir do nosso projeto, a partir dessas funcionalidades que vamos começar nesse assunto de navegação no aplicativo.

Agora que passei essa parte do projeto, vamos só vasculhar um pouco o código. Acessando a aba de “Project”, teremos acesso ao pacote “Project > br.com.alura.panucci”.

Dentro dele, nós vamos ter os principais pacotes, que seria o modelo, que representa o produto, que é o nosso Product, tendo name, price, description e image, que seria o nome, o preço, a descrição e a imagem.

E logo em seguida temos o “sample data”, que mostra as informações que já temos computadas. Perceba que eu utilizo o Lorem Ipsum para determinar os nomes e as descrições, e na imagem estou usando a API https://picsum.photos, que busca imagens para nós.

Pelo menos, na maneira que vi de uso, era gratuito, por isso estou a utilizando. Se caso tiver alguma mudança, você pode utilizar outra, não tem nenhum problema. Só utilizei a “Picsum” para facilitar mesmo.

Em seguida, vemos que temos produtos que vão ter imagens, que não vão ter imagens, para fazer uma simulação de como fica; todos os produtos gerando uma lista com base na quantidade de itens que queremos, que, nesse caso, são de 10, é outra maneira de fazer isso.

Até mesmo existe uma lógica para determinar o que vai ter e o que não vai ter imagem, que é o módulo de 2. Então, se for par, colocamos a nossa imagem; se for ímpar, não colocamos; e assim por diante.

Então, veja que são informações só para computarmos mesmo. Por fim, vamos ter a representação de cada item na app bar da parte de baixo, a partir desse bottomAppBarItems, em que determinamos quais são os destaques, o menu, as bebidas e o ícone.

Então, é a partir do sample que determinamos isso. Por fim, vamos ter a parte de UI, que vai mostrar todos os componentes do nosso aplicativo. Se eu venho nesse “CheckoutItemCard.kt”, olha só o que aparece.

Ele vai apresentar justamente esse item da tela de check out, que seria a tela para verificar o pedido, e assim por diante. Veja que ele mostra para nós. Você pode vascular todo o código, se você quiser fazer alguma edição, fique à vontade.

A intenção de trazer tudo pronto é justamente para focarmos no assunto principal, que é a navegação. Então, “Components”, temos uma tela inteira, novamente estou clicando na tela de check out e conseguimos visualizar como ficam os estados da tela quando tem ícones, quando não tem, e assim por diante.

O tema é aquele mesmo código que já é gerado para nós. Talvez o que ele vai mudar são as cores que foram definidas para esse projeto e assim por diante. Até mesmo esse nosso botão é uma cor um pouco diferente, não é relacionado ao tema, tem uma cor específica, então você pode vasculhar como isso foi feito.

Em “Main activity” é o onde está uma boa parte do nosso código. Vou fazer uma extensão, “Ctrl + Shift + F12”, agora sim. Na “Main activity” é onde vai estar, por exemplo, como foi feita essa lógica para fazer a navegação simples que vimos nesse primeiro momento.

Também vai mostrar a representação da estrutura inicial para ter os componentes do Material Design, como é o caso do PanucciApp. Se o acessamos com “Ctrl + B”, ele usa o Scaffold, usa o slot de topBar, de bottomBar, usa um FloatingActionButton, e assim por diante.

Então, se você também quiser vasculhar como foi implementado cada um desses componentes, fique à vontade para visualizar isso.

Nessa parte do código que envolve a questão de navegação, vamos falar um pouco mais como ele funciona, não precisa se preocupar. A minha intenção foi trazer isso pronto para visualizarmos como isso vai funcionar na prática e entendermos como vamos evoluir no projeto.

Esses eram os pontos que eu queria mostrar para você no começo. Agora que você conheceu o projeto, a seguir vamos introduzir os pontos relacionados à navegação de aplicativos no Android.

Navegação no sistema Android - Princípios de navegação

Agora que conhecemos o projeto que iremos utilizar durante o curso, podemos seguir com o próximo passo, que é fazer uma introdução sobre os princípios de navegação dentro de um aplicativo Android.

Para isso, vamos acessar uma página da documentação que tem todo o resumo necessário de o que precisamos saber em relação aos princípios de navegação de apps Android.

A página é essa “Principles of navigation”, que a tradução de “Princípios de navegação”, e logo de cara, bem no primeiro parágrafo, temos informações muito relevantes em relação a como podemos entender e interpretar o que é uma navegação dentro de um aplicativo.

Então, é dito que a navegação em diferentes telas faz parte de uma experiência núcleo para o nosso usuário, ou seja, uma experiência fundamental para que o usuário consiga usar nosso aplicativo, consiga ter uma experiência boa etc.

Até mesmo é dito que, seguindo o conjunto de princípios de navegação, vamos manter uma experiência bastante intuitiva e consistente para os usuários, considerando que existem diversos aplicativos que consideram esse tipo de princípios.

Dessa forma, nossos usuários conseguem manter a mesma experiência e não ficam com aquela inconsistência de um aplicativo ter certo comportamento e outro aplicativo ter outro comportamento completamente diferente.

É por isso que os princípios de navegação são muito importantes para que consigamos manter essa consistência e para ser intuitivo.

Logo depois, é dito que, no Android, existe um componente chamado de navigation, que foi desenhado para implementar, por padrão, esses princípios.

Então, até mesmo a própria documentação já dá um spoiler de o que vamos usar daqui para frente para mantermos essa experiência, esses princípios.

Neste momento, vamos partir mais para a parte teórica e, dessa forma, vamos ver, em teoria, quais são os pontos principais que precisamos entender em relação à navegação. Depois, vamos para o componente de navegação.

Entenda que a navegação é uma parte fundamental para a experiência do usuário e que temos um conjunto de princípios para garantir isso, e temos um componente que, por padrão, garante que esses princípios sejam mantidos. Então, essa é a informação interessante que precisamos pegar logo de cara.

Seguindo um pouco mais abaixo, temos alguns exemplos e algumas informações bastante relevantes quando falamos de navegação. Por exemplo, quando executamos um app, quando lançamos um app, que é o launcher, vamos acessar uma tela inicial, que também é conhecida como o destino inicial, que tem que ser fixo.

Nesse “Fixed start destination”, ele determina que a primeira tela tem que ser fixa, essa é uma experiência comum quando trabalhamos dentro da navegação de um aplicativo.

Mostra um exemplo de uma lista de itens, faz uma interação com um dos itens e acessa uma tela de detalhes, e mostra que, quando fazemos esse tipo de ação, quando clicamos no item, vamos para outra tela e depois clicamos no botão de voltar, temos o comportamento de voltar na tela, e assim por diante.

Então, meio que é um fluxo, que é lançar o app, fazer as interações, acessar mais telas e, dado que queremos voltar, temos o botão de voltar do próprio sistema, que volta à tela anterior. Quando ele está na tela inicial e clicamos para voltar, ele fecha o app.

Esse é meio que o comportamento padrão quando trabalhamos com os princípios de navegação dentro de um aplicativo. Esse é o comportamento padrão.

Outro ponto importante, que é onde quero chegar, é justamente como podemos representar o que chamamos de destinos dentro de um aplicativo. Veja que, cada vez que lançamos um aplicativo, ele vai lançar uma nova task, uma nova tarefa, e é nesse ponto que quero chegar, para você entender como funciona.

Para isso, existe uma página indicando o que seria essa task, e eu já a abri para entendermos como isso funciona. É essa “Tasks and the back Stack”, que seria meio que “A pilha de volta e as tarefas”.

Quando estamos falando de tasks, basicamente vai ser uma coleção de activities com que nossos usuários conseguem interagir dentro do nosso aplicativo.

Todas essas activities são meio que organizadas dentro de uma estrutura, que chamamos de pilha, que é a stack, e que geralmente chamamos de back stack, que é a “pilha de volta”.

Caso esse nome seja uma pouco estranho para você, basicamente ele é muito similar à nossa stack de execução dentro de um algum software, seja no Java, seja no Kotlin, em que fazemos diversas chamadas e vamos empilhando cada uma delas.

Quem está no topo, é executado; quando termina de executar, sai do topo e vem outra chamada; e assim por diante. Essa representação, podemos até mesmo ver nesse diagrama.

Ele mostra, de maneira mais intuitiva, como isso funciona. Como seria, na prática, dentro de um aplicativo Android? Basicamente, nós vamos ter a representação da back stack, que é esse quadrado em cinza, e vamos ter também essas outras caixas, que são as activities e que também são nossas telas.

Podemos assumir que são, por exemplo, as chamadas de funções dentro do nosso software. Cada uma das activities que fica no topo da back stack, que é a pilha, também vai ser chamada de activity em foreground, ou seja, activity que está em primeiro plano, que está apresentando o conteúdo.

Como isso vai funcionar, conforme as interações dos nossos usuários? Cada vez que ele interagir com uma tela que abre outra, e assim por diante, ele abre uma nova activity.

Por exemplo, a activity 2, que vai para o topo da pilha. Neste momento, ela começa a ser a activity em foreground, a que está apresentando o conteúdo. Se você faz uma interação e abre uma nova activity, vem a activity 3 e apresenta o conteúdo.

Perceba que, a partir desse momento, também começa a gerar o histórico. A back stack é feita justamente para termos o histórico do que já acessamos e o que nosso usuário vai acessar quando voltar.

Por exemplo, quando ele chega na activity 3 e fez o navigate back, olha só o que aconteceu, o activity 3 foi destruído, não faz mais parte da nossa back stack. Dessa forma, voltou para a activity 2, que é o que é apresentado no conteúdo.

Então, no nosso app, vamos supor que clicamos no “Menu”. Teoricamente, abriríamos uma nova task, no caso, uma activity. Quando vamos em “Bebidas”, também uma nova task.

Então, temos “Bebidas”, “Menu” e “Destaques”. Se eu clico para voltar, ele volta para o “Menu”; se clico para voltar quando estou no “Menu”, ele volta para “Destaques”; e se eu clico de volta, ele fecha o app. É assim que funciona essa questão do princípio de navegação.

Óbvio, tem muito mais informações em relação à questão de navegação, só que esse era o ponto essencial, justamente para você entender como vai funcionar a navegação e quais são os princípios que precisamos seguir.

Eu recomendo fortemente que você faça uma leitura em relação às tasks, ao back stack etc., acessem0 os princípios de navegação e entendam quais são esses pontos, mas o detalhe que eu queria chegar era justamente para você entender qual é essa parte inicial que precisamos saber em relação à navegação.

Porque, a partir desse momento, vamos começar a entender como podemos fazer toda essa implementação que fizemos e a garantir que as coisas funcionem como estamos vendo aqui utilizando o Jetpack Compose. Até já.

Sobre o curso Jetpack Compose: navegando entre telas com o Navigation

O curso Jetpack Compose: navegando entre telas com o Navigation possui 162 minutos de vídeos, em um total de 52 atividades. Gostou? Conheça nossos outros cursos de Android em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Navegação no sistema Android
• Configurando o Navigation
• Opções de navegação
• Melhorando a navegação
• Finalizando a navegação das telas