6. Navegação

6.2. Configurando o grafo

Para modificar o grafo de navegação abra o arquivo nav_graph.xml localizado na pasta res -> navigation.

Inicialmente o grafo está desconfigurado porque removemos os fragmentos pré-criados da template. Para tanto vamos primeiramente remover as configurações antigas e deixar o grafo em branco. Selecione as telas antigas na janela Component Tree e remova-as.

Vamos adicionar a primeira tela como o HomeFragment e consequentemente configurar ela como a tela inicial. A tela inicial pode ser configurada manualmente, mas como o grafo está em branco automaticamente ele vai definir a tela inicial como a primeira tela adicionada a navegação.

Clique no botão ilustrado na figura para adicionar um novo destino (New Destination) e selecione o fragmento principal do nosso projeto.

As possíveis telas serão mostradas como opção de destino. Selecione main_fragment para adicionar a tela ao grafo.

Após adicionar o fragmento principal o grafo se apresentará da seguinte forma, observe que está anotado Start mostrando que a tela principal da navegação será o fragmento adicionado.

Repita os passos anteriores e adicione as demais telas ao grafo. Como resultado final, após organizar a posição das telas você poderá ter a seguinte tela.

A próxima etapa é configurar as possíveis transições de tela pois a navegação se dará por meio das transições configuradas nesse momento. Assim selecione uma tela e clique sobre a bolinha azul que aparece na borda da tela, segure e clique na tela a qual será o destino da transições. Segue a ilustração de como fazer a transição do fragmento home para o fragmento de login:

Certifique de criar as seguintes transições:

  • Transição do fragmento home ao fragmento de login
  • Transição do fragmento login ao fragmento de cadastro
  • Transição do fragmento cadastro ao fragmento home 

Como resultado final teremos o seguinte grafo:

Por questão de simplicidade iremos omitir opção avançadas da navegação como animações e definição de argumentos,  assim isso é tudo que você precisa fazer para terminar a configuração da transição das telas. Cada transição adicionado foi configurada automaticamente com o nome das telas origem e destino como: action_homeFragment_to_loginFragmentaction_loginFragment_to_cadastroFragmentaction_cadastroFragment_to_homeFragment.  Através do nome da ação, o NavController consegue efetuar a navegação entre as telas. Na próxima seção vamos ver como programar os eventos para chamar essas transições.