Navigation Component — O que é, NavHost e Navigation Graph

Autor: IT Sectr Publicado: 2026-02-22 Tempo de leitura: 7 min

Navigation Component é uma biblioteca Android Jetpack para implementar navegação entre telas do aplicativo. O componente centraliza o gerenciamento da pilha de fragmentos, links profundos e passagem de argumentos. Faz parte do Jetpack desde 2018 e é recomendado pelo Google para todos os novos projetos. Saiba mais no guia oficial do Google.

Principais pontos

  • Navigation Component — uma biblioteca Jetpack para navegação centralizada entre telas Android
  • NavGraph — um recurso XML que descreve todas as telas e conexões entre elas
  • NavHostFragment — um contêiner no layout da Activity que exibe a tela de navegação atual
  • NavController — o objeto de controle de navegação: navigate, popBackStack, navigateUp
  • Safe Args — um plugin Gradle para passagem de argumentos com segurança de tipos entre telas

O que é Navigation Component?

Navigation Component é uma biblioteca Android Jetpack (androidx.navigation) que fornece uma API unificada para navegação. Inclui três elementos-chave: Navigation Graph (grafo de navegação), NavHostFragment (contêiner de telas) e NavController (controlador de transições). O componente gerencia automaticamente a pilha de retrocesso e suporta links profundos.

Antes do Navigation Component, os desenvolvedores gerenciavam fragmentos manualmente através do FragmentManager. Isso resultava em código fragmentado (literalmente): cada tela tinha suas próprias regras de navegação, os estados da pilha de retrocesso variavam e os links profundos exigiam implementação separada. O Navigation Component unificou esses cenários. De acordo com o Google (2026), a biblioteca está instalada em 90% dos novos projetos Android.

Navigation Component integra-se com outras bibliotecas Jetpack: LiveData, ViewModel, Material Design. Suporta tanto fragmentos XML quanto Jetpack Compose através da extensão navigation-compose. Versão estável — 2.8.x (2025), versão mínima do Android — API 14.

NavGraph é um recurso XML (res/navigation/nav_graph.xml) que define todas as telas do aplicativo e as conexões entre elas. Cada tela é um destino, que pode ser um Fragment, Activity ou Composable. As conexões entre destinos são ações que definem a direção da transição.

xml

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    app:startDestination="@+id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name=".HomeFragment"
        android:label="Início"
        tools:layout="@layout/fragment_home">
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@+id/detailFragment"
            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            app:popEnterAnim="@anim/slide_in_left"
            app:popExitAnim="@anim/slide_out_right" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name=".DetailFragment"
        android:label="Detalhes"
        tools:layout="@layout/fragment_detail">
        <argument android:name="itemId"
            app:argType="integer"
            android:defaultValue="0" />
    </fragment>
</navigation>

O atributo startDestination define a primeira tela exibida na inicialização. Uma ação define o destino alvo e as animações opcionais. Os argumentos descrevem os parâmetros passados para a tela — tipo e valor padrão.

NavHostFragment é um contêiner colocado no layout da Activity que exibe a tela de navegação atual. O NavHostFragment alterna automaticamente os fragmentos quando NavController.navigate() é chamado. NavController é o objeto que gerencia a navegação: transições, retorno e verificação da rota atual.

kotlin
// Layout Activity: activity_main.xml
// <androidx.fragment.app.FragmentContainerView
//     android:id="@+id/nav_host_fragment"
//     android:name="androidx.navigation.fragment.NavHostFragment"
//     app:navGraph="@navigation/nav_graph"
//     app:defaultNavHost="true" />

class MainActivity : AppCompatActivity() {

    private val navController by lazy {
        (findViewById<NavHostFragment>(R.id.nav_host_fragment))
            .navController
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // NavigationUI vincula NavController ao AppBar
        setupActionBarWithNavController(navController)
    }

    // Navegar para a tela de detalhes
    fun openDetail(itemId: Long) {
        val bundle = Bundle().apply {
            putLong("itemId", itemId)
        }
        navController.navigate(R.id.action_home_to_detail, bundle)
    }

    override fun onSupportNavigateUp() = 
        navController.navigateUp() || super.onSupportNavigateUp()
}

app:defaultNavHost="true" é um atributo importante: intercepta o botão de retrocesso do sistema e passa o controle para NavController. NavigationUI é um utilitário para vincular NavController com AppBar, BottomNavigationView, NavigationDrawer. setupActionBarWithNavController habilita a seta de retrocesso em telas aninhadas.

Navigation Component suporta animações de transição personalizadas, definidas em ações ou programaticamente. As animações são definidas por quatro atributos: enterAnim (aparecimento da nova tela), exitAnim (desaparecimento da atual), popEnterAnim (aparecimento ao retroceder) e popExitAnim (desaparecimento ao retroceder).

xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%"
        android:duration="300" />
</set>

// Transição programática com animação
val navOptions = NavOptions.Builder()
    .setEnterAnim(R.anim.slide_in_right)
    .setExitAnim(R.anim.slide_out_left)
    .setPopEnterAnim(R.anim.slide_in_left)
    .setPopExitAnim(R.anim.slide_out_right)
    .build()

navController.navigate(R.id.detailFragment, args, navOptions)

As animações funcionam com Fragment no nível de FragmentTransaction. Para Jetpack Compose, as animações são configuradas via NavOptionsCompat usando Compose Animation. Navigation Component não impõe restrições ao tipo de animação — translate, scale, alpha e suas combinações são suportadas.

Safe Args: argumentos com segurança de tipos

Safe Args é um plugin Gradle para transferência de dados com segurança de tipos entre telas. O plugin analisa o NavGraph, gera classes Directions e Args com tipos de campo específicos. A correspondência de tipos é verificada em tempo de compilação — um MissingArgumentException é detectado antes da execução do aplicativo.

kotlin
// build.gradle (module)
plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

// Safe Args gera: DetailFragmentArgs, HomeFragmentDirections
// Uso em HomeFragment:
val action = HomeFragmentDirections
    .actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)

// Uso em DetailFragment:
private val args: DetailFragmentArgs by navArgs()
// args.itemId é do tipo Long, null não pode ser passado

override fun onViewCreated(...) {
    super.onViewCreated(...)
    loadItem(args.itemId)
}

navArgs() é um delegado Kotlin para recuperar argumentos em um Fragment ou Activity. O plugin suporta primitivos, strings, Parcelable, Serializable, Enum e arrays. Para objetos complexos, passe um ID e carregue do ViewModel ou banco de dados.

Deep Link é um link externo que abre uma tela específica do aplicativo. O Navigation Component lida com links profundos através do atributo app:deepLink no NavGraph. O sistema cria um PendingIntent que restaura a pilha de navegação até a tela alvo, ou cria uma nova pilha se o aplicativo não estiver em execução.

xml

<fragment android:id="@+id/profileFragment"
    android:name=".ProfileFragment">
    <deepLink
        app:uri="https://example.com/profile/{userId}" />
    <argument
        android:name="userId"
        app:argType="string" />
</fragment>

// Criação programática de Deep Link
val pendingIntent = NavDeepLinkBuilder(context)
    .setGraph(R.navigation.nav_graph)
    .setDestination(R.id.profileFragment)
    .setArguments(Bundle().apply {
        putString("userId", "user_123")
    })
    .createPendingIntent()

Os Deep Links suportam padrões URI com caminhos e parâmetros de consulta, intent action e tipo mime. Os placeholders ({userId}) são mapeados automaticamente para os argumentos do destino. O Navigation Component também lida com deep links implícitos através do AndroidManifest — basta adicionar um intent-filter à Activity com NavHostFragment.

Navigation Compose (androidx.navigation:navigation-compose) é uma extensão do Navigation Component para Jetpack Compose. A API preserva o conceito de NavController e NavHost, mas as telas são funções Composable em vez de Fragment. NavHost aceita uma lambda composable para cada rota.

kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                val navController = rememberNavController()
                NavHost(
                    navController = navController,
                    startDestination = "home"
                ) {
                    composable("home") {
                        HomeScreen(
                            onItemClick = { id ->
                                navController.navigate("detail/$id")
                            }
                        )
                    }
                    composable(
                        route = "detail/{itemId}",
                        arguments = listOf(
                            navArgument("itemId") {
                                type = NavType.LongType
                            }
                        )
                    ) { backStackEntry ->
                        val itemId = backStackEntry
                            .arguments?.getLong("itemId") ?: 0L
                        DetailScreen(itemId = itemId)
                    }
                }
            }
        }
    }
}

Navigation Compose usa rotas de string em vez de ids. Os parâmetros são passados através de modelos de rota ("detail/{itemId}") e extraídos de backStackEntry. rememberNavController() preserva NavController durante as recomposições. Para segurança de tipos no Compose, o módulo navigation-compose-type-safety (experimental) é recomendado.

Perguntas frequentes

O que é NavHost no Navigation Component?

NavHost é um contêiner para exibir telas de navegação. É implementado via NavHostFragment no layout XML. NavHost rastreia a tela atual no NavGraph e gerencia as transições. Cada Activity contém um NavHostFragment.

Como Safe Args é melhor que Bundle?

Safe Args é um plugin Gradle que gera classes de argumentos com segurança de tipos. Bundle requer especificação manual de chaves e tipos, levando a erros em tempo de execução. Safe Args verifica os tipos em tempo de compilação e serializa os dados automaticamente.

Como passar objetos complexos através do Navigation Component?

Objetos complexos são passados através de ViewModel (compartilhado entre telas) ou via banco de dados passando um ID. Safe Args só suporta primitivos, strings e Parcelable. O Google recomenda evitar passar objetos grandes através de argumentos de navegação.

Como funciona Deep Link no Navigation Component?

Um Deep Link é configurado no NavGraph através do atributo app:deepLink. O Navigation Component lida automaticamente com links recebidos, cria um PendingIntent através do NavDeepLinkBuilder e restaura a pilha de navegação até a tela alvo. Suporta URI, intent action e tipo mime.

Posso usar Navigation Component com Jetpack Compose?

Sim. Navigation Compose (androidx.navigation:navigation-compose) fornece NavHost para Compose. A API é semelhante à versão XML, mas as telas são funções Composable. NavController é usado da mesma forma em ambas as versões. O Google recomenda Navigation Compose para novos projetos em Compose.

Resumo

  • Navigation Component — uma biblioteca Android Jetpack para navegação centralizada com NavController, NavHost e NavGraph
  • NavGraph — um grafo XML que descreve todas as telas (destinos) e conexões (ações) entre elas
  • NavHostFragment — um contêiner no layout da Activity que suporta o atributo defaultNavHost para o botão de retrocesso
  • Safe Args — um plugin Gradle para passagem de argumentos com segurança de tipos e verificação em tempo de compilação
  • Deep Links suportam URI, intent action e tipo mime com restauração automática da pilha de navegação
  • Navigation Compose — uma extensão para Jetpack Compose com rotas de string e telas composable
  • Navigation Component é a única maneira de navegação recomendada pelo Google para novos projetos Android

Vamos desenvolver um aplicativo móvel chave na mão

A IT Sectr cria aplicativos para iOS e Android para startups e empresas desde 2017. Nós vamos aconselhá-lo e propor a melhor solução.

Discutir o projeto

Leia também