Navigation Component — vad är det, NavHost och Navigation Graph

Författare: IT Sectr Publicerad: 2026-02-22 Lästid: 7 min

Navigation Component — Android Jetpack-bibliotek för att implementera navigering mellan appskärmar. Komponenten centraliserar hanteringen av fragmentstacken, djupa länkar och argumentöverföring. Ingår i Jetpack sedan 2018 och rekommenderas av Google för alla nya projekt. Läs mer i Googles officiella guide.

Huvudpunkter

  • Navigation Component — Jetpack-bibliotek för centraliserad navigering mellan Android-skärmar
  • NavGraph — XML-resurs som beskriver alla skärmar och kopplingar mellan dem
  • NavHostFragment — behållare i Activity-layouten som visar den aktuella navigeringsskärmen
  • NavController — objekt för navigeringshantering: navigate, popBackStack, navigateUp
  • Safe Args — Gradle-plugin för typsäker argumentöverföring mellan skärmar

Vad är Navigation Component?

Navigation Component — Android Jetpack-bibliotek (androidx.navigation) som tillhandahåller ett enhetligt API för navigering. Innehåller tre nyckelelement: Navigation Graph (navigationsgraf), NavHostFragment (behållare för skärmar) och NavController (övergångskontroll). Komponenten hanterar automatiskt back-stacken och stöder deep links.

Före Navigation Component hanterade utvecklare fragment manuellt via FragmentManager. Detta ledde till fragmenterad kod: varje skärm hade egna navigeringsregler, back-stack-statusen varierade och deep links krävde separat implementering. Navigation Component enhetliggjorde dessa scenarier. Enligt Google (2026) är biblioteket installerat i 90 % av nya Android-projekt.

Navigation Component integreras med andra Jetpack-bibliotek: LiveData, ViewModel, Material Design. Stöder både XML-fragment och Jetpack Compose via tillägget navigation-compose. Stabil utgåva — 2.8.x (2025), lägsta Android-version — API 14.

NavGraph — XML-resurs (res/navigation/nav_graph.xml) som definierar alla skärmar i appen och kopplingarna mellan dem. Varje skärm är en nod (destination) som kan vara Fragment, Activity eller Composable. Kopplingar mellan noder är action, som anger övergångsriktningen.

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="Hem"
        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="Detaljer"
        tools:layout="@layout/fragment_detail">
        <argument android:name="itemId"
            app:argType="integer"
            android:defaultValue="0" />
    </fragment>
</navigation>

Attributet startDestination anger den första skärmen som visas vid start. Action definierar måldestinationen och valfria animationer. Argument (argument) beskriver parametrarna som skickas till skärmen — typ och standardvärde.

NavHostFragment — behållare som placeras i Activity-layouten och visar den aktuella navigeringsskärmen. NavHostFragment växlar automatiskt fragment vid anrop av NavController.navigate(). NavController — objekt som hanterar navigering: övergång, återgång, kontroll av aktuell rutt.

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 kopplar NavController till AppBar
        setupActionBarWithNavController(navController)
    }

    // Övergång till detaljskärmen
    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" — viktigt attribut: fångar systemets 'Tillbaka'-knapp och överför kontrollen till NavController. NavigationUI — verktyg för att koppla NavController till AppBar, BottomNavigationView, NavigationDrawer. setupActionBarWithNavController aktiverar 'Upp'-pilen på kapslade skärmar.

Navigation Component stöder anpassade övergångsanimationer, definierade i action eller programmatiskt. Animationer definieras av fyra attribut: enterAnim (ny skärm visas), exitAnim (nuvarande skärm försvinner), popEnterAnim (visas vid återgång) och popExitAnim (försvinner vid återgång).

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>

// Programmatisk övergång med animation
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)

Animationer fungerar med Fragment på FragmentTransaction-nivå. För Jetpack Compose ställs animationer in via NavOptionsCompat med Compose Animation. Navigation Component begränsar inte animationstypen — stöder translate, scale, alpha och deras kombinationer.

Safe Args: typsäkra argument

Safe Args — Gradle-plugin för typsäker dataöverföring mellan skärmar. Pluginen analyserar NavGraph, genererar Directions- och Args-klasser med specifika fälttyper. Vid kompilering kontrolleras typöverensstämmelse — MissingArgumentException upptäcks innan appen startas.

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

// Safe Args genererar: DetailFragmentArgs, HomeFragmentDirections
// Användning i HomeFragment:
val action = HomeFragmentDirections
    .actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)

// Användning i DetailFragment:
private val args: DetailFragmentArgs by navArgs()
// args.itemId har typ Long, null kan inte skickas

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

navArgs() — Kotlin-delegat för att hämta argument i Fragment eller Activity. Pluginen stöder primitiva typer, strängar, Parcelable, Serializable, Enum och arrayer. För komplexa objekt, använd ID-överföring med inläsning från ViewModel eller databas.

Deep Link — extern länk som öppnar en specifik skärm i appen. Navigation Component hanterar deep links via attributet app:deepLink i NavGraph. Systemet skapar en PendingIntent som återställer navigationsstacken till målskärmen, eller skapar en ny stack om appen inte körs.

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>

// Programmatisk skapelse av Deep Link
val pendingIntent = NavDeepLinkBuilder(context)
    .setGraph(R.navigation.nav_graph)
    .setDestination(R.id.profileFragment)
    .setArguments(Bundle().apply {
        putString("userId", "user_123")
    })
    .createPendingIntent()

Deep Links stöder URI-mallar med sökvägar och query-parametrar, intent action och mime type. Placeholder ({userId}) mappas automatiskt till destination-argumentet. Navigation Component hanterar även implicita deep links via AndroidManifest — lägg bara till intent-filter till Activity med NavHostFragment.

Navigation Compose (androidx.navigation:navigation-compose) — tillägg av Navigation Component för Jetpack Compose. API:et behåller konceptet NavController och NavHost, men skärmar är Composable-funktioner istället för Fragment. NavHost accepterar en composable lambda för varje rutt.

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 använder strängrutter istället för id. Parametrar skickas via ruttmallen ("detail/{itemId}") och extraheras från backStackEntry. rememberNavController() behåller NavController vid rekomposition. För Type Safety i Compose rekommenderas modulen navigation-compose-type-safety (experimentell).

Vanliga frågor

Vad är NavHost i Navigation Component?

NavHost — behållare för att visa navigeringsskärmar. Implementeras via NavHostFragment i XML-layout. NavHost spårar den aktuella skärmen i NavGraph och hanterar övergångar. Varje Activity innehåller en NavHostFragment.

Vad gör Safe Args bättre än Bundle?

Safe Args — Gradle-plugin som genererar typsäkra argumentklasser. Bundle kräver manuell specifikation av nycklar och typer, vilket leder till körningsfel. Safe Args kontrollerar typer vid kompilering och serialiserar data automatiskt.

Hur överför man komplexa objekt via Navigation Component?

Komplexa objekt överförs via ViewModel (delad mellan skärmar) eller via databas med ID-överföring. Safe Args stöder endast primitiva typer, strängar och Parcelable. Google rekommenderar att undvika att överföra stora objekt via navigeringsargument.

Hur fungerar Deep Link i Navigation Component?

Deep Link konfigureras i NavGraph via attributet app:deepLink. Navigation Component hanterar automatiskt inkommande länkar, skapar en PendingIntent via NavDeepLinkBuilder och återställer navigationsstacken till målskärmen. Stöder URI, intent action och mime type.

Kan Navigation Component användas med Jetpack Compose?

Ja. Navigation Compose (androidx.navigation:navigation-compose) tillhandahåller NavHost för Compose. API:et liknar XML-versionen, men skärmar är Composable-funktioner. NavController används på samma sätt i båda versionerna. Google rekommenderar Navigation Compose för nya projekt i Compose.

Sammanfattning

  • Navigation Component — Android Jetpack-bibliotek för centraliserad navigering med NavController, NavHost och NavGraph
  • NavGraph — XML-graf som beskriver alla skärmar (destination) och kopplingar (action) mellan dem
  • NavHostFragment — behållare i Activity-layouten som stöder attributet defaultNavHost för 'Tillbaka'-knappen
  • Safe Args — Gradle-plugin för typsäker argumentöverföring med typkontroll vid kompilering
  • Deep Links stöder URI, intent action och mime type med automatisk återställning av navigationsstack
  • Navigation Compose — tillägg för Jetpack Compose med strängrutter och composable-skärmar
  • Navigation Component är den enda av Google rekommenderade navigeringsmetoden i nya Android-projekt

Vi utvecklar en mobil applikation nyckelfärdigt

IT Sectr skapar iOS- och Android-applikationer för startups och företag sedan 2017. Vi ger dig råd och föreslår den bästa lösningen.

Diskutera projektet

Läs också