Scribd
Upload
2 views

Lecture 7

Compose Navigation is a Jetpack library designed for managing navigation in Jetpack Compose apps using a NavController. It includes components like NavGraph and NavHost, and allows for defining routes, managing a backstack, and handling back navigation. Key features include type-safe arguments, deep linking, and animations, with specific methods for navigating and preventing duplicate screens in the backstack.

Uploaded by

ukr.droid.dev
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lecture 7

Compose Navigation is a Jetpack library designed for managing navigation in Jetpack Compose apps using a NavController. It includes components like NavGraph and NavHost, and allows for defining routes, managing a backstack, and handling back navigation. Key features include type-safe arguments, deep linking, and animations, with specific methods for navigating and preventing duplicate screens in the backstack.

Uploaded by

ukr.droid.dev
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Navigation in

Compose

Author:Semen Naduiev
What is Compose Navigation?

Compose Navigation is a Jetpack library for handling navigation in Jetpack Compose apps.

Uses a Navigation Controller (NavController) to manage destinations.

Supports type-safe arguments, deep linking, and animations.


Setting Up Navigation

Add the dependency to build.gradle:


implementation("androidx.navigation:navigation-compose:latest-version")
Parts of the Navigation Component

The Navigation component has three main parts:

NavController: Responsible for navigating between destinations—that is, the screens in your
app.

NavGraph: Maps composable destinations to navigate to.

NavHost: Composable acting as a container for displaying the current destination of the
NavGraph.
Define routes for destinations in your app

One of the fundamental concepts of navigation in a Compose app is the route. A route is a string
that corresponds to a destination. This idea is similar to the concept of a URL. Just as a different
URL maps to a different page on a website, a route is a string that maps to a destination and
serves as its unique identifier. A destination is typically a single Composable or group of
Composables corresponding to what the user sees. The Cupcake app needs destinations for the
start order screen, the flavor screen, the pickup date screen, and the order summary screen.

There are a finite number of screens in an app, so there are also a finite number of routes. You
can define an app's routes using an enum or sealed(I recommend) class.
Understanding the Navigation Backstack

What is the backstack?

A stack-like structure that holds screens (destinations).

NavController manages the backstack.

Why is it important?

Ensures smooth navigation and proper screen transitions.

Allows users to navigate back seamlessly.


Basic Backstack Manipulations

Navigating forward : navController.navigate("details")

Going back: navController.popBackStack()

Popping to a specific destination: navController.popBackStack("home", inclusive = false)

Clear the entire backstack when navigating:

navController.navigate("home") {

popUpTo(0)

}
Preventing Duplicate Screens in Backstack

navController.navigate("profile") {

launchSingleTop = true

}
Passing Arguments Without Adding a New
Screen to the Stack
Be carefull

Using popBackStack() is dangerous using toolbar!


It’s better to use navigateUp() in toolbar
Handling Back Press in Jetpack Compose

🔹 Jetpack Compose provides BackHandler to handle the system back press event.

🔹 It allows intercepting and customizing back navigation behavior in a composable.

🔹 Useful for confirming exit, preventing unintended navigation, or handling nested screens.
Basic Usage of BackHandler
Conditional Back Handling
BackHandler in Nested Navigation

You might also like