Android Builders Weblog: Asserting Jetpack Navigation 3

Posted by Don Turner – Developer Relations Engineer

Navigating between screens in your app ought to be easy, should not it? Nevertheless, constructing a sturdy, scalable, and pleasant navigation expertise could be a problem. For years, the Jetpack Navigation library has been a key instrument 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 method.

At present, 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 to any extent further. This library embraces the declarative programming mannequin and Compose state as basic constructing blocks.

Why a brand new navigation library?

The unique Jetpack Navigation library (typically 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 may solely be noticed not directly. This meant there might be two sources of fact, doubtlessly 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, akin to a list-detail structure on massive screens.

Founding rules

Nav3 is constructed upon rules designed to offer higher 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 could be any sort you select. You possibly can navigate by including or eradicating gadgets (Ts), and state modifications 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 all the way down to decrease layers and create your personal parts and customizations.
• Choose your constructing blocks: As a substitute of embedding all habits throughout the library, Nav3 presents smaller parts that you would be able to mix to create extra complicated performance. We have additionally offered a “recipes ebook” that reveals the right way to mix parts to unravel frequent navigation challenges.

Key options

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


Determine 3. Customized animations and predictive again are straightforward to implement, and simple 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.
information object House
information class Product(val id: String)

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

// A NavDisplay shows your again stack. Each time the again stack modifications, 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 House -> 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, akin to a navigation rail or bar
• conditional navigation, akin 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 presently in alpha, which signifies that the API is liable to vary based mostly on suggestions. In case you have any points, or wish 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 Might 22.