Android Academy · Les

Navigation Component

Beheer navigatie tussen meerdere schermen met een visuele NavGraph, Safe Args voor typeveilige argumenten, NavController en ondersteuning voor deep links.

Les 5 van 613 stappen

Navigation Component is een gratis Android Academy-les op CoddyKit. Dit is les 5 van 6. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Android Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Android Academy bevat in totaal 6 lessen.

Wat is de Navigation Component?

De Navigation Component is een Android Jetpack-bibliotheek die fragmentnavigatie, de terugnavigatiestapel, deep links en overgangsanimaties beheert in één visuele grafiek.

Belangrijkste voordelen:

Visuele navigatiegrafiek in Android Studio
Typeveilige argumentdoorgifte (Safe Args)
Automatisch beheer van de terugnavigatiestapel
Ingebouwde ondersteuning voor deep links

Instellen: afhankelijkheden

Voeg dit toe aan app/build.gradle:

// app/build.gradle
dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.7.7'
    implementation 'androidx.navigation:navigation-ui-ktx:2.7.7'
}

// project/build.gradle (for Safe Args):
buildscript {
    dependencies {
        classpath 'androidx.navigation:navigation-safe-args-gradle-plugin:2.7.7'
    }
}

// app/build.gradle — apply the plugin:
plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

Navigatiegrafiek (nav_graph.xml)

Maak res/navigation/nav_graph.xml. Hierin definieer je bestemmingen (fragmenten) en acties (navigatiepaden):

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

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.HomeFragment">
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@id/detailFragment" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.DetailFragment">
        <argument
            android:name="itemId"
            app:argType="integer" />
    </fragment>
</navigation>

NavHostFragment in de Activity-layout

Vervang de FrameLayout-container door NavHostFragment. Deze fungeert als host voor alle navigatiebestemmingen:

<!-- activity_main.xml -->
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/navHostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost="true" />

NavController — navigeren tussen fragmenten

Haal een NavController op en roep navigate() aan met een actie-ID:

class HomeFragment : Fragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.btnOpenDetail.setOnClickListener {
            // Navigate using action ID from nav_graph
            findNavController().navigate(R.id.action_home_to_detail)
        }
    }
}

Safe Args — typeveilige argumenten

Safe Args genereert klassen voor het doorgeven van argumenten tussen fragmenten, zonder casts of typefouten in sleutels:

// In HomeFragment — pass itemId:
binding.btnOpenDetail.setOnClickListener {
    val action = HomeFragmentDirections.actionHomeToDetail(itemId = 42)
    findNavController().navigate(action)
}

// In DetailFragment — receive itemId:
class DetailFragment : Fragment() {
    private val args: DetailFragmentArgs by navArgs()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val id = args.itemId   // Int, type-safe
        viewModel.loadItem(id)
    }
}

Omhoog navigeren

Verbind de knop Omhoog van de Toolbar met de NavController voor automatisch terugnavigeren:

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController

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

        val navHostFragment = supportFragmentManager
            .findFragmentById(R.id.navHostFragment) as NavHostFragment
        navController = navHostFragment.navController

        // Wire toolbar Up button
        setupActionBarWithNavController(navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp() || super.onSupportNavigateUp()
    }
}

BottomNavigation met NavController

Verbind een BottomNavigationView met de NavController — deze verwerkt automatisch tabbladselectie en de terugnavigatiestapel:

// In Activity.onCreate():
val navHostFragment = supportFragmentManager
    .findFragmentById(R.id.navHostFragment) as NavHostFragment
val navController = navHostFragment.navController

// Wire BottomNavigationView
binding.bottomNav.setupWithNavController(navController)

// Each menu item ID must match a fragment destination ID in nav_graph.xml

Terugnavigatiestapel terugplaatsen

Navigeer programmatisch terug of naar een specifieke bestemming:

// Go back one step
findNavController().popBackStack()

// Navigate back to a specific destination (popping everything on top)
findNavController().popBackStack(R.id.homeFragment, inclusive = false)

// Navigate and clear back stack (e.g., after login)
findNavController().navigate(
    R.id.action_login_to_home,
    null,
    NavOptions.Builder()
        .setPopUpTo(R.id.loginFragment, inclusive = true)
        .build()
)

Deep links

Voeg een deep link toe aan een bestemming, zodat je app vanuit een URL kan worden geopend:

<!-- In nav_graph.xml, inside the destination fragment: -->
<deepLink
    android:id="@+id/deepLinkDetail"
    app:uri="https://example.com/items/{itemId}" />

<!-- Also add intent-filter in AndroidManifest.xml for the Activity: -->
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="example.com" />
</intent-filter>

Overgangen tussen fragmenten

Voeg aangepaste animaties toe aan navigatieacties in de navigatiegrafiek:

<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" />

Korte controle

Wat moet overeenkomen tussen de ID van het menu-item van de BottomNavigationView en de navigatiegrafiek voor automatische tabbladverwerking?

Beantwoord dit in de interactieve les

Samenvatting: Navigation Component

De Navigation Component vereenvoudigt apps met meerdere schermen:

Visuele nav_graph.xml — bestemmingen en acties
NavHostFragment in de Activity-layout
findNavController().navigate(actionId) om tussen schermen te navigeren
Safe Args — typeveilige argumentdoorgifte (geen casts en geen typefouten)
setupActionBarWithNavController() — automatische knop Omhoog
setupWithNavController() — automatische BottomNavigationView

Volgende: voeg dependency-injectie met Hilt toe voor een duidelijke architectuur.

Gratis beginnen

Leer Kotlin met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 36
Lessen: 152

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Navigation Component” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Android Academy, waaronder “Navigation Component”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Android Academy bevat in totaal 6 lessen.

Wat leer ik in “Navigation Component”?

Beheer navigatie tussen meerdere schermen met een visuele NavGraph, Safe Args voor typeveilige argumenten, NavController en ondersteuning voor deep links. Je oefent met Android Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Android Academy te beginnen?

Ervaring vooraf is niet nodig. Android Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 5 van 6.

Hoe lang duurt de les “Navigation Component”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Android Academy?

Ja. Elke les over Android Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Android Academy