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 — 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.
<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.
// 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 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 — 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.
// 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.
<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.
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
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.
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.
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.
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.
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
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.
Läs också