codesanitize

Posted by Don Turner – Developer Relations Engineer

Navigating between screens in your app needs to be easy, should not it? Nonetheless, constructing a sturdy, scalable, and pleasant navigation expertise is usually a problem. For years, the Jetpack Navigation library has been a key software for builders, however because the Android UI panorama has advanced, significantly with the rise of Jetpack Compose, we acknowledged the necessity for a brand new strategy.

At this time, we’re excited to introduce Jetpack Navigation 3, a brand new navigation library constructed from the bottom up particularly for Compose. For brevity, we’ll simply name it Nav3 any more. This library embraces the declarative programming mannequin and Compose state as elementary constructing blocks.

Why a brand new navigation library?

The unique Jetpack Navigation library (generally known as Nav2 because it’s on main model 2) was initially introduced again in 2018, earlier than AndroidX and earlier than Compose. Whereas it served its unique objectives properly, we heard from you that it had a number of limitations when working with trendy Compose patterns.

One key limitation was that the again stack state might solely be noticed not directly. This meant there might be two sources of fact, probably resulting in an inconsistent utility state. Additionally, Nav2’s NavHost was designed to show solely a single vacation spot – the topmost one on the again stack – filling the out there area. This made it tough to implement adaptive layouts that show a number of panes of content material concurrently, equivalent to a list-detail format on massive screens.

Founding ideas

Nav3 is constructed upon ideas designed to offer larger flexibility and developer management:

• You personal the again stack: You, the developer, not the library, personal and management the again stack. It is a easy checklist which is backed by Compose state. Particularly, Nav3 expects your again stack to be SnapshotStateList the place T may be any sort you select. You possibly can navigate by including or eradicating objects (Ts), and state adjustments are noticed and mirrored by Nav3’s UI.
• Get out of your means: We heard that you do not like a navigation library to be a black field with inaccessible inside parts and state. Nav3 is designed to be open and extensible, offering you with constructing blocks and useful defaults. If you need customized navigation habits you possibly can drop right down to decrease layers and create your personal parts and customizations.
• Choose your constructing blocks: As a substitute of embedding all habits inside the library, Nav3 presents smaller parts you can mix to create extra complicated performance. We have additionally supplied a “recipes ebook” that reveals the way to mix parts to resolve frequent navigation challenges.

Key options

• Adaptive layouts: A versatile format API (named Scenes) lets you render a number of locations in the identical format (for instance, a list-detail format on massive display screen units). This makes it simple to change between single and multi-pane layouts.
• Modularity: The API design permits navigation code to be break up throughout a number of modules. This improves construct instances and permits clear separation of obligations between characteristic modules.


Determine 3. Customized animations and predictive again are simple to implement, and straightforward to override for particular person locations.

Fundamental code instance

To present you an concept of how Nav3 works, this is a brief code pattern.

// Outline the routes in your app and any arguments.
knowledge object Residence
knowledge class Product(val id: String)

// Create a again stack, specifying the route the app ought to begin with.
val backStack = bear in mind { mutableStateListOf(Residence) }

// A NavDisplay shows your again stack. Each time the again stack adjustments, the show updates.
NavDisplay(
    backStack = backStack,

    // Specify what ought to occur when the person goes again
    onBack = { backStack.removeLastOrNull() },

    // An entry supplier converts a route right into a NavEntry which accommodates the content material for that route.
    entryProvider = { route ->
        when (route) {
            is Residence -> NavEntry(route) {
                Column {
                    Textual content("Welcome to Nav3")
                    Button(onClick = {
                        // To navigate to a brand new route, simply add that path to the again stack
                        backStack.add(Product("123"))
                    }) {
                        Textual content("Click on to navigate")
                    }
                }
            }
            is Product -> NavEntry(route) {
                Textual content("Product ${route.id} ")
            }
            else -> NavEntry(Unit) { Textual content("Unknown route: $route") }
        }
    }
)

Get began and supply suggestions

To get began, take a look at the developer documentation, plus the recipes repository which offers examples for:

• frequent navigation UI, equivalent to a navigation rail or bar
• conditional navigation, equivalent to a login circulate
• customized layouts utilizing Scenes

We plan to offer code recipes, documentation and blogs for extra complicated use instances in future.

Nav3 is at the moment in alpha, which signifies that the API is liable to alter primarily based on suggestions. In case you have any points, or want to present suggestions, please file a problem.

Nav3 presents a versatile and highly effective basis for constructing trendy navigation in your Compose purposes. We’re actually excited to see what you construct with it.

Discover this announcement and all Google I/O 2025 updates on io.google beginning Could 22.